一，DOM是什么？

1. DOM对象

DOM，全称“Document Object Model（文档对象模型）”，它是由W3C定义的一个标准。

DOM提供了很多方法，我们可以通过这些方法来操作页面中的某一个元素。
DOM操作，可以简单理解成“元素操作”。

2. DOM结构

DOM采用的是“树形结构”，用“树节点”形式来表示页面中的每一个元素。
例如下面的代码：

<!DOCTYPE html> 
<html>
<head>
    <meta charset="utf-8" />
    <title></title>
<body>
    <h1>绿叶学习网</h1>
    <p>绿叶学习网是一个……</p>
    <p>绿叶学习网成立于……</p>
</body>
</html>

对于上面的HTML文档，DOM会将其解析为下面的树形结构

我们在操作元素时，其实就是把这个元素看成一个对象，然后使用这个对象的属性和方法来进行相关操作。

二，节点类型

在JavaScript中，DOM节点共有12中类型，最常见的有3种：

元素节点
属性节点
文本节点

表示元素的叫做“元素节点”，表示属性的叫做“属性节点”，而表示文本的叫做“文本节点”。
节点跟元素是不一样的概念，节点是包括元素的！

对于节点类型，需要特别注意：

属性节点和文本节点看起来像是元素节点的一部分，但实际上，它们是独立的节点，并不属于元素节点；
只有元素节点才可以有子节点，属性节点和文本节点都无法拥有子节点。

三，获取元素

获取元素，准确来说，就是获取“元素节点”（不是属性节点或文本节点）。

在JavaScript中，我们可以通过以下6种方式来获取指定元素：

1. getElementById()

该方法是通过id来选中元素

语法：
document.getElementById("Id名")
例：

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8"/>
    <title></title>
    <script>
      window.onload = function()
      {
        var oDiv = document.getElementById("div1");
        oDiv.style.color = "red";
      }
    </script>
  </head>
  <body>
    <div id="div1">JavaScript</div>
  </body>
</html>

分析：
window.onload = function() {...}
上面表示在整个页面加载完成后执行得代码块！

浏览器是从上到下解析一个页面的，这个例子的JavaScript代码在HTML代码的上面，如果没有window.onload，浏览器解析到document.getElementById(“div1”)就会报错，因为它不知道id为div1的元素究竟是谁！

2. getElementsByTagName()

该方法是通过标签名来选中元素

语法
document.getElementsByTagName("标签名")
该方法获取的是多个元素，即合集（所以该方法中用Elements）。
例：

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8"/>
    <title></title>
    <script>
      window.onload = function () 
      {
        var oUl = document.getElementById("list");
        var oLi = oUl.getElementsByTagName("li");
        oLi[2].style.color = "red"
      }
    </script>
  </head>
  <body>
    <ul id="list">
      <li>HTML</li>
      <li>CSS</li>
      <li>JAVASCRIPT</li>
      <li>JQUERY</li>
      <li>VUE.JS</li>
    </ul>
  </body>
</html>

分析：
getElementsByTagName()该方法获取的是一个数组，如果想要获得某一个元素，则可以使用数组下标的形式获取。
准确的说，该方法获取的是一个“类数组”（也叫伪数组），因为该类数组只能用到两点（两个方法）：length属性和下标形式。

3. getElementsByClassName()

该方法是通过class来选中元素！

语法：
document.getElementsByClassName("类名")
该方法获取的是一个类数组！所以element用复数
例：

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8"/>
    <title></title>
    <script>
      window.onload = function()
      {
        var oLi = document.getElementsByClassName("select");
        oLi[0].style.color = "red";
      }
    </script>
  </head>
  <body>
    <ul id="list">
      <li>HTML</li>
      <li>CSS</li>
      <li class="select">JavaScript</li>
      <li class="select">jQuery</li>
      <li class="select">Vue.js</li>
    </ul>
  </body>
</html>

4. querySelector()和querySelectorAll()

这两个方法可以使用CSS选择器的语法来获取所需要的元素。

语法：
document.querySelector("选择器")
该方法表示选取满足选择条件的第1个元素；
document.querySelectorAll("选择器")
该方法表示选取满足条件的所有元素。
例：

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8"/>
    <title></title>
    <script>
      window.onload = function()
      {
        var oDiv = document.querySelectorAll(".test");    //获取class为test的所有元素
        oDiv[1].style.color = "red";
      }
    </script>
  </head>
  <body>
    <div>JavaScript</div>
    <div class="test">JavaScript</div>
    <div class="test">JavaScript</div>
    <div>JavaScript</div>
    <div class="test">JavaScript</div>
  </body>
</html>

5. getElementsByName()

对于表单元素来说，它有一个一般元素都没有的name属性。如果想要通过name属性来获取表单元素，则可以使用该方法来实现。

语法：
document.getElementsByName("name名称")
该方法只用于表单元素，一般只用于单选按钮和复选框！
例：

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8"/>
    <title></title>
    <script>
      window.onload = function()
      {
        var oInput = document.getElementsByName("status");
        oInput[2].checked = true;
      }
    </script>
  </head>
  <body>
    你的最高学历:
    <label><input type="radio" name="status" value="本科" />本科</label>
    <label><input type="radio" name="status" value="硕士" />硕士</label>
    <label><input type="radio" name="status" value="博士" />博士</label>
  </body>
</html>

6. document.title和document.body

一个页面只有一个title元素和一个body元素，这两个方法用于选取其对应元素。

例：

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8"/>
    <title></title>
    <script>
      window.onload = function()
      {
        document.title = "梦想是什么？";
        document.body.innerHTML = "<strong style='color:red'>梦想就是一种让你感到坚持就是幸福的东西。</strong>";
      }
    </script>
  </head>
  <body></body>
</html>

五，创建元素

在JavaScript中，使用createElement()来创建一个元素节点；也可以使用createTextNode()来创建一个文本节点；

我们可以将创建的元素节点和文本节点“组装”成为我们平常所看到的“有文本内容的元素”。
这种方式又被称为“动态DOM操作”。

语法

var e1 = document.createElement("元素名");   //创建元素节点
var txt = document.createTextNode("文本内容");  //创建文本节点
e1.appendChild(txt);    //把文本节点插入元素节点中
e2.appendChild(e1);     //把组装好的元素插入一寸照的元素中

A.appendChild(B)表示把B插入到A内部中去，也就是使得B成为A的子节点。

例：

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8"/>
    <title></title>
    <script>
      window.onload = function()
      {
        var oInput = document.createElement("input");
        oInput.id = "submit";
        oInput.type = "button";
        oInput.value = "提交";
        document.body.appendChild(oInput);
      }
    </script>
  </head>
  <body></body>
</html>

以上例子创建了一个带有属性的复杂元素：
<input id="submit" type="button" value="提交"/>

六，插入元素

在JavaScript中，有2种插入元素的方法：

1. appendChild()

该方法是把一个新元素插入到父元素的内部子元素的末尾！

语法：
A.appendChild(B);
其中A表示父元素，B表示动态创建好的新元素（即子元素）
例：

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8"/>
    <title></title>
    <script>
      window.onload = function()
      {
        var oBtn = document.getElementById("btn");   //获取id为btn的元素
        oBtn.onclick = function()    //为该元素添加点击事件
        {
          var oUl = document.getElementById("list");    //获取id为list的元素
          var oTxt = document.getElementById("txt");    //获取id为txt的元素
          var textNode = document.createTextNode(oTxt.value);    //创建一个文本节点，内容为oTxt文本框内容
          var oLi = document.createElement("li");    //创建一个li元素
          oLi.appendChild(textNode);    //将文本节点插入至li元素中
          oUl.appendChild(oLi);    //将li元素插入ul元素中去（该li元素显示在所有li元素之后）
        }
      }
    </script>
  </head>
  <body>
    <ul id="list">
      <li>HTML</li>
      <li>CSS</li>
      <li>JavaScript</li>
    </ul>
    <input id="txt" type="text"/><input id="btn" type="button" value="插入">
  </body>
</html>

2. insertBefore()

该方法是将一个新元素插入到父元素的某一个子元素之前！

语法：
A.insertBefore(B,ref);
说明：A表示父元素，B表示子元素，ref表示指定子元素（在该元素前插入子元素）。
例：

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title></title>
    <script>
      window.onload = function()
      {
        var oBtn = document.getElementById("btn");
        oBtn.onclick = function()
        {
          var oUl = document.getElementById("list");
          var oTxt = document.getElementById("txt");
          var textNode = document.createElement(oTxt.value);
          var oLi = document.createElement("li");
          oLi.appendChild(textNode);
          oUl.insertBefore(oLi,oUl.firstElementChild);
        }
      }
    </script>
  </head>
  <body>
    <ul id="list">
      <li>HTML</li>
      <li>CSS</li>
      <li>JavaScript</li>
    </ul>
    <input id="txt" type="text"/> <input id="btn" type="button" value="插入">
  </body>
</html>

七，删除元素

在JavaScript中，使用removeChild()方法来删除父元素下的某个子元素；

语法：
A.removeChild(B);
说明：A表示父元素，B表示父元素内部的某个子元素
例：

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8"/>
    <title></title>
    <script>
      window.onload = function()
      {
        var oBtn = document.getElementById("btn");
        oBtn.onclick = function()
        {
          var oUl = document.getElementById("list");
          oUl.removeChild(oUl.lastElementChild);   //删除ul中最后一个li元素
        }
      }
    </script>
  </head>
  <body>
    <ul id="list">
      <li>HTML</li>
      <li>CSS</li>
      <li>JavaScript</li>
      <li>jQuery</li>
      <li>Vue.js</li>
    </ul>
    <input id="btn" type"button" vaule="删除"/>
  </body>
</html>

八，复制元素

在JavaScript中，可以使用cloneNode()方法来实现复制元素

语法：
obj.cloneNode(bool);
说明：
参数obj表示被复制的元素；参数bool是一个布尔值
例：

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8"/>
    <title></title>
    <script>
      window.onload = function()
      {
        var oBtn = document.getElementById("btn");
        oBtn.onclick = function()
        {
          var oUl = document.getElementById("list");
          document.body.appendChild(oUl.cloneNode(1));   //在body中添加一个子元素，值为oUl的复制
        }
      }
    </script>
  </head>
  <body>
    <ul id="list">
      <li>HTML</li>
      <li>CSS</li>
      <li>JavaScript</li>
    </ul>
    <input id="btn" type="button" value="复制">
  </body>
</html>

九，替换元素

在JavaScript中，可以使用replaceChild()方法来实现替换元素。

语法：
A.replaceChild(new,old);
例：

<!DOCTYPE html>
<html>
  <head>
    <meta charset = "utf-8"/>
    <title></title>
    <script>
      window.onload = function ()
      {
          var oBtn = document.getElementById("btn");
        oBtn.onclick = function()
        {
          //获取body中的第一个元素
          var oFirst = document.querySelector("body *:first-child");
          //获取2个文本框
          var oTag = document.getElementById("tag");
          var oTxt = document.getElementById("txt");
          //根据2个文本框的值来创建一个新节点
          var oNewTag = document.createElement(oTag.value);
          var oNewTxt = document.createElement(oTxt.value);
          oNewTag.appendChild(oNewTxt);
          document.body.replaceChild(oNewTag,oFirst);
        }
      }
    </script>
  </head>
  <body>
    <p>JavaScript</p>
    <hr/>
    输入标签：<input id="tag" type="text" />
    输入内容：<input id="txt" type="text" />
    <input id="btn" type="button" value="替换">
  </body>
</html>

定投专业技术

JavaScript-DOM基础