DOM节点
html可以看成一个节点树
节点类型：
- 元素节点
- 属性节点
- 文本节点#text
- 注释节点
- 文档节点#document
<html>
<head>
<title>123</title>
</head>
<body>
<div class="className" id="idName">className</div>
</body>
</html>
属性：
| 属性 | 描述 |
|---|---|
| .parentNode | 获取父节点 |
| .childNodes | 获取子节点 |
| .firstChild | 第一个子节点 |
| .lastChild | 最后一个子节点 |
| .nextSibling | 下一个兄弟节点 |
| .previousSibling | 上一个兄弟节点 |
- Node
| 属性 | 数值 | 描述 |
|---|---|---|
| Node.ELEMENT_NODE | 1 | 对应元素节点Element |
| Node.ATTRIBUTE_NODE | 2 | 对应属性节点Attr |
| Node.TEXT_NODE | 3 | 对应文本节点Text |
| Node.CDATA_SECTION_NODE | 4 | 对应文档中CDATA部（不会由解析器解析的文本） |
| Node.ENTITY_REFERENCE_NODE | 5 | 对应实体引用 |
| Node.ENTITY_NODE | 6 | 对应实体类型Entity |
| Node.PROCESSING_INSTRUCTION_NODE | 7 | 对应处理指令 |
| Node.COMMENT_NODE | 8 | 对应注释节点Comment |
| Node.DOCUMENT_NODE | 9 | 对应文档节点Document |
| Node.DOCUMENT_TYPE_NODE | 10 | 对应文档类型节点DocumentType |
| Node.DOCUMENT_FRAGMENT_NODE | 11 | 对应文档片段节点DocumentFragment |
| Node.NOTATION_NODE | 12 | 对应DTD中声明的符号 |
-
dom对象 element
<div id="nodeDiv">
<div></div>
</div>
<script>
const byId = document.getElementById("nodeDiv");
<script>
| 属性 | 描述 | 示例 |
|---|---|---|
| dom对象.nodeType | 节点是不是元素 | byId.nodeType==1 |
| dom对象.nodeName | 元素的标签名 | var value = byId.nodeName (DIV) |
- 节点关系
| 属性 | 可读 | 描述 | 示例 |
|---|---|---|---|
| element.parentElement | 只读 | 获取父元素 | var parent = node.parentElement |
| dom对象.children | 只读 | 获取所有子元素 | var elements = node.children; |
| dom对象.childElementCount | 只读 | 获取子元素数量 | var count = node.childElementCount; |
| dom对象父.firstElementChild | 只读 | 第一个子元素 | var element = node.firstElementChild; |
| dom对象.lastElementChild | 只读 | 最后一个子元素 | var element = node.lastElementChild; |
| dom对象.nextElementSibling | 只读 | 下一个元素 | var element = node.nextElementSibling; |
| dom对象.previousElementSibling | 只读 | 上一个元素 | var element = node.previousElementSibling; |
- 方法
| 方法 | 描述 |
|---|---|
| document. createElement("标签名") | 创建节点 |
| document. createTextNode("文本") | 创建节点 |
| dom对象.appendChild（被插入节点） | 插入到dom节点 |
| 父元素.insertBefore（被插入节点，在....之前） | ，在....之前插入 |
| 父元素.removeChild（被删除节点） | 删除结点 |
| 父元素.replaceChild（新节点,被修改的节点） | 替换节点 |
| cloneNode(boolean) | 克隆节点，true子元素都克隆.flase父元素 |
操作节点流程：
- 创建节点document.createElement("标签名")
- 操作内容/操作样式/操作属性
- 插入节点/在。。之前插入
- 替换节点/删除节点/克隆节点
