js基础知识——DOM基本操作

灰太狼 2023-02-26 11:22 3阅读 0赞

> DOM 是一项 W3C (World Wide Web Consortium) 标准，DOM 定义了访问文档的标准：  
>    “W3C 文档对象模型（DOM）是中立于平台和语言的接口，它允许程序和脚本动态地访问、更新文档的内容、结构和样式。”
> 
> —— w3school

DOM：全称是文档对象模型（Document Object Model），文档（document）是所有DOM 的根节点。

#### 一、节点(node) ####

>   在DOM中，每个部分都是节点：文档本身是文档节点，所有HTML元素是元素节点 ，所有HTML 属性是属性节点，HTML 元素内的文本是文本节点 （包括回车符也是属于文本节点）， 注释是注释节点，元素也可以拥有属性，属性是属性节点。

常见的节点有四种：元素节点、属性节点、文本节点、注释节点。元素属于节点。

##### 1. 创建节点 #####

// 1、创建元素节点
    var elementNode = document.createElement("p"); 
    // 2、创建属性节点
    var attrNode=document.createAttribute("class");
    attrNode.value="arrtClass";
    elementNode.setAttributeNode(attrNode); //将属性添加到元素节点中
    // 3、创建文本节点
    var textNode = document.createTextNode("这是一个文本节点。");
    // 4、创建注释节点
    var commentNode = document.createComment("这是一个属性节点");

##### 2、节点类型 #####

console.log(elementNode.nodeType); //输出1，元素节点
    console.log(attrNode.attrNode); //输出2，属性节点
    console.log(textNode.nodeType); //输出3，文本节点
    console.log(commentNode.nodeType); //输出8，注释节点

#### 二、元素(element) ####

一个HTML标签就是一个元素。

<div class="myClass" id="myId">
    	<p id="pId" name="myName">这是一行文字</p>
    </div>

其中有`div`元素和`p`元素，`div`元素是`p`元素的父节点，`p`元素是`div`元素的子节点。

##### 1、查找元素 #####

###### （1）通过 `id` 查找 HTML 元素，`id`是每个元素的唯一标志，不可重名。如果未找到元素，`myElement`将为`null` ######

var myElement = document.getElementById("pId"); //<p id="pId">这是一行文字</p>
    var my = document.getElementById("my"); //null

###### （2）通过**标签名**查找 HTML 元素，得到的结果为一个 `HTMLCollection` 集合，可以根据索引值找具体的某个元素，没有找到元素就是空集合。 ######

var myElement = document.getElementsByTagName("p"); //集合length为1，[div#myId.myClass, myId: div#myId.myClass]
    var my = document.getElementsByTagName("text"); //[]

###### （3）通过**类名**查找 HTML 元素，得到的结果为`HTMLCollection`集合。 ######

var myElement = document.getElementsByClassName("myClass"); //集合length为1，[div#myId.myClass, myId: div#myId.myClass]
    var my = document.getElementsByClassName("my"); //[]

###### （4）通过`name`属性查找HTML元素，返回一个`NodeList`集合。 ######

var myElement = document.getElementsByName("myName"); //集合length为1，[p#pID]
    var my = document.getElementsByName("my"); //[]

###### （5）通过 **CSS 选择器**查找 HTML 元素，返回一个`NodeList`集合。（IE9及IE9以后版本） ######

var myElement = document.querySelectorAll("div.myClass");//集合length为1，[div#myId.myClass]

###### （6）通过 **HTML对象集合** 查找 HTML 元素，返回一个`HTMLCollection`集合。 ######

`document.all`：提供对文档中所有 HTML 元素的访问。  
`document.anchors`：返回对文档中所有 Anchor 对象的引用。  
`document.applets`：返回对文档中所有 Applet 对象的引用。  
`document.forms`：返回对文档中所有 Form 对象引用。  
`document.images`：返回对文档中所有 Image 对象引用。  
`document.links`：返回对文档中所有 Area 和 Link 对象引用。  
  本例（引用W3School示例）查找 id=“frm1” 的 form 元素，在 forms 集合中，然后显示所有元素值。

var x = document.forms["frm1"];
    var text = "";
     var i;
    for (i = 0; i < x.length; i++) { 
        text += x.elements[i].value + "<br>";
    }
    document.getElementById("demo").innerHTML = text;
    console.log(text);

###### 总结（表格汇总）： ######

<table> 
 <thead> 
  <tr> 
   <th align="left">方法</th> 
   <th align="left">描述</th> 
   <th align="left">返回类型</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td align="left">document.getElementById(“id”)</td> 
   <td align="left">根据id查找元素</td> 
   <td align="left">返回当前元素，若没有返回<code>null</code></td> 
  </tr> 
  <tr> 
   <td align="left">document.getElementsByTagName(“tag”);</td> 
   <td align="left">根据标签名查找元素</td> 
   <td align="left">返回<code>HTMLCollection</code>集合</td> 
  </tr> 
  <tr> 
   <td align="left">document.getElementsByClassName(“class”);</td> 
   <td align="left">根据类名查找元素</td> 
   <td align="left">返回<code>HTMLCollection</code>集合</td> 
  </tr> 
  <tr> 
   <td align="left">document.getElementsByName(“name”);</td> 
   <td align="left">根据name属性查找元素</td> 
   <td align="left">返回<code>NodeList</code>集合</td> 
  </tr> 
  <tr> 
   <td align="left">document.querySelectorAll(“selector”);</td> 
   <td align="left">根据css选择器查找元素（IE9及IE9以后版本）</td> 
   <td align="left">返回<code>NodeList</code>集合</td> 
  </tr> 
  <tr> 
   <td align="left">document.all</td> 
   <td align="left">提供对文档中所有 HTML 元素的访问</td> 
   <td align="left">返回<code>NodeList</code>集合</td> 
  </tr> 
  <tr> 
   <td align="left">document.anchors</td> 
   <td align="left">返回对文档中所有 Anchor 对象的引用</td> 
   <td align="left">返回<code>NodeList</code>集合</td> 
  </tr> 
  <tr> 
   <td align="left">document.applets</td> 
   <td align="left">返回对文档中所有 Applet 对象的引用</td> 
   <td align="left">返回<code>NodeList</code>集合</td> 
  </tr> 
  <tr> 
   <td align="left">document.forms</td> 
   <td align="left">返回对文档中所有 Form 对象引用</td> 
   <td align="left">返回<code>NodeList</code>集合</td> 
  </tr> 
  <tr> 
   <td align="left">document.images</td> 
   <td align="left">返回对文档中所有 Image 对象引用</td> 
   <td align="left">返回<code>NodeList</code>集合</td> 
  </tr> 
  <tr> 
   <td align="left">document.links</td> 
   <td align="left">返回对文档中所有 Area 和 Link 对象引用</td> 
   <td align="left">返回<code>NodeList</code>集合</td> 
  </tr> 
 </tbody> 
</table>

##### 2、元素操作 #####

###### （1）创建元素 `createElement` ######

var elementNode = document.createElement("p");

###### （2）设置/获取 元素之间的内容 `innerHTML` `innerText` ######

//给elementNode设置HTML内容
    elementNode.innerHTML="<text>新添加的p元素中的text元素</text>"; 
    //获取elementNode的HTML内容
    console.log(elementNode.innerHTML);  //<text>新添加的p元素中的text元素</text>
    //获取elementNode的文本内容
    console.log(elementNode.innerText);  //新添加的p元素中的text元素
    //给elementNode设置文本内容
    elementNode.innerText="新添加的p元素"; 
    //获取elementNode的文本内容
    console.log(elementNode.innerText);  //新添加的p元素

###### （3）添加元素 `appendChild` `insertBefore` ######

`m.appendChild(n)` 为m元素在末尾添加n节点  
`m.insertBefore(n,k)` 在m元素的k节点前添加n节点

*  m.appendChild(n)

//创建元素并设置元素内容
    var myElement = document.getElementById("myId");
    var elementNode = document.createElement("p");
    elementNode.innerHTML="新添加的p元素";
    //在myElement内部添加元素
    myElement.appendChild(elementNode);

添加成功后的效果：  
![appendChild][]

*  m.insertBefore(n,k)

添加成功后的效果：  
![insertBefore][]

###### （4）删除元素 `removeChild` `replaceChild` ######

//myElement删除内部的#pId元素
    myElement.removeChild(document.getElementById("pId"));
    //myElement用elementNode替换成内部的#pId元素
    myElement.replaceChild(elementNode,document.getElementById("pId"));

###### （5）克隆元素 `cloneChild` ######

m.cloneChild() 复制m节点，并将复制出来的节点作为返回值  
参数为true时，则将m元素的后代元素也一并复制。否则，仅复制m元素本身。

##### 3、利用元素之间关系查找元素 #####

###### （1）父元素 ######

*  `parentNode`和`parentElement`获取当前元素的父元素，`parentElement`只有IE支持。
 *  `offsetParent`获取所有父节点，包括祖宗节点。

###### （2）子元素 ######

*  直接查找：`document.getElementById("myId").getElementById("pId")`
 *  `childNodes`返回的是子节点的集合，是一个数组的格式，包括换行和空格。
 *  `children`返回的是子元素的集合。
 *  `firstChild`获取第一个子节点，包括换行和空格。
 *  `firstElementChild`获取第一个子元素。
 *  `lastChild`获取最后一个子节点。
 *  `lastElementChild`获取最后一个子元素。

###### （3）兄弟元素 ######

*  `previousSibling`和`previousElementSibling`，获取上一个兄弟节点/元素。
 *  `nextSibling`和`nextElementSibling`，获取下一个兄弟节点/元素。

##### 4、元素节点的尺寸相关属性 #####

<table> 
 <thead> 
  <tr> 
   <th>属性名称</th> 
   <th>解释</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>clientWidth / clientHeight</td> 
   <td>返回元素的 可见宽度 / 高度</td> 
  </tr> 
  <tr> 
   <td>offsetWidth / offsetHeight</td> 
   <td>返回元素的 宽度 / 高度</td> 
  </tr> 
  <tr> 
   <td>offsetLeft / offsetTop</td> 
   <td>返回元素的 水平偏移位置 / 垂直偏移位置</td> 
  </tr> 
  <tr> 
   <td>offsetParent</td> 
   <td>返回元素的偏移容器</td> 
  </tr> 
  <tr> 
   <td>scrollWidth / scrollHeight</td> 
   <td>返回元素的 整体宽度 / 整体高度，没有滚动条等于可视宽高，有滚动条时为整体宽高</td> 
  </tr> 
  <tr> 
   <td>scrollLeft / scrollTop</td> 
   <td>返回元素 左边缘与视图之间的距离 / 上边缘与视图之间的距离，即出现滚动条时横向滚动条滚动的位置 / 垂直滚动条滚动的位置，没有滚动条返回0</td> 
  </tr> 
 </tbody> 
</table>

示例：一个宽高为100px的元素，内边距50px，边框1px，外边距50px。  
![.test元素][.test]

![控制台输出][20201217161946868.png_pic_center]

#### 三、属性(attribute) ####

<p id="pId" name="myName" class="myClass" style="color:#ff6100;">这是一行文字</p>

一个标签可以有很多属性，常见的属性有：`id` `class` `name` `style`等。

###### 1、给元素设置属性 `setAttribute` ######

document.getElementById("pId").setAttribute("class","newClass");
    //<p id="pId" name="myName" class="newClass" style="color:#ff6100;">这是一行文字</p>

###### 2、获取元素属性 `getAttribute` 获取不到返回null ######

document.getElementById("pId").getAttribute("class"); //newClass

###### 3、删除元素属性 `removeAttribute` ######

document.getElementById("pId").removeAttribute("class");
    //<p id="pId" name="myName" style="color:#ff6100;">这是一行文字</p>
    document.getElementById("pId").getAttribute("class"); //null

###### 4、是否含有属性 `hasAttribute` `hasAttributes` ######

//元素是否含有属性
    document.getElementById("pId").hasAttributes(); //true
    //元素是否含有指定的属性
    document.getElementById("pId").hasAttribute("class"); //false

补充:

1.  **HTMLCollection** 和 **NodeList**  
    `HTMLCollection`是元素集合，而`NodeList`是节点集合（即可以包含元素，也可以包含文本节点）。`querySelectorAll` 返回的虽然是 `NodeList` ，但是实际上是元素集合，并且是静态的，其他接口返回的`HTMLCollection`和NodeList都是 **live(动态)** 的。
2.  **Area对象和Link对象**  
    document.links返回值为`<area>`元素和`<a>`元素的列表。
3.  **Applet对象**  
    `<applet>`标签通常用来放`java`小程序。
4.  **Anchor 对象**  
    document.anchors返回值为有name属性的`<a>`元素的列表

[appendChild]: /images/20230209/1e85dde6d4d341c1a9fc1fa4327289f3.png
[insertBefore]: /images/20230209/be90764c95ad48d0b6adc4e7cd3cc95a.png
[.test]: /images/20230209/0053411610fe4be6aeb68e78491fccb5.png
[20201217161946868.png_pic_center]: /images/20230209/2a7c2813d5ab48e5b74fc3c98311b998.png