DOM基础知识

Posted 2022-04-07 jrzqdlgdx

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了DOM基础知识相关的知识，希望对你有一定的参考价值。

首先，我们需要介绍什么是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 做了扩展，于2000¹年出版，引入了流行的 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>

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>

</ul>

let i = document.getElementById("test1");

//p元素节点的子节点(文本节点)的节点值 console.log(i.firstChild.nodeValue);

</script>

</body>

效果：

Lorem ipsum dolor sit amet.

需要注意的是n odeValue是获取节点的值，所以还是需要先定位到元素节点下面的文本节点。