DOM

Posted 2020-12-13 x0815

tags:

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

DOM的全称是 Document Object Model，中文就是：文档对象模型.

---------------------------------------------------------
节点名称对应数值

元素节点 Node.ELEMENT_NODE(1)

属性节点 Node.ATTRIBUTE_NODE(2)

文本节点 Node.TEXT_NODE(3)

----------------------------------------------------------

1、旧的DOM用法

1-1、document.body属性：返回网页的<body>属性

1-2、document.images属性：返回文档中所有图像的一个节点列表

1-3、document.links属性：返回所有具有href属性的<a>元素和<area>元素的一个节点列表

1-4、document.anchors属性：返回所有具有name属性的<a>元素的一个节点列表

1-5、document.forms属性：返回文档中所有表单的一个节点列表

2、快速查找节点

2-1、getElementById()方法：通过这个方法可以快速锁定id为某个值的节点

2-2、getElementByTagName()方法:通过标签的名称快速查找节点

2-3、getElementByClassName()方法:通过类名来查找到元素

2-4、document.getElementsByName()方法:可以访问到对应name值的元素节点

2-5、document.querySelector()方法：这是html5新增的查找节点的方法，最大的特点在于可以通过css的语法来查找文档中所匹配的第一个元素

2-6、document.querySelectorAll()方法：会返回所有符合要求的元素

2-7、HTMLCollection与NodeList：
区别：如果document.getElementByTagName()来获取到的节点集合，返回的为HTMLCollection，这是一个实时集合
而使用新的querySelectorAll()方法获取到的节点集合，返回的为NodeList

3、关系查找节点

3-1、childNodes属性
每个节点都有一个chileNodes属性，该属性会返回一个节点下面所有的子节点

3-2、children属性
children属性只返回一个节点下面的所有子元素节点，所以会忽略所有的文本节点和空白节点

3-3、firstChild和lastChild属性：分别是访问一个节点的第一个子节点以及最后一个节点

3-4、parentNode属性：获取父级节点的属性

3-5、previousSibling和nextSibling属性
previousSiblings属性返回同一父节点下的前一个相邻节点，如果该节点已经是父节点的第一个节点，则返回null

3-6、previousElementSibling 和 nextElementSibling 属性：直接查询某一个节点的上一个或者下一个元素节点

-------------------------------------------------------------------------

删除节点：父节点.removeChild(子节点)

替换节点：父节点.replaceChild(新节点，旧节点)

克隆节点：分为浅克隆和深克隆

节点.cloneNode(布尔值)