DOM(Document Object Model)文档树对象模型
一、节点属性
1、
childNodes \ children
Ele.childNodes————————–子节点集合
元素.childNodes: 只读 属性 子节点列表集合
标准下： 包含了文本和元素类型的节点，也会包含非法嵌套的子节点
非标准下：只包含元素类型的节点，ie7以下不会包含非法嵌套子节点 （返回元素）
childNodes只包含一级子节点，不包含后辈孙级
ele.children获取第一级子元素，集合是动态的。 没有兼容问题（重点记忆）
nodeType: 只读 属性 当前元素的节点类型 共12种
- 元素节点:
1
- 属性节点: 2
wrap.attributes[0].nodeType
- 文本节点:
3
节点类型 命名常量
| 节点类型 | 命名常量 | 中文 |
|---|---|---|
| 1 | element_node | 元素节点 |
| 2 | attribute_node | 属性节点 |
| 3 | text_node | 文本节点 |
| 4 | cdata_section_node | |
| 5 | entity_reference_node | |
| 6 | entity_node | |
| 7 | processing_instruction_node | |
| 8 | comment_node | 注释节点 |
| 9 | document_node | 文档节点 |
| 10 | document_type_node | 文档类型节点 |
| 11 | document_fragment_node | 文段片段节点 |
| 12 | notation_node | 符号节点 |
nodeName节点名称 (大写)元素节点属性
ele.tagName元素标签名称 (大写)
有关属性节点操作
获取 ：
obj.getAttributeNode()方法获取指定的属性节点。
创建 ：document.createAttribute(name)创建拥有指定名称的属性节点，并返回新的Attr对象。
添加 ：obj.setAttributeNode(attr, value)方法向元素中添加指定的属性节
点。
删除：removeAttribute(attr)方法删除元素中指定的属性节点
1、
firstChild \ firstElementChild第一个子节点
ele.firstChild: 只读 属性
标准下：firstChild会包含文本类型的节点
非标准下：只包含元素节点
ele.firstElementChild: 只读 属性 标准下获取第一个元素类型的子节点
非标准下：无
2、
lastChild \ lastElementChild最后一个子节点兼容性同上
3、
nextSibling下一个兄弟节点/'sɪblɪŋ/兄弟
nextElementSibling下一个兄弟元素节点
兼容性同上
4、
previousSibling上一个兄弟节点/'priːvɪəs/前一个
previousElementSibling上一个兄弟元素节点
兼容性同上
5、
parentNode获取父节点 没有兼容问题 （重点记忆）
6、
offsetParent最近定位父级（重点记忆）
7、
childElementCount子元素节点个数元素类型子节点数量，等同于
children.length
二、创建节点
1、
document.createElement('tagName')创建元素节点
innerHTML+= 添加元素的问题，原本子元素没有了，不是原本的元素了
ele.innerHTML+= 的时候要注意：innerTHML拿到的是一个字符串，绑定事件只能绑定在元素节点上
赋值可能会出现覆盖
2、创建文档片段
document.createDocumentFragment()
3、
document.createTextNode(str)创建文本节点
4、
element.cloneNode()
参数
true克隆元素及后代不会克隆属性及事件，
false克隆本元素
三、元素节点操作
1、
parent.insertBefore(newNode, node)在已有元素前插入插入子元素 ,在指定的子元素前面插入
var insertedNode = parentNode .insertBefore（newNode，eferenceNode）;
insertedNode正在插入的节点，即newNodeparentNode新插入节点的父节点。newNode要插入的节点。referenceNodenewNode插入之前的节点。
如果referenceNode是null，newNode则插入子节点列表的末尾。
2、
parent.appendChild(new)在已有元素后插入 (没有兼容问题)往一个元素里面去添加节点,追加到该对象下的所有子元素的最后面
插入子元素，在指定的子元素前面插入
例子：留言板插入内容
3、
parent.removeChild(节点)删除一个节点删除
DOM元素
4、
parent.replaceChild(newNode, oldNode)替换节点换元素，把旧的节点换成新的节点
ele.innerTHML+= 和ele.appendChild方法区别在于
ele.innerHTML会出现覆盖行为，
而ele.appendChild方法不是覆盖，是追加，不会出现覆盖行为
HTML
<div id="father">
<div class='son'></div>
</div>
CSS
const father = document.getElementById('father');
let p = document.createElement('p'); // 标签
let a = document.createElement('a'); // 标签
p.innerText = '这是P的内容';
a.innerText = '这是A的内容';
p.onclick = function () {
p.style.color = 'yellow'
}
// 创建文档片段
const dom1 = document.createDocumentFragment();
// 往文档片段追加标签
dom1.append(p);
dom1.append(a);
// 往son追加标签，把整个文档片段加进去，实现一次渲染全部
father.firstElementChild.append(dom1);
网友评论