DOM

Posted 2021-09-24 中二病の软

(一)DOM简介

DOM，全称Document Object Model,文档对象模型。
JS通过DOM来对html文档进行操作，理解了DOM就能随意操作WEB页面。

---

(二)DOM节点类型

	nodeName	nodeType	nodeValue
文档节点	#document	9	null
元素节点	标签名	1	null
属性节点	属性名	2	属性值
文本节点	#text	3	文本内容

---

(三)常用DOM方法

(1)获取元素节点

1、document.getElementById(id)：根据ID获取元素，如果页面中出现多个一样的ID，则返回第一次出现的；
2、document.getElementsByTagName(tagName)：根据元素标签获取，获取到的是一个数组；
3、document.getElementsByClassName(className)：根据元素类名获取，获取到的是一个数组；
4、document.getElementsByName(name)：根据 name 获取元素；
5、namedItem()：通过元素的 name 属性来获取元素；
6、document.anchors()：获取所有带 name 属性的 a 标签；
7、document.forms：获取所有的元素；
8、document.links：获取所有带 href 属性的 a 标签；
9、document.querySelector()：根据css选择器获取dom，有多个，只取第一个；
10、document.querySelectorAll()：返回满足条件的所有元素；

(2)获取元素节点的子节点

1、getElementsByTagName():返回当前节点的指定标签名后代节点；
2、childNodes:表示当前节点的所有子节点，包括文本节点在内的所有节点；
3、firstChild:表示当前节点的第一个子节点；
4、lastChild:表示当前节点的最后一个子节点；

(3)获取父节点和兄弟节点
1、parentNode:表示当前节点的父节点；
2、previousSibling:表示当前节点的前一个兄弟节点；
3、nextSibling:表示当前节点的后一个兄弟节点；