JS基础系列(六): DOM API

什么是DOM

--
DOM(Document Object Model), 文档对象模型

html是树形结构

html

DOM就是把这种树形结构结构的Document文档, 转化成Object对象的方法

DOM通常会把Document对象转化成下面四种类型的对象, 然后调用相应的API操作DOM对象, 再将结果反映在页面上

DOM对象

其中Dcoument, Element, text很重要, 其他的都不重要

Node的属性

---

节点和元素

节点
会把text也解析出来, 这就意味着当获取节点的时候, 会把回车解析成text节点

元素
不会解析text, 所以回车会被忽略掉

docment.body.childNodes 和 docment.body.children

docment.body.childNodes获取body元素的子节点, 回车会被解析为text节点
docment.body.children获取body元素的子标签, 这里面不会获取回车

除了这俩, 我们靠学过的单词, 还能猜出来好多
dcoument.body.firstChild 获取第一个子节点
dcoument.body.lastChild 获取最后一个子节点
dcoument.body.firstElementChild 获取第一个子元素
dcoument.body.lastElementChild 获取第一个子元素
dcoument.body.previousSibling 获取前一个兄弟节点
dcoument.body.nextSibling 获取后一个兄弟节点
dcoument.body.previousElementSibling 获取前一个兄弟元素
dcoument.body.nextElementSibling 获取前一个兄弟元素
document.body.nodeName 获取节点名称, 获取到的是大写的名称， 除了svg, 这个是小写的
dcoument.body.firstChild.nodeType获取第一个节点的类型, 返回一个数字, 每个数字对应一种类型

常量	值	描述
Node.ELEMENT_NODE	1	一个 元素 节点，例如 和 。
Node.TEXT_NODE	3	Element 或者 Attr 中实际的 文字
Node.PROCESSING_INSTRUCTION_NODE	7	一个用于XML文档的 ProcessingInstruction ，例如 声明。
Node.COMMENT_NODE	8	一个 Comment 节点。
Node.DOCUMENT_NODE	9	一个 Document 节点。
Node.DOCUMENT_TYPE_NODE	10	描述文档类型的 DocumentType 节点。例如 就是用于 HTML5 的。
Node.DOCUMENT_FRAGMENT_NODE	11	一个 DocumentFragment 节点

textContent 获取元素内所有元素的内容

• textContent 会获取所有元素的内容，包括