目录

一、获取元素的通常使用方法

         1、利用DOM提供的方法获取元素

2、利用节点的层次关系来获取元素

二、节点的概述

三、节点的类型

        1、获取父级节点：node.parentNode

2、获取子级节点：

方法一：parentNode.childNodes(标准)

方法二：parsentNode.childern(非标准) 

3、获取第一个元素和最后一个元素

4、获取兄弟节点

四、创建和添加节点

1、创建节点

2、添加节点：

3、删除节点

4、复制节点（克隆节点）

---

一、获取元素的通常使用方法

 1、利用DOM提供的方法获取元素

        document.getElementByld()

        document.getElementsBtTagName()

        document.querySeletor等

        逻辑性不强且繁琐

2、利用节点的层次关系来获取元素

    利用父子兄弟节点关系获取元素

    逻辑性强，但是兼容性稍差

二、节点的概述

        网页中的所有内容都是节点(标签、属性、文本、注释等)，在DOM中，节点使用node来表示

HTML DOM 树种的所有节点均可通过JavaScript进行访问，所有HTML元素（节点）均可被修改

 也可以创建和删除。 一般情况下，节点至少拥有nodeType(节点类型)、nodeName(节点名称)和nodeVaule(节点值)这三个基本属性

        元素节点    nodeTpye 为 1

        属性节点    nodeTpye 为 2

        文本节点    nodeType 为 3 (文本节点包含文字、空格、换行等)

        在我们实际开发中，节点操作主要操作的是元素节点

三、节点的类型

利用DOM 树可以把节点划分为不同的层级关系，常见的是父子兄层级关系

        1、获取父级节点：node.parentNode

//获取erweima的父元素
var erweima = document.querySelector('.erweima')
console.log(erweima.parentNode);

注意：

得到是离元素最近的父级节点(类似于它的亲爸爸)   如果找不到父节点就返回为null

2、获取子级节点：

方法一：parentNode.childNodes(标准)

返回包含指定节点的子节点的集合，该集合为即时更新的集合,childNodes 所有子节点 包含 元素节点 文本节点等等

 如果只想要获得里面的元素节点，则需要专门处理。所以我们一般不提倡使用childNodes

代码展示：

 var ul = document.querySelector('ul')
        for(var i = 0; i < ul.childNodes.length; i++){
            if(ul.childNodes[i].nodeType == 1){
                // ul.childNodes[i]是元素节点
                console.log(ul.childNodes[i]);
            }
        }

结果展示：

方法二：parsentNode.childern(非标准) 

获取所有的子元素节点 实际开发常用。

parsentNode.childern是一个只读属性，返回所以的子元素节点。它只返回子元素节点，其余节点不返回(这个是我们重点掌握的)。虽然children是一个非标准，但是得到了各个浏览器的支持，因此我们可以放心使用。

3、获取第一个元素和最后一个元素

  方法一：

    parentNode.firstChild

        返回parentNode第一个子节点，找不到则返回null。同样，也是包含所有的节点

    parentNode.lastChild

        返回parentNode最后一个节点，找不到则返回null。同样，也是包含所有的节点

方法二：

parentNode.firstElementChild        返回parentNode第一个子节点

 parentNode.lastElementChild        返回parentNode最后一个节点

这两个方法友兼容性问题，IE9以上才支持

方法三：

parentNode.chilren[0]        返回parentNode的第一个元素节点

parentNode.children[parentNode.children.length-1]      返回parentNode的最后一个元素节点

这是我们在实际开发中所用的写法，它既没有兼容性问题又返回第一个子元素或者最后一个元素

4、获取兄弟节点

  方法一：

node.nextSibling

返回当前元素的下一个兄弟节点，找不到则返回null。同样，也是包含所有的节点

node.previousSibling

返回当前元素的上一个兄弟节点，找不到则返回null。同样，也是包含所有的节点

方法二：

node.nextElementSibling        返回当前元素的下一个兄弟元素节点，找不到则返回null。

node.previousElementSibling        返回当前元素的上一个兄弟元素节点，找不到则返回null。  

 注意：这两个方法友兼容性问题，IE9以上才支持

如何解决兼容性问题：封装一个兼容性的函数

代码展示：

获取element的下一个兄弟元素节点的函数

      //获取element的下一个兄弟元素节点的函数
        function getNextElementSibliing(element) {
            var el = element;
            while (el = el.nextSibling) {
                if(el.nodeType === 1) {
                    return el;
                }
            }
            return null;
        }

获取element的上一个兄弟元素节点的函数

      //获取element的上一个兄弟元素节点的函数
        function getpreviousElementSibling(element){
            var el = element;
            while(el=el.previousSibling){
                if(el.nodeType===1){
                    return el;
                }
            }
            return null;
        }
    

四、创建和添加节点

1、创建节点

document.createElement('tagName')         创建tagName为元素节点的名字

document.createElement()方法创建由tagName 指定的HTML元素。因为这次元素原先不存在，是根据我们的需求动态生成的，所以我们也称为动态创建元素节点。

2、添加节点：

我们想要页面添加一个元素：

（1）创建元素

（2）添加元素

 node.appendChild(child)        将一个节点添加到指定父节点node的子节点列表的末尾

node 父级 child 子级    后面追加元素 类似于数组中的push

//在ul里面添加一个li元素
var ul =  document.querySelector('ul')
        ul.appendChild(li);

（3）添加指定节点 

node.insertBefore(child,指定元素)     将一个节点添加到指定父节点node中的指定元素的前面

 var lili = document.createElement('li')
        ul.insertBefore(lili,ul.children[0])

3、删除节点

node.removeChild(child)
在父节点node中删除子节点child，并返回删除的节点
如：ul.removeChild(ul.children[0]);删除ul中的第一个元素节点
注意：removeChild只能删除指定的一个节点

4、复制节点（克隆节点）

node.cloneNode()

 node.cloneNode()方法返回调用函数的节点的第一个副本。也称为克隆节点/拷贝节点

  注意：

1、如果括号参数为空或者false，则是浅拷贝，即只克隆赋值节点本身，不克隆里面的子节点

 2、 node.cloneNode(false) 括号参数为空或者false，则是浅拷贝，即只复制标签，不复制里面的内容

 3、 node.cloneNode(true) 括号为true，则是深拷贝，即复制标签，赋值里面的内容

                                                                                                    

                                                                                                    —— 听闻少年二字，应与平庸相斥