如何操作DOM树?——“查询”

上一篇文章,我们写了关于《如何学习DOM?》的问题,指出DOM树的操作无非就是增删改查,那么,现在我们就来聊聊如何“查询”DOM树中的节点对象。

如果想要操作 DOM 节点,那么,首先第一步,就是要如何获取这个(些)节点对象。我们还是来看看 W3C DOM 规范中给我们定义的接口方法。

在 DOM-1 Core 中:

document.getElementsByTagName()

在 DOM-1 HTML 中:

document.getElementById()

document.getElementsByName()

在 DOM-2 Core 中:

document.getElementsByTagName()

document.getElementsByTagNameNS()

document.getElementById()

在 DOM-2 HTML 中:

document.getElementsByName()

原来是在 DOM-2 规范里,将getElementById()接口方法提升到了核心(Core)的位置,意义就是任何一种DOM实现都必须实现该接口方法。另外增加了getElementsByTagNameNS()接口方法。

那么,熟悉前端的你应该想到,查询方法不止这些,应该还有以下几个:

document.getElementsByClassName();

document.querySelector();

document.querySelectorAll();

但是,很遗憾!我没有在 W3C DOM 规范中找到它们。也就是说,它们不属于该规范,一个标准的 DOM 实现可以不包括对它们的具体实现。你也许会反问“不对啊,我每天都在使用它们啊?!”。

虽然,我没在 W3C 上找到。但在Web 超文本应用技术工作组(WHATWG)的 DOM 规范中找到了它们:

而且,很庆幸的是,很多的现代浏览器也都实现了它们。因此,我们大可不必为这些而担心,轻轻松松使用就是了。“查询”方法就这些,这里只是对它们的一个“快照”,有时间,我们再来说说它们的用法和注意事项。

本文来自企鹅号 - FlyingWeb媒体

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏阿凯的Excel

Python读书笔记7(列表-改增删)

上期和大家分享了列表的创建及列表的基本特性,本期和大家分享一下列表改增删操作。 一、列表的修改 ? 上期的这个图还记得吗? 这个图说明了字符串的不可变性及列...

3404
来自专栏知晓程序

开发 | 如何为你的微信小程序体积瘦身?

众所周知,微信小程序在发布的时候,对提交的代码有 2 MB 大小的限制。所以,如果你正在写一个功能稍微复杂一点的小程序,就必须得时刻小心注意你的代码是不是快触及...

572
来自专栏云飞学编程

python简单应用!用爬虫来采集天猫所有优惠券信息,写入本地文件

随便找一段文字,然后点击右键查看网页源代码,看看是否存在该文字,如果存在,那么这个网页就是静态网站了!很幸运,这个网站居然是静态的。

662
来自专栏编程

Python内置函数int高级用法

int()函数常用来把其他类型转换为整数,例如: >>>int(3.2) 3 >>>int(1/3) 其实,int是Python内置类型之一,之所以能够当作函数...

2039
来自专栏Lambda

【第一季】Vue2.0内部指令

学习这套课程你需要的前置知识: HTML的基础知识,你需要达到中级水平,写前端页面的结构代码完全没有问题。 CSS的基础知识,最好做过半年以上的切图和布局,最...

1729
来自专栏前端说吧

vue-学习笔记(更新中...)

3585
来自专栏阮一峰的网络日志

CSS 变量教程

今年三月,微软宣布 Edge 浏览器将支持 CSS 变量。 这个重要的 CSS 新功能,所有主要浏览器已经都支持了。本文全面介绍如何使用它,你会发现原生 CSS...

33211
来自专栏HTML5学堂

JavaScript 基础语法

讲法声明 - 很重要,请先查看 关于JavaScript的讲法,我们采取的方式与HTML&CSS类似,先在课程中带大家,以“实现页面小功能”为目的,一步一步的进...

2884
来自专栏Python小屋

Python内置函数int()高级用法

int()函数常用来把其他类型转换为整数,例如: >>> int(3.2) 3 >>> int(1/3) 0 其实,int是Python内置类型之一,之所以能...

2837
来自专栏老司机的简书

老司机读书笔记——Vue学习笔记

在默认情况下,v-model 在每次 input 事件触发后将输入框的值与数据进行同步 (除了上述输入法组合文字时)。你可以添加 lazy 修饰符,从而转变为使...

973

扫码关注云+社区