DOM的API
2018-12-17 本文已影响0人
MDIF
document.createElement(tagName)
创建一个由tagName指定的HTML元素，需要注意这仅仅是创建出来，并没有加到HTML文档中，需要另一个API来加入到文档。
var div = document.createElement('div')//创建一个<div>
document.body.appendChild(div)//将div添加到body中
上面的appendChild可将创建的元素添加到文档的父元素中。
Node.parentNode
返回指定节点在DOM书中的父节点
Node.parentElement
返回指定节点的父元素节点。如果父元素不是element（nodeType !== 1）则返回null。
因为HTML标签的父节点不再是元素，所以返回了null。
parentNode和parentElement的区别
parentNode返回所有类型的节点,
parentElement如果父元素不是element（nodeType !== 1）则返回null。
Node.nodeType
返回指定节点的节点类型，返回的一个整数。
| 常量 | 返回数值 | 描述 |
|---|---|---|
| Node.ELEMENT_NODE | 1 | 元素节点，如<div> |
| Node.TEXT_NODE | 3 | Element或者Attribute中的文字 |
| Node.PROCESSING_INSTRUCTION_NODE | 7 | 用于XML文档的ProcessingInstruction，如<?xml-stylesheet ... ?>声明 |
| Node_COMMENT_NODE | 8 | Comment节点 |
| Node_DOCUMENT_NODE | 9 | Document节点 |
| Node_DOCUMENT_TYPE_NODE | 10 | DocumentType节点，如<!DOCTYPE html> |
| Node_DOCUMENT_FRAGMENT_NODE | 11 | DocumentFragment节点 |
p.nodeType
返回值为1说明p是一个元素。
ParentNode.children
返回一个元素的所有子标签（不包括节点类型为文本（nodeType === 3）的标签）
div.children
div.children
ParentNode.childNodes
返回一个元素的所有子标签（包括节点类型为文本（nodeType === 3）的标签）
div.childNodes
div.childNodes
Node.nextSibling
返回其父节点的childNodes列表中紧跟在其后面的一个节点（它的第一个弟弟节点），如果它是最后一个节点（最小的），返回null。
咦怎么和想象中的不一样，不是应该返回<span>吗？看上一个例子可以知道，div的childNodes列表中p的下一个是text。想获取到span，需要这么写
下一个的下一个就是啦。
