好站网 好站网

dom节点的概念、基本属性和基本类型

2023-09-24 12 0

目录

一、dom节点的概念

二、dom节点的基本属性

三、dom节点的基本类型

元素节点

属性节点

文本节点

注释节点

文档节点

文档类型节点

文档片段节点

一、dom节点的概念

dom是w3c标准，全称Document Object Model，翻译为文档对象模型，是一套操作html和xml的标准API（应用程序编程接口）。dom将文档内容呈现在Javascript面前，赋予了Javascript操作文档的能力。根据w3c的dom标准，文档中所有的内容都是节点，节点是dom的最小组成单元。浏览器会根据dom模型将文档解析成一系列节点。因为所有节点最终都继承自Node节点类，所以dom节点也可以称之为Node节点。

二、dom节点的基本属性

在dom中，每个节点都是一个对象。dom节点有三个非常重要的属性和一个公有方法。节点类型不同，三个属性值也不相同。

nodeName

返回节点名称，只读属性。

nodeValue

返回或设置节点值。

nodeType

返回节点类型的常数值，只读属性。不同类型对应不同的常数值，12种类型分别对应1到12 。

hasChildNodes

判断当前节点是否有子节点，有返回true没有返回false。子节点可以是任意节点类型。

三、dom节点的基本类型

dom共有12种节点类型，每种类型表示文档中不同的信息及标记，其中7种用来操作html，5种用来操作xml（忽略）。

             

元素节点

元素节点又称dom元素简称元素。html元素是dom元素的子类，是html标签的dom化结果。节点与标签双向动态绑定，操作节点属性会将结果直接渲染到标签，修改标签也会同步更新元素节点。访问标签名可以使用nodeName属性或tagName属性，这两个属性返回结果相同。tagName属性是在Element节点类中定义的，所以它只支持元素节点。

<div id="d1"></div>
<script>var div = document.getElementById("d1"); //<div>标签dom化console.log(div.nodeName);  //"DIV"console.log(div.tagName);   //"DIV"console.log(div.__proto__); //查看节点属性
</script>

 

元素节点的父节点是元素节点或文档节点。

<html lang="en"><body><a href="" id="demo"></a></body>
</html>

  

属性节点

属性节点又称特性节点，是标签特性的dom化结果。固有特性和自定义特性都有其对应的属性节点。属性节点保存在attributes特性集中。属性节点并不是dom节点树的一部分。如果标签特性名是大写形式，dom化时会自动转换为小写。

属性节点有三个基本属性，分别是name、value和specified。其中name是属性节点的名称，与nodeName值相同。value是属性节点的值，与nodeValue值相同。specified是一个布尔值，用来区分标签特性是主动设置的，还是默认的。属性节点有四个基本方法，分别是createAttribute()、setAttributeNode()、getAttributeNode()和removeAttributeNode()。属性节点的属性和方法并不常用，因为元素节点都有对应的可替代方法，而且使用起来更为方便。

文本节点

文本节点是指向文本的节点，网页上看到的文本内容都是文本节点。文本节点的父节点是元素节点，文本节点没有子节点。ie8及以下版本的浏览器不能识别空白文本节点。

<div id="div"><div></div>
</div>
<script>var div = document.getElementById("div");//标准浏览器输出[text, div, text], 此处text指空白文本节点//ie8及ie8以下浏览器输出[div], 并不包含空白文本节点console.log(div.childNodes);
</script>

data属性

文本节点的data属性值等于nodeValue属性值。

<div id="div">demo</div>
<script>var div = document.getElementById("div");var textNode = div.firstChild;console.log(textNode.data);      //"demo"console.log(textNode.nodeValue); //"demo"
</script>

createTextNode()

创建文本节点。接收一个参数作为文本节点的内容。该方法不会解析html标签。

<div id="div">hello</div>
<script>var div = document.getElementById("div");var textNode = document.createTextNode("123");div.appendChild(textNode);console.log(div.childNodes.length); //2 
</script>

appendData()

向节点末尾添加文本。

<div id="div">123</div>
<script>var div = document.getElementById("div");var textNode= div.firstChild;textNode.appendData("4")console.log(textNode.data);         //"1234"console.log(div.childNodes.length); //1
</script>

注释节点

注释节点就是文档中注释的dom化结果。注释节点的父节点是元素节点或文档节点，注释节点没有子节点。所有浏览器都识别不出位于</html>之后的注释。注释节点和文本节点继承自相同的基类。

<html><body><!--注释节点--></body>
</html>
<!--浏览器不识别</html>标签后面的注释-->

data属性

注释节点的data属性值等于nodeValue属性值。

createComment()

创建注释节点。

var CNode = document.createComment('hello world!');

appendData()

向注释节点的末尾添加文本。

<body><!--我是注释-->
<script>var CNode = document.body.firstChild;console.log(CNode.data); //我是注释console.log(CNode.appendData('test')); //undefinedconsole.log(CNode.data); //我是注释test
</script>
</body>

文档节点

文档节点隶属于window对象，表示整个页面文档，是文档的根节点。浏览器中有html、xml和svg三种类型的文档，分别对应三种类型的文档节点。文档节点没有父节点。在html文档中，文档节点有两个子节点，分别是html元素节点（仅指<html>标签的dom化节点）和文档类型节点。在Javascript中，document不是一个普通的JS内置对象，而是dom的核心对象。

  

document.documentElement属性

document.documentElement是一个元素节点，指向文档中的<html>标签。

document.body属性

document.body是一个元素节点，指向文档中的<body>标签。

document.doctype属性

document.doctype是一个元素节点，指向文档中的<!DOCTYPE>标签。ie8及以下版本的浏览器不兼容，输出null（因为叹号的原因ie8及以下版本的浏览器将其识别为注释节点）。

document.head属性

document.head是一个元素节点，指向文档中的<head>标签。ie8及以下版本的浏览器不支持。

console.log(document.documentElement.nodeName); // "HTML"
console.log(document.body.nodeName);            // "BODY"
console.log(document.doctype.nodeName);         // "html"
console.log(document.head.nodeName);            // "HEAD"

document.title属性

document.title属性值是<title>标签中的文本，可读可写。

document.URL属性

返回页面完整地址。

document.URL; //"https://www.baidu.com/s?ie=UTF-8&wd=%E7%99%BE%E5%BA%A6"

document.domain属性

返回页面的域名。

document.domain; //"www.baidu.com"

document.referrer属性

当前页面作为子页面，返回父页面的url。如果没有父页面，返回null。

URL、domain和referrer三个属性的信息来自请求的HTTP头部。三个属性中，只有domain是可以设置的。但由于安全方面的限制，只能将domain设置为URL中包含的域。

console.log(document.URL);      //http://www.cnblogs.com/xiaohuochai/
console.log(document.domain);   //www.cnblogs.com
console.log(document.referrer); //http://home.cnblogs.com/followees/

document.baseURI属性

返回<base>标签中的URL，如果没有设置<base>，baseURL属性值等于URL属性值。

<base href="http://www.baidu.com"> 
<script>console.log(document.baseURI);//'http://www.baidu.com/'
</script>

document.charset属性

返回文档中实际使用的字符集。

console.log(document.charset); // "UTF-8"

document.documentMode属性

返回当前文档模式。该属性只有ie11及以下版本的浏览器支持。

//IE11返回11，IE10返回10，IE9返回9，IE8返回8，IE7返回7，IE6返回6
//其他浏览器返回undefined
console.log(document.documentMode);

document.lastModified属性

返回当前文档最后修改的时间戳，返回结果为字符串类型。

console.log(document.lastModified); // "03/30/2019 20:00:58"

document.anchors属性

返回一个HTMLCollection集合，该集合包含文档中所有带name特性的<a>标签对应的元素节点。

<a href= "#" name="a1">a1</a>
<a href= "#" name="a2">a2</a>
<a href= "#" >3</a>
<script>console.log(document.anchors.length)//2
</script>

document.links属性

返回一个HTMLCollection集合，该集合包含文档中所有带href特性的<a>标签对应的元素节点。

<a href="#">1</a>
<a href="#">2</a>
<a>3</a>
<script>console.log(document.links.length)//2
</script>

document.forms属性

返回一个HTMLCollection集合，该集合包含文档中所有<form>标签对应的元素节点，与document.getElementsByTagName("form")结果相同。

<form action="#">1</form>
<form action="#">2</form>
<script>console.log(document.forms.length)//2
</script>

document.images属性

返回一个HTMLCollection集合，该集合包含文档中所有<img>标签对应的元素节点，与document.getElementsByTagName('img')结果相同。

<img src="#" alt="#">
<img src="#" alt="#">
<script>console.log(document.images.length)//2
</script>

document.write()

write()和writeln()方法可以将数据打印到页面，参数为字符串类型，支持同时打印多个，可以解析html标签。其中write()方法会原样写入，而writeln()方法会在字符串两侧各加一个空格。

<button id="btn">内容</button>
<script>document.writeln('hello'); //"hello"document.write('world');   //"hello world"
</script>
document.write("1", "2", "3");   //"123"
document.writeln("4", "5", "6"); //"123 456"

open()方法可以清除当前文档的所有节点，并打开一个新文档，新文档用write()或writeln()方法编写内容，最后用close()方法关闭文档输出流。一旦文档输出流关闭，当前文档就不能再被写入新内容，此时如果调用write或writeIn方法，会隐式调用open方法清空当前文档后再写入。如果在页面加载期间使用write或writeIn方法，不会清空当前文档 ，会直接在文档流末尾写入。

//相当于'123'又把'1'覆盖了
document.open();
document.write('1');
document.close();
document.write('123');

文档类型节点

文档类型节点包含与文档类型有关的信息。因为叹号的原因ie8及以下版本的浏览器将文档类型节点视为注释节点。文档类型节点的父节点是文档节点，没有子节点。document.doctype属性返回文档类型节点，但ie8及以下版本浏览器不兼容该属性。

<!DOCTYPE html>
<html lang="en">
<body>
<script>var doctype = document.doctype;console.log(doctype.nodeName); //html
</script>
</body>
</html>

文档片段节点

文档片段节点在文档中没有对应的标记。该节点表示一个文档片段，dom规定文档片段是一种轻量级的文档，可以看作一个小型的文档节点，它可以包含和控制节点，但不会像完整文档一样占用额外资源。文档片段节点没有父节点。

var frag = document.createDocumentFragment(); //创建文档片段

文档片段节点通常用于执行针对文档的dom操作。Javascript操作dom元素会使浏览器重新渲染页面，如果Javascript频繁更新dom节点，则会非常消耗性能，影响用户体验。为此Javascript提供了一个文档片段机制。把所有要操作的节点放在文档片段中处理，这样可以不影响dom节点树，也不会造成页面渲染，当节点操作完成后，再将文档片段添加到页面中，这时所有节点会一次性渲染出来，达到减少浏览器负担，提高页面渲染速度的目的。文档片段节点在ie浏览器中作用不明显，甚至会降低性能，所以文档片段节点并不常用。

<ul id="list"></ul>
<script>var list = document.getElementById('list');var frag = document.createDocumentFragment();for(var i = 0; i < 500000; i++){frag.appendChild(document.createElement('li'));}list.appendChild(frag);
</script>

 

代码编程
赞赏

相关文章

小议怎么保证系统线上安全
JMS 与 AMQP 区别
数据库优化之innodb_flush_log_at_trx_commit参数性能优化
java代码优化的小建议
SpringCloud 链路追踪应用
各种文件系统特性说明以及对比