• 节点：html文件中，所有的内容都是节点

• 标签对象：也是节点的一种，叫标签节点

• DOM操作，实际上就是在操作页面中的节点

1 // 通过标签语法获取节点
2 const oDiv = document.querySelector(‘div‘);
3 const oSpan = document.querySelector(‘span‘);

一、节点语法获取节点

父级标签.childNodes

• 获取父级标签中所有的子级节点内容

• 执行结果是一个伪数组，不能forEach

1 const all = oDiv.childNodes;

父级标签.children

• 获取父级标签中所有的标签节点

• 执行结果是一个伪数组，不能forEach

1 const allEle = oDiv.children;

当前标签对象.attributes

• 获取当前标签属性节点

• 没有属性，执行结果是一个空的伪数组

父级标签.firstChild

• 获取父级标签中第一个节点,所有节点都算

1 const f = oDiv.firstChild;

父级标签.lastChild

• 获取父级标签中最后一个节点,所有节点都算

1 const l = oDiv.lastChild;

父级标签.firstElementChild

• 获取父级标签中第一个标签/元素节点

1 const fe = oDiv.firstElementChild;

父级标签.lastElementChild

• 获取父级标签中最后一个元素/标签节点

1 const le = oDiv.lastElementChild;

当前标签对象.previousSibling

• 获取当前标签上一个兄弟节点

1 const prev = oSpan.previousSibling;

当前标签对象.nextSibling

• 获取当前标签下一个兄弟节点

1 const next = oSpan.nextSibling;

当前标签对象.previousElementSibling

• 获取当前标签上一个元素/标签兄弟节点

1 const prevEle = oSpan.previousElementSibling;

当前标签对象.nextElementSibling

• 获取当前标签下一个元素/标签兄弟节点

1 const nextEle = oSpan.nextElementSibling;

当前标签对象.parentNode

• 获取当前标签父级节点

1 const parent = oSpan.parentNode;

二、节点的属性

节点的类型

• 标签对象/节点对象.nodeType 属性中存储

  • 元素节点，节点类型值 是 1

  • 属性节点，节点类型值 是 2

  • 文本节点，节点类型值 是 3

  • 注释节点，节点类型值 是 8

节点的名称

• 标签对象/节点对象.nodeName 属性中存储

  • 元素节点，节点类型名称 是 标签名称

  • 属性节点，节点类型名称 是 属性名

  • 文本节点，节点类型名称 是 #text

  • 注释节点，节点类型名称 是 #comment

节点的内容

• 标签对象/节点对象.nodeValue 属性中存储

  • 元素节点，节点内容 是 null

  • 属性节点，节点内容 是 属性的属性值

  • 文本节点，节点内容 是 文本内容

  • 注释节点，节点内容 是 注释内容

三、节点的操作

1、创建节点

创建元素节点

1 const oDiv = document.createElement(‘div‘);

创建文本节点

1 const text = document.createTextNode(‘我是div标签的内容‘);

2、写入节点

在父级元素的末位，添加节点

1 const oH1 = document.querySelector(‘h1‘);
2 oH1.appendChild(oDiv);

在父级元素中，某个指定对象之前，添加节点

1 oH1.insertBefore(oDiv, oA);

3、删除节点

删除父级节点中的子级节点

• 父级节点.removeChild(你要删除的子级节点)

1 oH1.removeChild(oDiv);

4、节点的克隆

• 标签对象.cloneNode()：只克隆标签本身

• 标签对象.cloneNode(true)：克隆标签的所有内容

十四、JavaScript节点

原文：https://www.cnblogs.com/tricker65535/p/15026259.html