DOM API获取元素的几种方法

发表于 | 分类于

DOM节点

DOM的最小组成单位叫做节点（node）。文档的树形结构（DOM树），就是由各种不同类型的节点组成。节点有以下7种类型

  • Document：整个文档树的顶层节点（root node）
  • DocumentType: doctype标签
  • Element：网页的各种HTML标签
  • Attribute：网页元素的属性（如calss=”aa”)
  • Text：标签之间包含的文本内容
  • Comment：注释
  • DocumentFragment：文档片段

节点间的关系

除了根节点<html>，它的下级节点与周围节点存在三种关系

  • 父节点关系：parentNode
  • 子节点关系：childNodes
    • firstChild：第一个子节点
    • lastChild：最后一个子节点
  • 同级节点关系：sibling
    • nextSibling：紧邻在后的那个同级节点
    • previousSibling：紧邻在前的那个同级节点

document.querySelector()

接受一个css选择器作为参数，返回匹配该选择器的第一个节点，如果没有匹配的节点返回null。

语法：element = document.querySelector(selectors) ，selectors是一个字符串，包含一个或者多个css选择器，多个以逗号分隔。

1
2
3
var element1 = document.querySelector('.myclass')
var element2 = document.querySelector('p')  //返回第一个p元素
var element3 = document.querySelector('p.myclass') //返回文档中class="myclass"的第一个<p>元素

*document.querySelectorAll()：返回一个NodeList对象，包含所有匹配给定选择器的节点

document.getElementsByTagName()

返回一个包括所有给定标签名称的元素集合，如果没有匹配的元素，返回一个空集。可以在任意一个元素上调用该方法。（从给定的父节点开始往下找，如果是div.getElementsByTagName()，则从div这个节点开始往下找）

语法：var elements = document.getElementsByTagName(name)，name是一个字符串。

1
2
var a = document.getElementsByTagName('p')
//返回当前文档的全部p元素节点

document.getElementsByClassName()

返回一个包含所有指定class名称的元素集合，可以在任意元素上调用该方法。

语法：var elements = document.getElementsByClassName(names)，names是一个字符串，如果含有多个class名称，用空格分隔。

1
2
document.getElementsByClassName('red test')
//返回所有calss名为 red 和 test 的元素

document.getElementById()

返回拥有指定id的第一个元素，如果不存在则返回null

语法：element = document.getElementById(id)，id为大小写敏感的字符串

1
2
document.getElementById('myid')
//返回一个id为myid的元素

Node.firstChild

返回树中节点的第一个子节点，如果无子节点，则返回null。（注：空白符节点会充当一个文本节点，可以Node.firstChild.firstChild…的形式使用）

类似的还有：Node.lastChild \ Node.nextSibling \ Node.previousSibling \ Node.parentNode

1
2
3
4
5
6
7
8
<p id="para-01">
  <span>First span</span>
</p>
<script>
  var p01 = document.getElementById('para-01');
  alert(p01.firstChild.nodeName)
</script>
//返回#text , 因为换行符和空格充当了一个文本节点