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

相关文章

来自专栏smy

谷歌调试工具选取元素选择不到页面的具体元素问题

z-index的问题 document的默认值是0. 一旦出现这种问题,检查下是否对大背景设置了z-index:-1; 如果设置了这个,那么所有的被设元素的内容...

2615
来自专栏JAVA后端开发

vue中对el-dialog宽度调整方法之一二

vue时,会用到el-dialog做为弹窗,但这个弹窗的宽度默认为50%.因项目中需要调整弹偿的宽度,需要设置其属性。 尝试过程如下:

2.4K1
来自专栏林德熙的博客

win10 uwp ApplicationView

本文和大家介绍一个重要的类,他可以用来设置窗口,如设置启动大小,设置是否允许截图,是否进入全屏,所有和窗口有关的,都可以在他这里设置。

702
来自专栏流柯技术学院

selenium切换窗口后定位元素出现问题的解决方案

在做UI自动化的过程中,有时需要由一个窗口跳转到另一个窗口,这时直接去定位页面元素,可能会出现问题,这时,我们需要将driver与新的窗口进行绑定。

4452
来自专栏xingoo, 一个梦想做发明家的程序员

CSS 之 选择器

选择器 类型选择器 也叫做 元素选择器和简单选择器,可以根据元素标签指定样式。 p { color:red; } 类选择器 一般用于某些同类型的样式。 .xxx...

2029
来自专栏coding

transition-group实现动画效果

如果要实现动画效果的元素是通过v-for循环渲染出来的,就不能使用transition,应该用transition-group将元素包裹

751
来自专栏python3

tkinter -- RadioButton

Radiobutton 为单选按钮,即在同一组内只能有一个按钮被选中,每当选中组内的一个按钮时,其它的按钮自动改为非选中态,与其他控件不同的是:它有组的概念

761
来自专栏快乐八哥

让IE7/8使用CSS中first-child和last-child样式属性

项目最终效果如下图所示: ? 可以看出2个tab之间有一天分割线,这条分割线没有使用单独的div或者span。而是使用li标签的border-right。但是最...

1868
来自专栏Golang语言社区

Golang语言--- channel

// xuhh_go_channel project main.go /* channel 1. channel 在读取数据的时候,如果此时通道...

3609
来自专栏程序员的碎碎念

jQuery右侧滑动快速导航条

平时浏览网站的时候要是网站很长,滑下来后还要返回到开头部分的header来点击导航就显得很不方便,在这里使用JQ来实现右侧的滑动导航条,先来看看效果图吧: ? ...

4096

扫码关注云+社区