标签：mode 文档对象模型 出版 style 常见 证明 相关 ntb comm
首先，我们需要介绍什么是DOM。DOM的英语全称为Document Object Model,翻译成中文就 是文档对象模型。也就是说，将整个文档看作是一个对象。而一个文档又是由很多节点组成的， 那么这些节点也可以被看作是一个个的对象。DOM里面的对象属于宿主对象，需要浏览器来作 为宿主。一旦离开了浏览器这个环境，那么该对象将不复存在。同样，上一章我们所介绍的 BOM也是如此，需要浏览器来作为宿主，所以它也是一个宿主对象。
DOM的作用如下：
?浏览器提供的操纵HTML文档内容的应用程序接口
?用于对文档进行动态操作，如增加文档内容，删除文档内容，修改文档内容等等
DOM 历史
在介绍了什么是DOM之后，接下来我们来看一下DOM的一个发展史。而一说到DOM的发展史， 那就不得不介绍DOM的级别。这里我们对DOM的级别来进行一个简单的介绍，如下：
DOM Level 0：首先，我们需要确定的是在DOM标准中并没有DOM0级这个级别。所谓
的DOM0级是DOM历史坐标中的一个参照点而已，怎么说呢，DOM0级指的是IE4和N etscape 4.0这些浏览器最初支持的DOM相关方法。主要关注于常见的页面元素，比如图像，链接和表 单。有些现在图像和表单的那些方法，目前依然可以被用在当前版本的DOM中。
DOM Level 1：于1998年10月成为W3C的推荐标准。DOM1级由两个模块组成：DOM核心 (DOM Core)和DOM HTML。这个版本引入了网页的完整模型，允许在网页的每个部分进行导 航。
DOM Level 2：对DOM level 1 做了扩展，于20001年出版，引入了流行的 getElementById()方 法，让访问网页上的特定元素变得更加容易。
DOM Level 3：对DOM level 2做了进一步的扩展，于2004年出版。
节点类型与节点名称
—个文档是由大量的节点所构成的。而每一个节点都有一个叫做nodeType的属性，用于表明节 点的类型。不同的节点类型对应了不同的数值，具体对应的数值如下表：
|
节点名称 |
对应数值 |
|
兀素P点 |
Node.ELEMENT_NODE(1) |
|
属性节点 |
Node.ATTRIBUTE_NODE ⑵ |
|
文本节点 |
Node.TEXT_NODE ⑶ |
|
CDATA节点 |
Node.CDATA_SECTION_NODE ⑷ |
|
实体引用名称节点 |
Node.ENTRY_REFERENCE_NODE(5) |
|
实体名称节点 |
Node.ENTITY_NODE(6) |
|
处理指令节点 |
Node.PROCESSING_INSTRUCTION_NODE(7) |
|
注释节点 |
Node.COMMENT_NODE(8) |
|
文档节点 |
Node.DOCUMENT_NODE(9) |
|
文档类型节点 |
Node.DOCUMENT_TYPE_NODE(10) |
|
文档片段节点 |
Node.DOCUMENT_FRAGMENT_NODE(11) |
|
DTD声明节点 |
Node.NOTATION_NODE(12) |
|
从上面我们可以看出， 到该节点的节点类型， |
不同的节点对应了不同的节点类型，我们可以通过nodeType属性来获取 示例如下： |
<body>
<p id="test1" class="abc">Lorem ipsum dolor sit amet.</p>
<script>
let test1 = document.getElementById("test1");
let content = test1.firstChild;
let attr = test1.getAttributeNode("class"); console.log(test1.nodeType);//1获取元素节点的节点类型 console.log(content.nodeType);//3获取文本节点的节点类型 console.log(att r.nodeType);//2获取属性节点的节点类型 console.log(document.nodeType);//9 获取整个文档的节点类型
</script>
</body>
nodeType属性可以和if配合使用，确保不会在错误的节点类型上执行错误的操作，如下:
<body>
<p id="test1" class="abc">Lorem ipsum dolor sit amet.</p> <script>
let test1 = document.getElementById("test1");
//如果是元素节点
if(test1.nodeType == 1){
//设置该节点的颜色为红色
test1.style.color = "red";
}
</script>
</body>
效果：
Lorem ipsum dolor sit amet.
除了获取节点类型以外，我们还可以通过nodeName属性来获取节点的名称，示例如下：
<body>
<p id="test1" class="abc">Lorem ipsum dolor sit amet.</p> <script>
let test1 = document.getElementById("test1");
let content = test1.firstChild;
let attr = test1.getAttributeNode("class"); console.log(test1.nodeName);//P console.log(content.nodeName);//#text console.log(attr.nodeName);//class console.log(document.nodeName);//#document </script>
</body>
可以使用nodeValue来获取一个元素节点的文本值，示例如下:
<body>
<p id="test1" class="abc">Lorem ipsum dolor sit amet.</p> <p id="test2">Lorem ipsum dolor sit amet.</p>
<a hr ef="" class="abc"> 链接 1</a>
<ul id="test3">
<li>item1</li>
<li>item2</li>
<li>item3</li>
</ul>
<script>
let i = document.getElementById("test1");
//p元素节点的子节点(文本节点)的节点值 console.log(i.firstChild.nodeValue);
</script>
</body>
效果：
Lorem ipsum dolor sit amet.
需要注意的是n odeValue是获取节点的值，所以还是需要先定位到元素节点下面的文本节点。
最后一点需要说明的是，属性节点并不是元素节点的子节点，只能算作是元素节点的一个附属节 点，如下图：
这里我们通过一段代码来证明上面说的这一点，如下:
<body>
<p id="test1" class="abc">Lorem ipsum dolor sit amet.</p> <script>
let test1 = document.getElementById("test1"); console.log(testl.childNodes);//打印出该节点的所有子节点 </script>
</body>
效果：
▼ NodeList(1)
? 0: text
length: 1
?_proto_: NodeList
可以看到，当我们查看vp＞元素下面的子节点时，打印出来的子节点只有一个文本节点，通过这 个例子就可以证明属性节点并不是元素节点的子节点，只能算作是元素节点的一个附属节点。
标签：mode 文档对象模型 出版 style 常见 证明 相关 ntb comm
原文地址：https://www.cnblogs.com/jrzqdlgdx/p/11176284.html
