17-第十七章 DOM文档对象模型

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 正在插入的节点，即 newNode
• parentNode 新插入节点的父节点。
• 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

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);