关于js中的一些节点操作

什么是节点

进行节点操作前我们应该知道什么是节点，节点就类似下面这个文档树：

什么是节点操作，学过js的基本都进行过节点操作 如：

function $(min) {
            let jie;
            if (min.indexOf(".") != -1) {
                jie = min.substring(1)
                return document.getElementsByClassName(jie)
            }
            if (min.indexOf("#") != -1) {
                jie = min.substring(1)
                return document.getElementById(jie)
            } else {
                return document.getElementsByTagName(min)
            }
  }
  $("#name")

这是我自己封装的一个简易的选择器，其中document.getElementById(jie)就是一个节点操作，它能获取html文档下面id为“name”的节点。
这是最基本的操作节点。

基本节点及节点属性

document：整个HTML文档，所以一般节点操作都是来document点，
节点一般有三种类型：

• 元素节点
• 属性节点
• 文本节点

创建节点

let ul=document.querySelector("ul")
let li=document.createElement("li")
li.innerText="我好帅"
ul.appendChild(li)

在ul下面增加一个li子节点，appendChild：在其子元素创建，querySelector获取第一个元素，innerText:元素的文本。

查询节点

• parentNode：查询父节点。
• childNodes ：查询子节点。
• children ：查询子元素。
• nextSibling ：下一个同级节点。
• previousSibling：上一个同级节点。
• firstChild：第一个子节点。
• lastChild：最后一个子节点。

<ul>
    <li>1</li>
    <li>2</li>
    <li>3</li>
</ul>

let ul=document.querySelector("ul")
   console.dir(ul.parentNode)
   console.dir(ul.childNodes )
   console.dir(ul.children )
   console.dir(ul.nextSibling )
   console.dir(ul.previousSibling)
   console.dir(ul.firstChild)
   console.dir(ul.lastChild)

元素跟节点： 注意元素跟节点是不同的，元素基本都是标签，而节点不同，如同上面ul.childNodes打印出来的子节点：

下面是打印出来的子元素：

这就是元素跟节点的不同之处。

操作节点的一些方法

1、insertBefore()
在自己的节点下任意位置创建子节点

list.insertBefore(newItem,list.childNodes[0]);

第一个值是需要加入的节点，第二个是需要加入的位置。
2、removeChild()
自己的删除子节点

 ul.removeChild(ul.children[0])

这是删除第一个子节点。
还有一个remove方法，可以删除自己，一般用于邮箱删除邮件。

ul.remove()

3、replaceChild()
替换子节点，讲某个子节点替换掉。

ul.replaceChild(textnode,ul.childNodes[0]);

第一个值是我自己创建的节点用来替换
第二个值是要提花节点的位置
4、appendChild()
创建子节点，详情看上面。

我还有一些节点操作没有写出来，这上面都是一些常用的，如果发现什么错误可私聊我，我会及时修改。