标签：语法 ima 2-2 image ext 匹配 fir pre cti
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(布尔值)
-------------------------------------------------------------------------
4、快速获取节点内容
在DOM中，我们可以通过innerHTML和innerText来获取到节点内部的信息
5、获取和设置元素属性
在DOM中提供了getAttribute()以及setAttribute()这两个方法来获取和设置元素节点的属性,
getAttribute()是获取到元素节点的属性值，而setAttribute()则是设置元素节点的属性值
6、元素的类的相关操作
6-1、添加类：add()
6-2、删除类：remove()
6-3、是否含有某个类：contains()
6-4、切换类：toggle()
标签：语法 ima 2-2 image ext 匹配 fir pre cti
原文地址：https://www.cnblogs.com/x0815/p/13195968.html
