DOM学习笔记（一）

淡淡的烟草味﹌ 2022-02-14 09:39 216阅读 0赞

## DOM获取元素 ##

**getElementById()**

*  id重复了会获取第一个
 *  在IE6~7中会把name当作id使用
 *  上下文只能是document

**getElementsByName()**

*  在IE浏览器中只对表单元素的name起作用

**getElementsByClassName()**

*  IE6~8中不兼容

**getElementsByTagName()**

*  获取当前上下文中，所有子子孙孙中标签名是xxx的元素

**querySelector()**  
**querySelectorAll()**

*  不兼容IE6~8
 *  没有DOM映射

**document.body**  
**document.head**  
**document.documentElement**  
**…**

## 表述节点与节点之间关系的属性 ##

<table> 
 <thead> 
  <tr> 
   <th></th> 
   <th>nodeType</th> 
   <th>nodeName</th> 
   <th>nodeValue</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>元素节点</td> 
   <td>1</td> 
   <td>大写标签名</td> 
   <td>null</td> 
  </tr> 
  <tr> 
   <td>文本节点</td> 
   <td>2</td> 
   <td>#text</td> 
   <td>文本注释</td> 
  </tr> 
  <tr> 
   <td>注释节点</td> 
   <td>3</td> 
   <td>#comment</td> 
   <td>注释内容</td> 
  </tr> 
  <tr> 
   <td>文档节点</td> 
   <td>4</td> 
   <td>#document</td> 
   <td>null</td> 
  </tr> 
 </tbody> 
</table>

**childNodes**: 所有子元素  
**children**：所有元素子节点（IE6~8中会把注释当作元素节点）  
**parentNode**： 父节点  
**previousSibling**： 当前节点的哥哥节点  
**previousElementSibling**：当前元素的哥哥元素节点  
**nextSibling/nextElementSibling**：当前元素下一个节点/元素节点  
**firstChild/lastChild**：读取第一个/最后一个子节点，若无返回null

## 动态操作DOM ##

**createElement()**：创建元素  
**createDocumentFragment()**：创建文档碎片  
**appendChild**：追加元素  
**insertBefore()**：插入节点  
**cloneNode(true)**：true深克隆，false浅克隆  
**removeChild**：移除节点  
**set/get/removeAttribute**：操作自定义元素

**xxx.style.xxx=xxx**：设置样式  
**xxx.style.xxx=xxx**：获取样式  
**xxx.className=‘xxx’**：设置类  
**xxx.οnclick=function()\{\}** ：注册事件