DOM API 获取元素的 N 种方法

什么是DOM？

DOM：Document Object Model

DOM翻译过来是文档对象模型，是HTML和XML文档的编程接口。它提供了对文档的结构化的表述，并定义了一种方式可以使从程序中对该结构进行访问，从而改变文档的结构，样式和内容。DOM 将文档解析为一个由节点和对象（包含属性和方法的对象）组成的结构集合。简言之，它会将web页面和脚本或程序语言连接起来。

说白了DOM就是浏览器为JavaScript提供的一系列接口，通过这些接口我们可以操作web页面。

DOM节点

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

Document：整个文档树的顶层节点（root node）

DocumentType: doctype标签

Element：网页的各种HTML标签

Attribute：网页元素的属性

Text：标签之间包含的文本内容

Comment：注释

DocumentFragment：文档片段

节点间的关系

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

父节点关系：parentNode

子节点关系：childNodes

firstChild：第一个子节点

lastChild：最后一个子节点

同级节点关系：sibling

nextSibling：紧邻在后的那个同级节点

previousSibling：紧邻在前的那个同级节点

DOM API 获取元素的 N 种方法

（1） 通过顶层document节点获取：

    1. 通过ID获取元素

doument.getElementById(“elementId”)

返回拥有指定id的第一个元素，id为大小写敏感的字符串，如果不存在则返回null。如果页面上含有多个相同id的节点，那么只返回第一个节点。

   2. 通过节点名获取元素

document.getElementsByName(“elementsName”)

name 为字符串(String)，该方法是通过节点的name获取节点，返回的有同样名称的节点数组。通过要获取节点的某个属性来循环判断是否为需要的节点

   3. 通过节点标签名称获取元素

document.getElementByTagName(“tagName”)

该方法是通过节点的Tag获取节点，该方法与document.getElementsByName()相似,同样返回一个数组

   4. 通过元素类名获取元素

document.getElementsClassName(“classname”)

同样返回的是一个数组,当调用发生在document对象上时, 整个DOM都会被搜索, 包含根节点

 5. querySelector 和querySelectorall

querySelector:

语法：element = document.querySelector(selectors)，接受一个css选择器作为参数，返回匹配该选择器的第一个节点，如果没有匹配的节点返回null。selectors是一个字符串，包含一个或者多个css选择器，多个以逗号分隔。

querySelectorAll:

该方法返回所有满足条件的元素，结果是个nodeList集合。

（2） 通过父节点获取：

  1. parentObj.firstChild：如果节点为已知节点（parentObj）的第一个子节点就可以使用这个方法。这个属性是可以递归使用的，也就是支持parentObj.firstChild.firstChild.firstChild...的形式，如此就可以获得更深层次的节点。

  2. parentObj.lastChild：很显然，这个属性是获取已知节点（parentObj）的最后一个子节点。与firstChild一样，它也可以递归使用。

  3. parentObj.childNodes：获取已知节点的子节点数组，然后可以通过循环或者索引找到需要的节点。

  4. parentObj.children：获取已知节点的直接子节点数组。

  5. parentObj.getElementsByTagName(tagName)：使用方法不再赘述，它返回已知节点的所有子节点中类型为指定值的子节点数组。例如：parentObj.getElementsByTagName('A')返回已知的子节点中的所有超链接。

（3） 通过临近节点获取：

1. neighbourNode.previousSibling：获取已知节点（neighbourNode）的前一个节点，这个属性和前面的firstChild、lastChild一样都似乎可以递归使用的。

2. neighbourNode.nextSibling：获取已知节点（neighbourNode）的下一个节点，同样支持递归。

（4） 通过子节点获取：

   childNode.parentNode：获取已知节点的父节点。