DOM编程进阶（JS）

冷不防 2024-03-25 10:26 80阅读 0赞

### 一、DOM节点基本介绍 ###

> 网页所有内容都是节点（标签、属性、文本、注释等）。在DOM中，节点使用Node来表示。  
> 所有的节点都可以通过JavaScript进行访问，所有HTML元素（节点）均可被修改，也可以创建删除。  
> **节点至少拥有nodeType（节点类型）、nodeName（节点名称）和nodeValue（节点值）三个基本属性**

### 二、节点层级 ###

#### 1、父级节点 ####

> 利用DOM树可把节点划分不同的关系

`node.parentNode`:可返回最近的一个父节点，如果没有返回null

#### 2、子节点 ####

`parentNode.childNodes(标准)`：返回指定节点的子节点的集合;返回值包括所有的子节点、元素节点、文本节点。  
`parentNodes.children(非标准)`：一个只读属性，只返回所有子元素节点，其他节点不返回；获取所有元素节点，需要其他特殊处理，一般不推荐使用`childNode`，但浏览器都支持。

var ul=document.querySelector('ul');
    for(var i = 0; i < ul.childNodes.lenth; i++) {
        
    		if(ul.childNodes[i].nodeType == 1) {
        
    		//ul.childNodes[i] 是元素节点
    		console.log(ul.childNodes[i]);
    		}
    	}

`parentNode.firstChild`:返回一个子节点，找不到返回null，包含所有的节点。  
`parentNode.lastChild`:返回最后一个子节点，找不到返回null，也包含所有节点  
**以下两个有兼容问题，只支持IE9以上**  
`parentNode.firstElementChild`:返回第一个子节点，找不到返回null。  
`parentNode.lastElementChild`:返回最后一个元素节点，找不到返回null。

#### 3、兄弟节点 ####

**全部节点**  
`node.nextSibling`:返回当前元素的下一个兄弟节点，找不到返回null，包括所有节点。  
`node.previousSibling`:返回当前元素的上一个兄弟节点，找不到返回null，包括所有节点。  
**指定节点**（只支持IE9以上）  
`node.nextElementSibling`:返回当前元素下一个兄弟元素节点，找不到返回null。  
`node.nextpreviousElementSibling`:返回当前元素上一个兄弟节点，找不到返回null。

### 三、节点操作 ###

#### 1、创建节点 ####

`document.createElement()`:方法创建由tagName指定的html元素（动态创建元素点）。

#### 2、添加节点 ####

`node.appendChild()`:方法将一个节点添加到父节点的子节点列表末尾。  
`node.insertBefore(child,指定元素)`:例子：

// 添加节点 node.appendChild(child)  node 父级  child子级
    var ul = document.querySelector('ul');
    ul.appendChild(li);
    //node.insertBefore(child,指定元素);
    var lili = document.createElement('li');
    ul.insertBefore(lili,ul.children[0]);

#### 3、删除节点 ####

`node.removeChild(child)`:方法从DOM中删除一个子节点，返回删除的节点

#### 4、复制节点（克隆） ####

`node.clonenode`:方法返回调用改方法的节点的一个副本。（复制节点）

*  参数为空或null，则只复制节点本身，不复制子节点。例：`node.cloneNode()`
 *  参数为true。则复制节点本身节点本身和里面所有子节点。例：`node.cloneNode(true)`

#### 3、三种创建元素的区别 ####

`document.write`是直接将内容卸载页面的内容流，如果文档流执行完毕，则会导致页面全部重绘。

> innerHTML是将内容写入DOM节点，不会导致页面全部重绘，创建元素效率更高，结构复杂  
> `createElement()`创建多个元素效率第一点，但是结构清晰。

### 四、JavaScript表格对象 ###

> 我们在网页中看到的表格，想对表格进行操作，我们可以通过DOM获取表格中的子节点

#### 1、HTML DOM Table 对象 ####

##### 1）table 对象 #####

> \-table对象代表一个表格，在HTML中出现一个
> 
> 标签就是一个表格
> 
> <table></table>

##### 2）table对象集合 #####

**w3c标准**  
`cells`：返回包含表格中所有单元格的一个数组 w3c：NO  
`rows`:返回包含表格中所有行的一个数组 w3c:Yes

##### 3）table 对象方法 #####

`deleteRow`:从表格删除一行。 w3c:Yes  
`insertRow`:在表格中插入一个新行。 w3c:Yes

#### 2、td/th 对象 ####

##### 1）td th 对象 #####

> td/th 对象代表一个数据单元

##### 2）td/th 对象属性 #####

以下参考：

<table> 
 <thead> 
  <tr> 
   <th align="left">属性</th> 
   <th align="left">描述</th> 
   <th align="left">W3C</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td align="left"><a href="https://www.runoob.com/jsref/prop-tabledata-abbr.html" rel="nofollow">abbr</a></td> 
   <td align="left">设置或返回单元格中内容的缩写版本。</td> 
   <td align="left">Yes</td> 
  </tr> 
  <tr> 
   <td align="left">align</td> 
   <td align="left">已废弃。 设置或返回单元格内部数据的水平排列方式。</td> 
   <td align="left">D</td> 
  </tr> 
  <tr> 
   <td align="left"><a href="https://www.runoob.com/jsref/prop-tabledata-axis.html" rel="nofollow">axis</a></td> 
   <td align="left">设置或返回相关单元格的一个逗号分隔的列表。</td> 
   <td align="left">Yes</td> 
  </tr> 
  <tr> 
   <td align="left">background</td> 
   <td align="left">已废弃。 设置或返回表格的背景图片。</td> 
   <td align="left">D</td> 
  </tr> 
  <tr> 
   <td align="left">bgColor</td> 
   <td align="left">已废弃。 设置或返回表格的背景颜色</td> 
   <td align="left">D</td> 
  </tr> 
  <tr> 
   <td align="left"><a href="https://www.runoob.com/jsref/prop-tabledata-cellindex.html" rel="nofollow">cellIndex</a></td> 
   <td align="left">返回单元格在某行的单元格集合中的位置。</td> 
   <td align="left">Yes</td> 
  </tr> 
  <tr> 
   <td align="left"><a href="https://www.runoob.com/jsref/prop-tabledata-ch.html" rel="nofollow">ch</a></td> 
   <td align="left">设置或返回单元格的对齐字符。</td> 
   <td align="left">Yes</td> 
  </tr> 
  <tr> 
   <td align="left"><a href="https://www.runoob.com/jsref/prop-tabledata-choff.html" rel="nofollow">chOff</a></td> 
   <td align="left">设置或返回单元格的对齐字符的偏移量。</td> 
   <td align="left">Yes</td> 
  </tr> 
  <tr> 
   <td align="left"><a href="https://www.runoob.com/jsref/prop-tabledata-colspan.html" rel="nofollow">colSpan</a></td> 
   <td align="left">单元格横跨的列数。</td> 
   <td align="left">Yes</td> 
  </tr> 
  <tr> 
   <td align="left"><a href="https://www.runoob.com/jsref/prop-tabledata-headers.html" rel="nofollow">headers</a></td> 
   <td align="left">置或返回 header-cell 的 id 值。</td> 
   <td align="left">Yes</td> 
  </tr> 
  <tr> 
   <td align="left">height</td> 
   <td align="left">已废弃。 设置或返回数据单元的高度</td> 
   <td align="left">D</td> 
  </tr> 
  <tr> 
   <td align="left">noWrap</td> 
   <td align="left">已废弃。 nowrap 属性规定表格单元格中的内容不换行。</td> 
   <td align="left">D</td> 
  </tr> 
  <tr> 
   <td align="left"><a href="https://www.runoob.com/jsref/prop-tabledata-rowspan.html" rel="nofollow">rowSpan</a></td> 
   <td align="left">设置或返回单元格可横跨的行数。</td> 
   <td align="left">Yes</td> 
  </tr> 
  <tr> 
   <td align="left"><a href="https://www.runoob.com/jsref/prop-tabledata-valign.html" rel="nofollow">vAlign</a></td> 
   <td align="left">设置或返回表格单元格内数据的垂直排列方式。</td> 
   <td align="left">Yes</td> 
  </tr> 
  <tr> 
   <td align="left">width</td> 
   <td align="left">已废弃。设置或返回单元格的宽度。</td> 
   <td align="left">D</td> 
  </tr> 
 </tbody> 
</table>

#### 3、tr 对象 ####

##### 1）tr 对象 #####

> 对象代表一个数据单元

##### 2）tr 对象集合 #####

`cells`:返回表格行中所有的元素的集合

##### 3）tr 对象属性 #####

以下参考：

<table> 
 <thead> 
  <tr> 
   <th align="left">属性</th> 
   <th align="left">描述</th> 
   <th align="left">W3C</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td align="left">align</td> 
   <td align="left">已废弃。 设置或返回在行中数据的水平排列。</td> 
   <td align="left">D</td> 
  </tr> 
  <tr> 
   <td align="left">bgColor</td> 
   <td align="left">已废弃。 设置或返回表格行的的颜色。</td> 
   <td align="left">D</td> 
  </tr> 
  <tr> 
   <td align="left"><a href="https://www.runoob.com/jsref/prop-tablerow-ch.html" rel="nofollow">ch</a></td> 
   <td align="left">设置或返回在行中单元格的对齐字符。</td> 
   <td align="left">Yes</td> 
  </tr> 
  <tr> 
   <td align="left"><a href="https://www.runoob.com/jsref/prop-tablerow-choff.html" rel="nofollow">chOff</a></td> 
   <td align="left">设置或返回在行中单元格的对齐字符的偏移量。</td> 
   <td align="left">Yes</td> 
  </tr> 
  <tr> 
   <td align="left">height</td> 
   <td align="left">已废弃。设置或返回表格行的高度。使用 <a href="https://www.runoob.com/jsref/prop-style-height.html" rel="nofollow">style.height</a> 取代</td> 
   <td align="left">D</td> 
  </tr> 
  <tr> 
   <td align="left"><a href="https://www.runoob.com/jsref/prop-tablerow-rowindex.html" rel="nofollow">rowIndex</a></td> 
   <td align="left">返回该行在表中的位置。</td> 
   <td align="left">Yes</td> 
  </tr> 
  <tr> 
   <td align="left"><a href="https://www.runoob.com/jsref/prop-tablerow-sectionrowindex.html" rel="nofollow">sectionRowIndex</a></td> 
   <td align="left">R返回在 tBody 、tHead 或 tFoot 中，行的位置。</td> 
   <td align="left">Yes</td> 
  </tr> 
  <tr> 
   <td align="left"><a href="https://www.runoob.com/jsref/prop-tablerow-valign.html" rel="nofollow">vAlign</a></td> 
   <td align="left">设置或返回在行中的数据的垂直排列方式。</td> 
   <td align="left">Yes</td> 
  </tr> 
 </tbody> 
</table>

##### 4）tr 对象方法 #####

[deleteCell()][deleteCell]:删除行中的指定的单元格。  
[insertCell()][insertCell]:在一行中的指定位置插入一个空的元素。

[上一章：DOM编程基础（JS）][DOM_JS]  
[下一章：JS和CSS的交互][JS_CSS]

[deleteCell]: https://www.runoob.com/jsref/met-tablerow-deletecell.html
[insertCell]: https://www.runoob.com/jsref/met-tablerow-insertcell.html
[DOM_JS]: https://blog.csdn.net/weixin_74383330/article/details/129484458
[JS_CSS]: https://blog.csdn.net/weixin_74383330/article/details/129467567