DOM API 获取元素的 N 种方法

1 .通过ID获取元素

doument.getElementById(“elementId”)

通过节点的ID,可以准确获得需要的元素,是比较简单快捷的方法。如果页面上含有多个相同id的节点,那么只返回第一个节点。

2.通过节点名获取元素

document.getElementsByName(“elementsName”)

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

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

document.getElementByTagName(“tagName”)

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

4通过元素类名获取元素

document.getElementsClassName(“classname”)

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

5.querySelector 和querySelectorall

querySelector

该方法返回满足条件的单个元素。按照深度优先和先序遍历的原则使用参数提供的CSS选择器在DOM进行查找,返回第一个满足条件的元素。

 querySelectorAll

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

6.通过父节点获取

node.firstChild

指向node列表中的第一个节点

node.lastChild

指向node列表中的最后一个节点

node.childNodes

获取子节点数组

7通过临近节点获取

node.preiousSibling

返回当前节点的前一个兄弟节点,没有则返回

null.

node.nextSibling

返回当前节点的后一个兄弟节点,没有则返回

null.

8通过子节点获取

node.parentNode

获取该节点的父节点

 

使用原生JS实现事件委托