JavaScript getElementById('id')==querySelector('#id') //true 为什么相等.

V2EX = way to explore

V2EX 是一个关于分享和探索的地方

现在注册

已注册用户请登录

V2EX 提问指南

这是一个创建于 2011 天前的主题，其中的信息可能已经有所发展或是发生改变。

按道理讲 getElementById('id')获得一个 HTMLElement 对象,querySelector('#id')获得一个 Element 对象.

Element<=HTMLElement,它俩是继承关系.

我有一点点明白,但又说不上来...

另外 Element 没有 event 事件,但是浏览器中能通过 element 对象访问 onSomething();

第 1 条附言 · 2019-05-16 10:01:09 +08:00

w3c 的文档中两者返回的都是 element
https://dev.w3.org/2006/webapi/selectors-api2/#interface-definitions
https://www.w3.org/TR/DOM-Level-3-Core/core.html#ID-getElBId

getElementById('id') querySelector('#id') 两者指向的对象是一个,所以两者相等.

id'

element

对象

event

7 条回复 • 2019-05-16 00:30:29 +08:00

temporary

2019-05-15 16:37:18 +08:00

返回的都是 Element 吧？
https://developer.mozilla.org/en-US/docs/Web/API/Document/querySelector
The Document method querySelector() returns the first Element within the document that matches the specified selector
https://developer.mozilla.org/en-US/docs/Web/API/Document/getElementById
The Document method getElementById() returns an Element object representing the element whose id property matches the specified string

fitmewell

2019-05-15 16:43:15 +08:00

一个接口返回白马一个接口返回马 ,白马的编号是 1 同时根据 2 个接口要求返回编号为 1 的数据 ,返回的都是白马

abc635073826

2019-05-15 16:48:13 +08:00

有请公孙龙来证：白马非马

TomVista

2019-05-15 17:03:11 +08:00

@temporary 返回的确实不一样.
@fitmewell @abc635073826 逻辑陷阱...

geelaw

2019-05-15 17:08:25 +08:00

@temporary #1 在文档更靠后的返回值部分用了不同的类型。

HTMLElement 是 Element 的子类（更准确地说是 IHtmlElement 是 IElement 的子接口），一个 HTMLElement 对象自然也是 Element 对象（一个实现了 IHtmlElement 接口的对象自然也实现了 IElement 接口）。

JavaScript 是动态类型语言，因此通过对象的引用可以访问的方法 /属性 /事件只和对象的运行时类型有关系，和“引用的静态类型”无关——打引号是因为后面这个概念在 JavaScript 里根本不存在。

换句话说，这代码大概可以这样翻译成 C++：

IUnknown *ptr;

IHtmlElement *getElementById(...)
{
return dynamic_cast<IHtmlElement *>(ptr);
}

IElement *querySelector(...)
{
return dynamic_cast<IElement *>(ptr);
}

这返回的是同一个对象，如果在 C++ 里比较，那就相当于是

dynamic_cast<IUnknown *>(getElementById(...)) == dynamic_cast<IUnknown *>(querySelector(...))

这当然是相等的。当然，这在 JavaScript 里面都是不存在的——你可以认为所有的 JavaScript 对象都是 IDispatch2。

rabbbit

2019-05-15 17:08:47 +08:00

document.querySelector('#Main') == "[object HTMLDivElement]" // true
document.getElementById('Main') == "[object HTMLDivElement]" // true

MrKou47

2019-05-16 00:30:29 +08:00 via iPhone

这个问题的关键不在于 js 的继承，而在于 ecma 规定的==操作符的算法。建议楼主先看规范