JavaScript DOM基础：查找元素

亦凉 2023-01-19 07:17 105阅读 0赞

#### 前言 ####

DOM(Document Object Model)即文档对象模型,针对HTML和XML文档的API(应用程序接口)；DOM描绘了一个层次化的节点树,运行开发人员可以添加 / 移除和修改页面的某一部分;

![HTML DOM 节点树][HTML DOM]

#### 查找元素 ####

**元素节点查找方法**

<table> 
 <thead> 
  <tr> 
   <th>方法</th> 
   <th>描述</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>getElementById()</td> 
   <td>通过id查找HTML元素</td> 
  </tr> 
  <tr> 
   <td>getElementsByClassName</td> 
   <td>通过class查找HTML元素</td> 
  </tr> 
  <tr> 
   <td>getElementsByTagName()</td> 
   <td>通过标签名查找HTML元素</td> 
  </tr> 
  <tr> 
   <td>getElementsByName</td> 
   <td>根据name属性的值获取元素</td> 
  </tr> 
  <tr> 
   <td>querySelector</td> 
   <td>根据css路径获取元素</td> 
  </tr> 
  <tr> 
   <td>querySelectorAll</td> 
   <td>根据css路径获取元素</td> 
  </tr> 
 </tbody> 
</table>

**（1）getElementById()**  
在DOM中查找HTML元素的最简单的方法，就是通过元素的id名来找到该元素。

var ids = document.getElementById("id名");

如果找到该元素，则该方法将以对象（在ids变量中）的形式返回该元素。如果未找到该元素，则ids将包含 null。

**（2）getElementsByClassName()**  
可以通过标签元属的class名来查找，它返回的是一个类数组，可使用ids\[0\].innerHTML…的方式对标签进行操作。

var ids = document.getElementsByClassName("class名");

**（3）getElementsByTagName()**  
通过标签名的方式返回的也是一个数组，也是使用下标对其进行操作。

var ids = document.getElementsByTagName("标签名");

*  提示：通过类名查找 HTML元素在 IE 5,6,7,8 中无效。

**（4）getElementsByName()**  
根据name属性的值获取元素，返回带有给定name特性的所有元素。

document.getElementsByName("name属性的值");

**（5）querySelector()**  
根据css路径获取元素，接受一个css选择符，返回与该模式匹配的第一个元素，没找到则返回null。

document.querySelector("css路径");