JavaScript中的DOM

1.什么是DOM？

 1.DOM全称：Document Object Model ，文档对象模型。
 2.DOM为我们提供了用JavaScript来操作：html、xml文档的应用编程接口。
 3.DOM使得html文档形成一棵DOM树，类似于一颗家族树一样，是一层接一层的，子子孙孙。
 4.有了DOM，就是相当于拿到了当前html文档的"家谱"，参考这个"家谱"，我们就可以去操作它的每一个节点。

2.什么是节点？

 DOM 是这样规定的：
 1.整个文档是一个文档节点，并且节点之间具有层次关系。
 2.每个 HTML 标签是一个元素节点。
 3.包含在 HTML 元素中的文本是文本节点。
 4.每一个 HTML 属性是一个属性节点。
 5.HTML 文档中的每个元素、属性、文本等都代表着树中的一个节点。

3.关于节点（Node）和元素（Element）的区别

 1.首先我们观察以下代码：

<div id="div0">
    <!--我是一个图片，还没给出具体路径-->
    <img src="" alt="">
    <ul>
        <li>1</li>
        <li>2</li>
        <li>3</li>
    </ul>
</div>

<script>
    var div0 = document.getElementById("div0");
    //获取div0下的所有子节点
    console.log(div0.childNodes);// NodeList(7) [text, comment, text, img, text, ul, text]
    //获取div0下的所有子元素
    console.log(div0.children);// HTMLCollection(2) [img, ul]
   // HTMLCollection   是 HTML标签列表
   // NodeList    是 节点列表
</script>

 2.观察发现：

• 当打印div0下所有子元素（Element）时，获取到的就是div0下的两个标签元素<img>和<ul>，干干净净没有任何多余的成分。
• 当打印div0下所有的子节点（Node）时，除了正常的标签，还有三个text，一个comment内容，这三个text内容其实就是<div>、<img>、<ul>标签后面的回车。也就是说把文字（回车）节点、注释节点也都获取到了。

 3.所以不难发现：

• 元素是一个小范围的定义，必须是含有完整信息的结点才是一个元素，例如<div>...</div>或<ul>...</ul>等。
• 一个结点不一定是一个元素，而一个元素一定是一个结点。
• 节点的覆盖范围很大，包括：注释、回车符等等。

4.节点属性

 1.每个节点都拥有包含着关于节点某些信息的属性。这些属性是：
 nodeName（节点名称）
  元素节点的 nodeName 是标签名称
  文本节点的 nodeName 永远是 #text
  注释节点的 nodeName 永远是 #comment
 nodeValue（节点值）
  文本节点nodeValue 属性包含文本。
  元素节点nodeValue不可用
  注释节点nodeValue包括注释内容
nodeType（节点类型）
  具体类型对应请参考这里。

 2.例如输出一个元素的三个属性：

<div id="div0">
</div>

<script>
    var div0 = document.getElementById("div0");
    console.log(div0.nodeName,div0.nodeType,div0.nodeValue) // DIV 1 null
</script>

5.获取DOM元素

    document.getElementById(); // 根据id获取一个元素
    document.getElementsByTagName();// 根据标签名称获取HTML标签列表
    document.getElementsByName();// 根据元素（标签）Name属性获取元素列表
    document.getElementsByClassName();// 根据className获取HTML标签列表
    document.querySelector();// 类CSS选择器返回一个匹配的元素，注意是一个，如有多个，仅返回第一个。
    document.querySelectorAll();// 类CSS选择器返回所有匹配的元素。

6.节点遍历

 见如下代码：

<div>
    <div>a</div>
    <div>b</div>
    <div>c</div>
    <div>d</div>
    <ul>
        <li>1</li>
        <li>2</li>
        <li>3</li>
        <li>4</li>
    </ul>
    abc
    <!--<div>abcdef</div>-->
</div>
<button id="bn">按钮</button>
<script>
    /*
     *  children  获取标签下所有HTML元素列表
     *  childNodes  获取标签下所有的节点，节点包括元素，文本，注释，文本（主要看到的是回车），内容注释就是在网页中增加的注释
     *  parentElement  父元素
     *  parentNode   父节点
     *  firstElementChild 第一个子元素
     *  firstChild   第一个子节点
     *
     *  lastElementChild  最后一个子元素
     *  lastChild  最后一个子节点
     *
     *  nextElementSibling 下一个兄弟元素
     *  nextSibling   下一个兄弟节点
     *
     *  previousElementSibling 上一个兄弟元素
     *  previousSibling 上一个兄弟节点
     *
     *
     * */
    var div=document.getElementsByTagName("div")[0];
    console.log(div.children);// HTMLCollection(5) [div, div, div, div, ul]
    console.log(div.childNodes);// NodeList(13) [text, div, text, div, text, div, text, div, text, ul, text, comment, text]
    console.log(div.childNodes[11]); // <!--<div>我是注释掉的内容</div>-->
    //可以如下编写修改注释内容
    div.childNodes[11].textContent="注释内容"; // <!--注释内容-->
    console.log(div.parentElement);//父元素 body
    console.log(div.parentNode);//父节点 body
    console.log(div.firstElementChild);
    console.log(div.firstChild);// #text
    console.log(div.lastElementChild);// 整个<ul>...</ul>
    console.log(div.lastChild);// #text
    console.log(div.nextElementSibling);// <button id="bn">按钮</button>
    console.log(div.nextSibling);// #text
    console.log(div.previousElementSibling);// null
    console.log(div.previousSibling);// #text

7.创建节点

<script>
    /*
     *  document.createElement("标签名") 根据标签名创建标签
     *  父元素.appendChild(DOM元素)  在父元素尾部添加Dom元素
     *
     * */

     var div=document.createElement("div");// 创建一个div元素
     document.body.appendChild(div);// 向body中加入div元素
     div.textContent="文本内容";// textContent用来设置文本内容
     div.style.width="100px";// .style可直接设置样式
     div.style.height="100px";
     div.style.backgroundColor="#FF0000";

     var img = document.createElement("img");// 创建一个img元素
     img.src = "img/a.png";// 设置路径
     div.appendChild(img);// 把img元素添加到div元素内，img成为了div的子元素
/*
最后输出如下：
<div style="width: 100px; height: 100px; background-color: rgb(255, 0, 0);">文本内容<img src="img/a.png"></div>
*/
</script>

8.DOM的增删改查

<script>
        /*
        * document.createTextNode("欢迎"); 根据文本内容创建节点
        *  可以将节点插入到元素中
        *  父元素.insertBefore(要插入的元素，插入在那个元素前面)
        *  父元素.appendChild(向父元素末尾插入一个节点node)
        *  父元素.replaceChild(新的元素，要替换的元素)
        *  元素.remove() 删除当前元素节点
        *  父元素.removeChild(子元素) 父元素删除子元素
        *  元素.cloneNode(bool)  赋值（克隆）元素，返回新的元素
        *   bool  true   深复制     可以将元素中的子元素和内容都进行复制
        *   bool  false  浅复制    只能将元素和元素的属性进行复制
        *
        * */
        var div=document.createElement("div");// 创建一个div
        var span=document.createElement("span");// 创建一个span
        span.textContent="你好";//设置span文本元素
        div.className="divs";//设置div的class名称
        div.appendChild(span);//给div 末尾插入一个span
        var txt=document.createTextNode("欢迎");// 创建一个文本元素
        div.appendChild(txt);// 给div末尾追加一个文本元素
        document.body.appendChild(div);// 给div加在body元素末尾
</script>