DOM浅谈

重点

1.DOM:Document Object Model文档对象模型

2.树形结构

下图中每个节点都是Node类型
document节点是Document构造函数的一个实例对象，通过document获取document节点
html节点又叫根节点，是Element构造函数的一个实例对象，通过document.documentElement获取html节点

dom.png

node包含Document（html）、Element（元素）和 Text（文本）等共7种节点
- Node.ELEMENT_NODE 1 元素节点
- Node.TEXT_NODE 3 文本节点
- Node.DOCUMENT_NODE 9 document节点

node.png

API相关

Node 的接口

Node.nodeName Node.nodeType Node.textContent(与innerText区别)
- Node.nodeName:大写的HTML元素名 (svg类型为小写)
- Node.noneType:返回Node类型，常见的1/3/9
- Node.textContent:Node类型，返回文本内容（如包含<style>、<script>也一起返回）
  - Node.innerText:只返回纯文本内容
  - Element.innerHTML:element类型，TextNode.innerHTML返回的是undefined
    - 设置（document.body.innerHTML = ""; ）
    - 获取描述元素后代的HTML语法（返回<div id="1">1节点</div>）
属性(childNodes,firstChild,innerText,lastChild,nextSibling,nodeName,nodeType,nodeValue,outerText,ownerDocument,parentElement,parentNode,previousSibling,textContent)

兄弟关系：Node.previousSibling Node.nextSibling

儿子关系：Node.childNodes Node.firstNode Node.lastChild

父关系:Node.parentNode
- child / children / parent
- node
- first / last
- next / previous
- sibling
- type
- value / text / content
- inner / outer
- element
方法appendChild(),cloneNode(),contains(),hasChildNodes(),insertBefore(),isEqualNode(),isSameNode(),removeChild(),replaceChild(),normalize()

Document 接口

属性
1. 用于指向其他节点(快捷获取某些特殊节点)的属性
  - document.documentElement指向 DOM 的 html节点
  - document.activeElement指向获得焦点的那个节点
2. 返回文档特定元素的伪数组集合的属性
  - document.links
  - document.forms
  - document.images
  - document.embeds
  - ......
3. 返回文档信息的属性
  - document.location
  - document.readyState返回的是当前文档的状态
  - ......
方法
1. 获取节点方法
  - 常用接口document.querySelector()和document.querySelectorAll()（querySelectorAll返回伪数组，结果是静态的）
2. 生成节点方法
  - documen.createElement("div")
  - document.createTextNode("hello world")

思考1：elem.children和elem.childNodes的区别？

<div id="box">
    <p class="inner1">xiami</p>
    <p class="inner2">haozi</p>
</div>
<script>
    var box = document.getElementById("box");
    console.log(box.children);//HTMLCollection
    console.log(box.childNodes);//NodeList
</script>

html&node.png

在HTMLCollection下
- p.inner1的textContent是"xiami"
- p.inner2的textContent是"haozi"
在NodeList下
- text的textContent是"↵ "
- p.para的textContent是"xiami"
- text的textContent是"↵ "
- p.attr的textContent是"haozi"
- text的textContent是"↵ "
HTMLCollection与NodeList总结
- HTMLCollection和NodeList的共同点显而易见：
  1. 都是类数组对象，都有length属性
  2. 都有共同的方法：item，可以通过item(index)来访问返回结果中的元素
  3. 都是实时变动的（live），document上的更改会反映到相关对象上（例外：document.querySelectorAll返回的NodeList是静态的）
- HTMLCollection和NodeList的区别是：
  1. NodeList可以包含任何节点类型，HTMLCollection只包含元素节点（elementNode），elementNode就是HTML中的标签
  2. HTMLCollection比NodeList多一项方法：namedItem，可以通过传递id或name属性来获取节点信息

思考2： Element与Node

Node是一个基础类型，document, element, text, comment, DocumentFragment等都继承于Node. 即element, text, comment都是Node的子类，可以将它们视为：elementNode, textNode以及commentNode.平时在DOM中最常用的Element对象，其本质就是elementNode.

最后编辑于：2018.01.15 13:56:54