如何操作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 规范中找到了它们:

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

  • 发表于:
  • 原文链接:http://kuaibao.qq.com/s/20171210G0OE8G00?refer=cp_1026

相关快讯

扫码关注云+社区