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 , 因为换行符和空格充当了一个文本节点