JavaScript-DOM操作

Dom-文档对象模型

-可以操作页面元素的方法

    简单来说就是获取，修改，添加，删除页面元素的方法

    DOM可以把html看做是树形结构，可以对树上的每个节点进行操作

文档：一个网页可以称为文档

节点：网页中所有的内容都是节点

元素：网页中的标签

属性：标签的属性

1、DOM查询

（1）首先要获取元素节点

    元素.getElementsByTagName()

        -通过标签名获取节点

        -该方法返回的是一个数组

     元素.getElementById()

        -通过id获取节点

     元素.getElementsByClassName()

        -通过类名获取

        -不支持ie8以下的浏览器

     元素.document.querySelectorAll()

        -通过css选择器获取

        -会将匹配到的所有元素封装到一个数组中返回，即使只匹配到一个

    通过获取到的元素查询当前元素的指定后代元素

        -元素.childNodes

         -获取当前元素的所有子节点

         -包括空白的文本节点

     -元素.children

         -获取当前元素的所有子元素

      -元素.firstChildren

         -获取当前元素的第一个子节点

      -元素.firstChildren

         -获取当前元素的最后一个子节点

      -元素.parentNode

         -获取当前元素的父元素

      -元素.previousSibling

         -获取当前元素的前一个兄弟节点

      -元素.nextSibling

         -获取当前元素的后一个兄弟节点

      -document.all

         -获取页面中的所有元素，相当于                                document.getElementsByTagName("*");

2、Dom修改

         -doucument.createElement()

            -可以根据标签名创建一个元素节点对象

         -document.createTextNode()

            -可以根据文本内容创建一个文本节点对象

            -父节点.appendChild(子节点)

            -向父节点中添加指定的子节点

         -父节点.insertBefore(新节点，旧节点)；

            -将一个新的节点插入到旧节点前

        -父节点.replaceChild(新节点，旧节点)；

            -将一个新的节点替换旧节点

        -父节点.removeChild(子节点)；

            -删除指定的子节点

            -推荐使用：子节点.parentNode.removeChild(子节点)；