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:获取已知节点的父节点。

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容