如何操作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 条评论
登录 后参与评论

相关文章

来自专栏知晓程序

知晓云 | 5 分钟实现小程序模板消息推送,你可以这样做

但是,有了知晓云,你不用再头疼如何开发模板消息模块。只需要几步简单的操作,就可以轻松实现模板消息推送。

1402
来自专栏一“技”之长

标签之美三——超链接的嵌入 原

通常的超链接有两种方式,一种是链接到另一个文件,另一种是链接到当前文件的某个位置。这两种方式都是通过<a></a>标签来创建,其中href属性用来指定链接的目标...

852
来自专栏九彩拼盘的叨叨叨

学习前端第6周第4天

502
来自专栏DeveWork

免插件仅代码实现WordPress评论回复邮件

许多wordpress博主为增加与读者的互动,从而获得更加多的“回头客”,常常在评论上启用一个“评论回复邮件”的功能。这个功能可以使用插件来实现,但我们一贯遵循...

2958
来自专栏云计算教程系列

如何在Ubuntu VPS上使用LESS CSS预处理器

LESS是一个CSS预处理器,它允许您使用比简单的平面CSS更高效和智能的方式创建样式表。它提供了许多动态组件,可以使您的代码更小,更可重用,更具可扩展性。它的...

1052
来自专栏张戈的专栏

WordPress集成底部滚动推荐条,让好文章不再被埋没

最新消息:目前该功能张戈博客已推出 WordPress 插件,欢迎安装使用!详细介绍=>> 这个功能最开始叫底部滚动公告条,部分 WordPress 主题集成自...

3209
来自专栏天天

图片库

732
来自专栏西安-晁州

app开发之deviceone

deviceone,跨平台、低成本、纯原生的app开发服务,具体介绍见:http://www.deviceone.net/ do不同于dcloud、rn等开发套...

3070
来自专栏Lambda

Bootstrap笔记

Bootstrap简介什么是Bootstrap?框架:库 lib libraryjQuery作为一个框架来讲,提供一套比较便捷的操作DOM的方式把大家都需要的功...

2009
来自专栏散尽浮华

Html之初体验

概述 HTML是英文Hyper Text Mark-up Language(超文本标记语言)的缩写,他是一种制作万维网页面标准语言。相当于定义统一的一套规则,大...

18310

扫码关注云+社区