JS操作DOM-基础知识

Myth丶恋晨 2023-02-22 05:19 20阅读 0赞

### 一、什么是DOM ###

DOM 是Document Object Model( 文档对象模型 )的缩写。

DOM是把html里面的各种数据当作对象进行操作的一种思路。

比如一个超链，作为一个DOM对象，就可以使其隐藏，修改其href指向的地址。  
DOM把所有的html都转换为节点  
整个文档 是一个节点  
元素 是节点  
元素属性 是节点  
元素内容 是节点  
注释 也是节点

### 二、获取节点 ###

<table> 
 <thead> 
  <tr> 
   <th>关键字</th> 
   <th>简介</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>document.getElementById</td> 
   <td>通过id获取元素节点</td> 
  </tr> 
  <tr> 
   <td>getElementsByTagName</td> 
   <td>通过标签名称获取元素节点</td> 
  </tr> 
  <tr> 
   <td>getElementsByClassName</td> 
   <td>通过i类名获取元素节点</td> 
  </tr> 
  <tr> 
   <td>getElementsByName</td> 
   <td>通过表单元素的name获取元素节点</td> 
  </tr> 
  <tr> 
   <td>attributes</td> 
   <td>获取属性节点</td> 
  </tr> 
  <tr> 
   <td>childNodes</td> 
   <td>获取内容节点</td> 
  </tr> 
 </tbody> 
</table>

### 三、DOM事件 ###

<table> 
 <thead> 
  <tr> 
   <th>关键字</th> 
   <th>简介</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>onfocus / onblur</td> 
   <td>焦点事件</td> 
  </tr> 
  <tr> 
   <td>onmousedown / onmouseup / onmousemove / onmouseout</td> 
   <td>鼠标事件</td> 
  </tr> 
  <tr> 
   <td>onkeydown / onkeypress / onkeyup</td> 
   <td>键盘事件</td> 
  </tr> 
  <tr> 
   <td>onclick / ondblclick</td> 
   <td>点击事件</td> 
  </tr> 
  <tr> 
   <td>onchange</td> 
   <td>变化事件</td> 
  </tr> 
  <tr> 
   <td>onsubmit</td> 
   <td>提交事件</td> 
  </tr> 
  <tr> 
   <td>onload</td> 
   <td>加载事件</td> 
  </tr> 
  <tr> 
   <td>return false</td> 
   <td>阻止事件的发生</td> 
  </tr> 
  <tr> 
   <td>this</td> 
   <td>当前组件</td> 
  </tr> 
 </tbody> 
</table>

[点此刻下载思维导图][Link 1]

[Link 1]: https://download.csdn.net/download/qq_34566673/12568133