JavaScript————Dom文档对象模板

1 什么是DOM？

以下是菜鸟网站上的

DOM是W3C的标准，DOM定义访问了HTML和XML文档的标准。

W3C 文档对象模型 （DOM） 是中立于平台和语言的接口，它允许程序和脚本动态地访问和更新文档的内容、结构和样式。

1.1 定义文档的结构

DOM规范，将网页中的HTML文档抽象为内存中的文档对象（DOM TREE）。属中的每一个节点对象对应HTML 文档中的一个元素。

1.2 如何访问文档？

通过访问节点对象。

Document接口作为文档入口

Document 接口代表整个文档。JavaScript 中的对象 document 是对Document 接口的实现。

方法一：直接访问文档中的节点对象

方法	描述
document.getElementsById	通过id属性获取节点对象
document.getElementByName	通过id属性获取节点对象
document/element.getElementsByTagName	通过 tag 属性获取节点对象
document/element.getElementsByClassName	通过class属性获取节点对象
document/element.querySelector	通过 css 选择器 获取首个节点对象
document/element.querySelectorAll	通过 css 选择器 获取所有节点对象

通过节点关系访问一个节点周围的节点对象

父节点（parentNode）：获取所属父节点对象。
（ownerDocument）：获取节点所属文档节点（根节点）对象。

兄弟节点（sibling nodes）
nextSibling：获取前一个兄弟节点的对象
nextElementSlibling：获取前一个兄弟元素节点对象

previousSibling：获取后一个兄弟节点对象。
previousElementSibling：获取所有子元素节点对象。

子节点（child nodes）：
childNodes：获取所有子节点对象
children：获取所有子元素节点对象
hasChildNodes： 判断是否包含子节点对象
childElementCount：获取子元素节点对象数量
firstChild：获取第一个字节点对象
firstElementChild：获取第一个子元素节点对象
lastChild：获取最后一个字节点对象
lastElementChild：获取最后一个子元素节点对象