JavaScript DOM 知识点整理

约定不等于承诺〃 2021-10-23 13:54 343阅读 0赞

### 目录 ###

*  什么是DOM？
 *   *  节点对象（Node）三大属性
     *   *  nodetype 节点的类型
         *  nodeName 节点名
         *  nodeValue 节点值
     *  节点之间的关系
     *   *  父子关系
         *  兄弟关系
     *  节点树子集的关系
     *   *  父子关系
         *  兄弟关系
 *  查找DOM
 *   *  name属性名查找
     *  TagName元素查找
     *  ID属性名查找
     *  Class属性名查找
     *  选择器查找
 *  操作DOM
 *   *  核心DOM
     *   *  获取属性值
         *  修改属性值
         *  判断属性值是否存在
         *  移除属性
     *  HTML DOM
     *   *  获取属性值
         *  修改属性值
         *  判断属性值是否存在
         *  移除属性

# 什么是DOM？ #

DOM 能够操作结构化文档（HTML XML）。  
在网页中，HTML的结构化文档都是以树形结构储存的，每一个元素都是一个节点对象（Node），根节点是document对象。

## 节点对象（Node）三大属性 ##

### nodetype 节点的类型 ###

<table> 
 <thead> 
  <tr> 
   <th>属性</th> 
   <th>值</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>document</td> 
   <td>9</td> 
  </tr> 
  <tr> 
   <td>element</td> 
   <td>1</td> 
  </tr> 
  <tr> 
   <td>attribute</td> 
   <td>2</td> 
  </tr> 
  <tr> 
   <td>text</td> 
   <td>3</td> 
  </tr> 
 </tbody> 
</table>

### nodeName 节点名 ###

<table> 
 <thead> 
  <tr> 
   <th>属性</th> 
   <th>描述</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>document</td> 
   <td>#document</td> 
  </tr> 
  <tr> 
   <td>element</td> 
   <td>全大写的标签名</td> 
  </tr> 
  <tr> 
   <td>attribute</td> 
   <td>属性名</td> 
  </tr> 
  <tr> 
   <td>文本节点</td> 
   <td>#text</td> 
  </tr> 
 </tbody> 
</table>

### nodeValue 节点值 ###

<table> 
 <thead> 
  <tr> 
   <th>属性</th> 
   <th>描述</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>document</td> 
   <td>null</td> 
  </tr> 
  <tr> 
   <td>element</td> 
   <td>null</td> 
  </tr> 
  <tr> 
   <td>attribute</td> 
   <td>属性值</td> 
  </tr> 
  <tr> 
   <td>text</td> 
   <td>文本的内容</td> 
  </tr> 
 </tbody> 
</table>

## 节点之间的关系 ##

### 父子关系 ###

<table> 
 <thead> 
  <tr> 
   <th>属性</th> 
   <th>描述</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>node.parentNode</td> 
   <td>获得node的父节点</td> 
  </tr> 
  <tr> 
   <td>node.childNodes</td> 
   <td>获得node的所有子节点</td> 
  </tr> 
  <tr> 
   <td>node.lastChild</td> 
   <td>获得node的最后一个子节点</td> 
  </tr> 
  <tr> 
   <td>node.firstChild</td> 
   <td>获得node的第一个子节点</td> 
  </tr> 
 </tbody> 
</table>

### 兄弟关系 ###

<table> 
 <thead> 
  <tr> 
   <th>属性</th> 
   <th>描述</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>node.previousSibling</td> 
   <td>返回当前节点的前一个兄弟节点</td> 
  </tr> 
  <tr> 
   <td>node.nextSibling</td> 
   <td>返回当前节点的下一个兄弟节点</td> 
  </tr> 
 </tbody> 
</table>

## 节点树子集的关系 ##

### 父子关系 ###

<table> 
 <thead> 
  <tr> 
   <th>属性</th> 
   <th>描述</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>elem.parentElement</td> 
   <td>返回一个父元素对象</td> 
  </tr> 
  <tr> 
   <td>elem.child</td> 
   <td>返回子元素的对象集合</td> 
  </tr> 
  <tr> 
   <td>elem.firstElementChild</td> 
   <td>返回第一个子元素对象</td> 
  </tr> 
  <tr> 
   <td>elem.lastElementChild</td> 
   <td>返回最后一个子元素</td> 
  </tr> 
 </tbody> 
</table>

### 兄弟关系 ###

<table> 
 <thead> 
  <tr> 
   <th>属性</th> 
   <th>描述</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>elem.previousElementSibling</td> 
   <td>返回当前节点的前一个兄弟元素</td> 
  </tr> 
  <tr> 
   <td>elem.nextElementSibling</td> 
   <td>返回当前节点的下一个兄弟元素</td> 
  </tr> 
 </tbody> 
</table>

# 查找DOM #

## name属性名查找 ##

document.getElementByName('name名')

## TagName元素查找 ##

document.getElementsByTagName('div')

## ID属性名查找 ##

document.getElementById('Id名')

## Class属性名查找 ##

document.getElementsByClassName('Class名')

## 选择器查找 ##

// 查找单个元素
    document.querySelector('选择器')
    // 查找多个元素
    document.querySelectorAll('选择器')

# 操作DOM #