DOM

2020-09-01 本文已影响0人释梦石

节点

节点（Node）：构成 HTML 网页的最基本单元。网页中的每一个部分都可以称为是一个节点，比如：html标签、属性、文本、注释、整个文档等都是一个节点。虽然都是节点，但是实际上他们的具体类型是不同的。常见节点分为四类：

文档节点（文档）：整个 HTML 文档。整个 HTML 文档就是一个文档节点。
元素节点（标签）：HTML标签。
属性节点（属性）：元素的属性。
文本节点（文本）：HTML标签中的文本内容（包括标签之间的空格、换行）。

节点的类型不同，属性和方法也都不尽相同。所有的节点都是Object。

DOM

DOM又称为文档树模型。DOM就是由节点组成的。
解析过程： HTML加载完毕，渲染引擎会在内存中把HTML文档，生成一个DOM树，getElementById是获取内中DOM上的元素节点。然后操作的时候修改的是该元素的属性。

DOM树
DOM可以做什么

找对象（元素节点）
设置元素的属性值
设置元素的样式
动态创建和删除元素
事件的触发响应：事件源、事件、事件的驱动程序

获取元素节点

想要操作元素节点，必须首先要找到该节点。有三种方式可以获取DOM节点：

var div1 = document.getElementById("box1"); //方式一：通过 id 获取 一个 元素节点（为什么是一个呢？因为 id 是唯一的）

var arr1 = document.getElementsByTagName("div"); //方式二：通过 标签名 获取 元素节点数组，所以有s

var arr2 = document.getElementsByClassName("hehe"); //方式三：通过 类名 获取 元素节点数组，所以有s

DOM的节点并不是孤立的，可以通过DOM节点之间的关系来获取

节点关系

获取父节点

节点.parentNode

获取兄弟节点

下一个节点 | 下一个元素节点：

nextSibling：
火狐、谷歌、IE9+版本：都指的是下一个节点（包括标签、空文档和换行节点）。
IE678版本：指下一个元素节点（标签）。
nextElementSibling：
火狐、谷歌、IE9+版本：都指的是下一个元素节点（标签）。
为了获取下一个元素节点，我们可以这样做：在IE678中用nextSibling，在火狐谷歌IE9+以后用nextElementSibling，于是，综合这两个属性，可以这样写

下一个兄弟节点 = 节点.nextElementSibling || 节点.nextSibling

** 前一个节点 | 前一个元素节点：**

previousSibling：
火狐、谷歌、IE9+版本：都指的是前一个节点（包括标签、空文档和换行节点）。
IE678版本：指前一个元素节点（标签）。

previousElementSibling：

火狐、谷歌、IE9+版本：都指的是前一个元素节点（标签）。
为了获取前一个元素节点，我们可以这样做：在IE678中用previousSibling，在火狐谷歌IE9+以后用previousElementSibling，于是，综合这两个属性，可以这样写：

前一个兄弟节点 = 节点.previousElementSibling || 节点.previousSibling

获取其他兄弟节点

节点自己.parentNode.children[index];  //随意得到兄弟节点

获取单个子节点

第一个子节点 | 第一个子元素节点

firstChild：火狐、谷歌、IE9+版本：都指的是第一个子节点（包括标签、空文档和换行节点）。IE678版本：指第一个子元素节点（标签）。
firstElementChild：火狐、谷歌、IE9+版本：都指的是第一个子元素节点（标签）。
为了获取第一个子元素节点，我们可以这样做：在IE678中用firstChild，在火狐谷歌IE9+以后用firstElementChild，于是，综合这两个属性，可以这样写：

第一个子元素节点 = 节点.firstElementChild || 节点.firstChild

最后一个子节点 | 最后一个子元素节点

lastChild
火狐、谷歌、IE9+版本：都指的是最后一个子节点（包括标签、空文档和换行节点）。IE678版本：指最后一个子元素节点（标签）。
lastElementChild
火狐、谷歌、IE9+版本：都指的是最后一个子元素节点（标签）。
为了获取最后一个子元素节点，我们可以这样做：在IE678中用lastChild，在火狐谷歌IE9+以后用lastElementChild，于是，综合这两个属性，可以这样写：

最后一个子元素节点 = 节点.lastElementChild || 节点.lastChild

获取所有的子节点

childNodes：标准属性。返回的是指定元素的子节点的集合（包括元素节点、所有属性、文本节点）。

火狐谷歌等高本版会把换行也看做是子节点。

子节点数组 = 父节点.childNodes;   //获取所有节点。

children：非标准属性。返回的是指定元素的子元素节点的集合
它只返回HTML节点，甚至不返回文本节点。在IE6/7/8中包含注释节点（在IE678中，注释节点不要写在里面）。虽然不是标准的DOM属性，但它和innerHTML方法一样，得到了几乎所有浏览器的支持。

子节点数组 = 父节点.children;   //获取所有节点。

DOM节点操作

创建节点

新的标签(元素节点) = document.createElement("标签名");

插入节点

父节点.appendChild(新的子节点);//父节点的最后插入一个新的子节点。

父节点.insertBefore(新的子节点,作为参考的子节点)/*在参考节点前插入一个新的节点。如果参考节点为null，那么他将在父节点里面的最后插入一个子节点。*/

删除节点

父节点.removeChild(子节点);//用父节点删除子节点。必须要指定是删除哪个子节点。

删除当前节点

node1.parentNode.removeChild(node1);

复制节点

要复制的节点.cloneNode();       //括号里不带参数和带参数false，效果是一样的。
要复制的节点.cloneNode(true);

不带参数/带参数false：只复制节点本身，不复制子节点。
带参数true：既复制节点本身，也复制其所有的子节点。

设置节点属性

获取节点属性

语法如下，

元素节点.属性名;
元素节点[属性名];

<body>
<img src="images/1.jpg" class="image-box" title="图片"  id="a1">

<script type="text/javascript">
    var myNode = document.getElementsByTagName("img")[0];

    console.log(myNode.src);
    console.log(myNode.className);    //注意，是className，不是class
    console.log(myNode.title);

    console.log("------------");

    console.log(myNode["src"]);
    console.log(myNode["className"]); //注意，是className，不是class
    console.log(myNode["title"]);
</script>
</body>

2 getAttribute获取属性值

 console.log(myNode.getAttribute("src"));
    console.log(myNode.getAttribute("class"));   //注意是class，不是className
    console.log(myNode.getAttribute("title"));

设置节点的属性值

myNode.src = "images/2.jpg"   //修改src的属性值
    myNode.className = "image2-box";  //修改class的name

或者，

元素节点.setAttribute("属性名", "新的属性值");

 myNode.setAttribute("src","images/3.jpg");
    myNode.setAttribute("class","image3-box");
    myNode.setAttribute("id","你好");

删除节点的属性

元素节点.removeAttribute(属性名);

  myNode.removeAttribute("class");
    myNode.removeAttribute("id");

方式1: 元素节点.属性和元素节点[属性]：绑定的属性值不会出现在标签上。

方式2 : get/set/removeAttribut：绑定的属性值会出现在标签上。

这两种方式不能交换使用，get值和set值必须使用同一种方法。

nodeType属性

nodeType == 1 表示的是元素节点（标签）。记住：在这里，元素就是标签。
nodeType == 2 表示是属性节点。
nodeType == 3 是文本节点。

文档加载

文档的加载
浏览器在加载一个页面时，是按照自上向下的顺序加载的，读取到一行就运行一行。如果将script标签写到页面的上边，在代码执行时，页面还没有加载，页面没有加载DOM对象也没有加载，会导致无法获取到DOM对象。
onload 事件：
onload 事件会在整个页面加载完成之后才触发。为 window 绑定一个onload事件，该事件对应的响应函数将会在页面加载完成之后执行，这样可以确保我们的代码执行时所有的DOM对象已经加载完毕了。

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <title></title>
    <script type="text/javascript">
      // 【方式一：先加载，后执行】这段 js 代码是写在 <head> 标签里的，所以建议放在 window.onload 里面。
      window.onload = function() {
        // 获取id为btn的按钮
        var btn = document.getElementById("btn");
        // 为按钮绑定点击事件
        btn.onclick = function() {
          alert("hello");
        };
      };
    </script>
  </head>
  <body>
    <button id="btn">点我一下</button>

    <script type="text/javascript">
      // 【方式二：后加载，后执行】这段 js 代码是写在 <body> 标签里的，代码的位置是处在页面的下方。这么做，也可以确保：在页面加载完毕后，再执行 js 代码。

      // 获取id为btn的按钮
      var btn = document.getElementById("btn");
      // 为按钮绑定点击事件
      btn.onclick = function() {
        alert("hello");
      };
    </script>
  </body>
</html>

DOM

节点

DOM