JavaScript节点(node)处理总结

节点(node)

每一个分叉点称之为节点。文档里面的每一个元素(标签)、文本、注释、属性都是节点。

• 元素节点//<>
• 文本节点//字
• 注释节点//注释
• 属性节点//id、class
• 文档节点//document

HTML树模型

节点和节点之间的关系以及每一个节点就构成了整个文档树模型。

获取文本节点不可以直接使用innerText或innerHTML,这样获取的为值,可以使用obj.firstChild()类似这样的方法获取

	节点的类型	节点的值	节点的名字
EN	nodeType	nodeValue	nodeName
元素节点	1	null	大写的标签名
文本节点	3	文本内容	#text
注释节点	8	注释的内容	#comment
属性节点	2	属性值	属性名
文档节点	9	null	#document

• 获取所有子节点div.childNodes

• 获取第一个子节点div.firstChild

• 获取最后一个子节点div.lastChild

• 获取第一个元素子节点div.firstElementChild

• 获取最后一个元素子节点div.lastElementChild

• 获取元素子节点div.children

• 获取下一个兄弟子节点div.nextSibling

• 获取下一个兄弟元素节点div.nextElementSibling

• 获取上一个兄弟子节点div.previousSibling

• 获取上一个兄弟元素节点div.previousElementSibling

• 获取父节点div.parentNode/div.parentElement

但凡涉及到移动都会影响元素原来的位置，如果操作的是已有的元素就会影响原来的位置。

• 父节点.appendChild(要追加到父节点内部最后的的元素);[会影响原来的位置]

• 插入到另一个元素之前span.parentNode.insertBefore(a,span)//将a插到span之前
  父节点.insertBefore(要添加的元素，插入到那个元素之前);

• 移动元素(都会影响当前元素位置)

  • 插入到某一个元素之前
  • 插入到某一个元素内部

• 删除元素(用父节点调用)

  • span.parentNode.removeChild(待移除的元素);

• 替换元素

  • span.parentNode.replaceChild(待操作元素，待替换元素);

• 克隆元素(cloneNode());

  • span.parentNode.cloneNode(boolean);//克隆谁，谁调用，参数若为true,则连同子元素一起复制，但无法克隆方法

• 设置属性节点

    let node = document.creatAttribute(aa);//首先创建属性节点
    node.nodeValue='box';//设置属性值
    //添加到元素节点身上
    元素节点.setAttributeNode(node);

创建节点

    let div = document.creatElement('div');