JavaScript中节点获取，节点的属性，如何操作节点

任何 HTML 或 XML 文档都可以用 DOM 表示为一个由节点构成的层级结构。    

一般来说在HTML中文档的节点分为三种：

1、元素节点

         通过querySelector获取的节点就是元素节点

2、属性节点

            通过getAttribute获取到的节点就是属性节点

3、文本节点

            我们通过innerText获取到的就是文本节点

    

节点属性：

        nodeType节点类型

        nodeName节点名称

        nodeValue节点值

 

        在元素与元素之间就算是没有内容也会存在空的文本节点，如果我们给他添加上内容，那么这个文本节点就会显露出来

获取节点：

        一个HTML下的节点可以看作一个大家庭

        节点的家族关系：父子、兄弟

        每一个节点都有childNodes属性，其中包含了一个NodeList的数组对象实例

        let firstChild = someNode.childNodes[0];

        let secondChild = someNode.childNodes.item(1);

        let count = someNode.childNodes.length;

        当然，使用 ES6 的 Array.from() 静态方法，可以替换这种笨拙的方式：

        let arrayOfNodes = Array.from (someNode.childNodes);

        获取父节点：parentNode：返回父节点

        获取父元素节点：parentElement：返回父元素节点

        因为父元素只有一个所以这两个获取的东西是一样的

        获取上一个节点： previousSibling

        获取下一个节点： nextSibling

        获取上一个元素节点：previousElementSibling

        获取下一个元素节点：nextElementSibling

        获取 子节点：childNodes：返回元素的子节点，包括元素节点、文本节点

        获取子 元素节点：children：返回子元素节点

        获取第一个 子节点：firstChild：返回第一个子节点，包括文本节点或者元素节点

        获取第一个 子节点：lastChild：返回最后一个子节点，包括文本节点或者元素节点

        获取第一个 元素节点：firstElementChild

        获取最后一个 元素节点：lastElementChild

操作DOM节点：

就是对节点进行增删改

创建节点：

                创建元素节点语法：var grtdiv = document.creatElement('div')

在文档中插入节点：

                父元素.append Child（要插入的元素）：将某元素插入到另一个元素的末尾。

                 语法： let returnedNode = someNode.appendChild(newNode);

                父元素. insertBefore(要插入的元素，父元素的某一个子元素)：将元素插入到某一个元素

                之前，值得注意的是这个方法要接受两个参数，一个是要插入的元素，而另一个是用来

                作为插入点的参照元素

删除节点：

                使用remove Child（）方法

                语法：父节点.remove Child（要移除的节点）        使用这个方法会接受一个参数也就是移除的节点，这个方法会返回被移除的节点

替换节点：

                父元素.replaceChild(替换节点，被替换的节点) 方法接收两个参数：要插入的节点和要替换的节点。要替换的节点会被返回并从文档树中完全移除，要插入的节点会取而代之

                语法： let returnedNode = someNode.replaceChild(newNode, someNode.firstChild);

克隆节点：

        cloneNode（）

        会返回与调用它的节点一模一样的节点。cloneNode()方法接收一个布尔值参数，表示是否深复制，在传入 true 参数时，会进行深复制， 即复制节点及其整个子 DOM 树。如果传入 false ，则只会复制调用该方法的节点。

        复制返回的节点属于文档所有，但尚未指定父节点，所以可称为孤儿节点（orphan）。 可以通过 appendChild() 、insertBefore()或 replaceChild()方法把孤儿节点添加到文档中。