跟随标准与Webkit源码探究DOM -- 获取元素之getElementById

按照ID获取元素 -- getElementById

标准

  • DOM 1,定义在HTMLDocument Interface 中,原型Element getElementById(in DOMString elementId),当不存在拥有对应ID的元素时返回null,该方法不会抛出任何异常。
  • DOM 2,移动到了Document(原HTMLDocument的Parent Interface),原型不变。
  • DOM 3 特别声明浏览器应当使用Attr.isId判断 Attr 是否为 ID,同时加了一句“Attributes with the name "ID" or "id" are not of type ID unless so defined.”,这是针对IE7-会将name为"id"的元素也一并返回的错误实现增加的说明
  • WHATWGgetElementById 放到了 NonElementParentNode里,因此实现了NonElementParentNodeDocumentFragment也拥有这个方法(而W3C的标准里,DocumentFragment仅仅继承了Node,不应该有此方法)
  • DOM 4 目前与 WHATWG 相同

注意点

  • 注意 getElementById 的名字里没有全大写的 ID,而是id
  • 目前浏览器中 getElementById 仅定义在DocumentDocumentFragment上,WHATWG的文档里提到没有添加到Element是为这个特性会挂掉未使用sizzle前的jQuery(<=1.2.6)的单元测试(旧版jQuery使用了elem.getElementById来判断元素是否为Document),参见邮件列表上的讨论
  • 没有插入 DOM (如用appendChild)的元素是无法用该方法搜索到的。由于前面提到的WHATWG与W3C标准的不同,现实中浏览器里的DocumentFragment也可以用此方法搜索元素。
  • 一些浏览器会将带有id的元素创建成全局变量(比如id="foo"的元素会以window.foo出现在javascript runtime),并且为了向后兼容所以一直保留这个特性,但是它不在标准里,而且全局变量很容易被覆盖,应该尽量避免使用。
  • 标准里写明了当存在多个拥有对应 id 的元素时,浏览器的行为是未定义的,但是大多数浏览器都选择返回第一个拥有该 id 的元素。至于什么是“第一个”,就要看浏览器实现中的DOM树是怎么遍历的了。 WHATWG 里描述的是tree-order,即先序的DFS。

    检查方法:

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Document</title>
    </head>
    <body>
        <div>
            <div id="foo" class="a"></div>
        </div>
        <div id="foo" class="b"></div>
    </body>
    </html>

    浏览器 console 运行

    document.getElementById(‘foo‘)

    Chrome,FireFox及IE均返回class="a"的div,即 WHATWG 中规定的先序DFS。

兼容性

IE7- 会将有与查询id相同的name的元素也算入,因此如果需要兼容 IE7-,可能需要做elem.id === id的判定。

其他

DOM 2 中,id 定义在 HTMLElement上(DOM 3 没有 DOM HTML 标准),WHATWG 将 id 放在了 Element,定义都是attribute DOMString id,并说明了 id 属于global attribute。总之,在 HTML 里只要是元素就可以有id,并且可以通过 elem.id 的方式直接获取。

Webkit 相关代码分析

Document 继承自 TreeScope,即WHATWG里提到的NonElementParentNode (参见WebCore/dom/Document.h),getElementById其实实现在TreeScope里,调用私有变量DocumentOrderedMap指针m_elementsByIdgetElementByIdWebCore/dom/TreeScope.hWebCore/dom/TreeScope.cpp)。

DocumentOrderedMapgetElementById其实是get的包装,最终实现参见 WebCore/dom/DocumentOrderedMap.cpp

迭代器的继承结构是 descendantsOfType -> TypedElementDescendantIteratorAdapter -> TypedElementDescendantIteratorTypedElementDescendantIterator<ElementType>::operator++ 调用 ElementIterator<ElementType>::traverseNext ,参见TypedElementDescendantIterator.h

ElementIterator<ElementType>::traverseNext 再调用 Traversal<ElementType>::nextWebCore/dom/ElementIterator.h),这里多态的ElementTraversal(继承Traversal)实际上又调用了NodeTraversalNodeTraversalnext的重载利用traverseNextTemplate实现。最后通过WebCore/dom/NodeTraversal.h可以看出访问顺序是 firstChild -> nextSibling -> nextAncestorSibling,也就是先序DFS,符合WHATWG里的描述。

时间: 2024-08-08 00:27:36

跟随标准与Webkit源码探究DOM -- 获取元素之getElementById的相关文章

跟随标准与Webkit源码探究DOM -- 获取元素之getElementsByTagName

按照标签名获取元素 -- getElementsByTagName 标准 DOM 1在Element和Document两个interface中均有定义,原型NodeList getElementsByTagName(in DOMString tagname),指明按照先序遍历遇到的顺序排列,不会抛出任何异常,参数"*"返回对应document或者element下所有元素.注意这里指明返回的是一个live的仅含有Element的NodeList. DOM 2里定义仍在Element和Do

跟随标准与Webkit源码探究DOM -- 获取元素之getElementsByClassName

按照类名获取元素 -- getElementsByClassName(HTML5) 标准 WHATWG 在Document与Element上均有定义,原型 HTMLCollection getElementsByClassName(DOMString classNames),并定义了匹配算法和类名的提取算法,注意这里是先从参数里提取出类名作为一个set,然后再开始匹配的.其中指明了在quirks mode下类名大小写不敏感,否则大小写敏感 DOM 4(Document,Element )基本和W

跟随标准与Webkit源码探究DOM -- 获取元素之querySelector,querySelectorAll

使用CSS选择器获取元素 -- querySelector,querySelectorAll(HTML5) 标准 W3C Selector API Level 1为Document,DocumentFragment和Element追加了querySelector和querySelctorAll,原型为Element? querySelector(DOMString selectors)和 NodeList querySelectorAll(DOMString selectors),说明了匹配的算

跟随标准与Webkit源码探究DOM -- 获取元素之getElementsByName

按照name属性获取多元素 -- getElementsByName 标准 DOM 1 定义在HTMLDocument Interface 中,原型NodeList getElementsByName(in DOMString elementName),该方法不会抛出任何异常. DOM 2依然定义在HTMLDocument,原型不变,但是新增说明在 HTML4.0 里搜索范围为所有元素,而 XHTML 1.0 里搜索范围缩小到表单元素 DOM 3没有 DOM HTML 的标准,沿袭 DOM 2(

Vue源码探究-虚拟DOM的渲染

Vue源码探究-虚拟DOM的渲染 在虚拟节点的实现一篇中,除了知道了 VNode 类的实现之外,还简要地整理了一下DOM渲染的路径.在这一篇中,主要来分析一下两条路径的具体实现代码. 按照创建 Vue 实例后的一般执行流程,首先来看看实例初始化时对渲染模块的初始处理.这也是开始 mount 路径的前一步.初始包括两部分,一是向 Vue 类原型对象上挂载渲染相关的方法,而是初始化渲染相关的属性. 渲染的初始化 下面代码位于vue/src/core/instance/render.js 相关属性初始

Vue源码探究-事件系统

Vue源码探究-事件系统 本篇代码位于vue/src/core/instance/events.js 紧跟着生命周期之后的就是继续初始化事件相关的属性和方法.整个事件系统的代码相对其他模块来说非常简短,分几个部分来详细看看它的具体实现. 头部引用 import { tip, toArray, hyphenate, handleError, formatComponentName } from '../util/index' import { updateListeners } from '../

windows7下cygwin+vs2013编译webkit源码

先下载源码和其他依赖,然后准备cygwin的环境,安装vs2013,最后编译即可.网上没有能直接用于最新版本源码编译的教程,所以我在编译过程中也遇到了很多坑.回过头来看,这些坑都是可以避免的,想要自己尝试编译的同学,可以根据本文快速的实现自己编译webkit(~除去下载文件的时间,15分钟准备环境,1小时编译完成). 下载最近源码 最近的下载版本和源码在这里: http://nightly.webkit.org/ 我使用的源码是这个版本built on 13 October 2014 and i

Android源码探究之AsyncTask 源码解析

AsyncTask源码使用 Api23版本,后面介绍和以前版本改动不同之处. 先看使用: /** * 下面四个方法中除了doInBackground方法在子线程,其他方法都在主线程执行 * String 表示传进来的参数, * Void 表示子线程执行过程中对主线程进行反馈所传的数据类型 * Integer 子线程执行的结果 */ private class MyAsyncTask extends AsyncTask<String,Void,Integer>{ @Override protec

Flink 源码解析 —— 如何获取 ExecutionGraph ?

https://t.zsxq.com/UnA2jIi 博客 1.Flink 从0到1学习 -- Apache Flink 介绍 2.Flink 从0到1学习 -- Mac 上搭建 Flink 1.6.0 环境并构建运行简单程序入门 3.Flink 从0到1学习 -- Flink 配置文件详解 4.Flink 从0到1学习 -- Data Source 介绍 5.Flink 从0到1学习 -- 如何自定义 Data Source ? 6.Flink 从0到1学习 -- Data Sink 介绍 7