V2EX = way to explore
V2EX 是一个关于分享和探索的地方
现在注册
已注册用户请  登录
V2EX 提问指南
TomVista
V2EX  ›  问与答

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

  •  
  •   TomVista · 2019-05-15 16:27:08 +08:00 · 1410 次点击
    这是一个创建于 2052 天前的主题,其中的信息可能已经有所发展或是发生改变。

    按道理讲 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') 两者指向的对象是一个,所以两者相等.
    7 条回复    2019-05-16 00:30:29 +08:00
    temporary
        1
    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
        2
    fitmewell  
       2019-05-15 16:43:15 +08:00
    一个接口返回白马 一个接口返回马 ,白马的编号是 1 同时根据 2 个接口要求返回编号为 1 的数据 ,返回的都是白马
    abc635073826
        3
    abc635073826  
       2019-05-15 16:48:13 +08:00
    有请公孙龙来证:白马非马
    TomVista
        4
    TomVista  
    OP
       2019-05-15 17:03:11 +08:00
    @temporary 返回的确实不一样.
    @fitmewell @abc635073826 逻辑陷阱...
    geelaw
        5
    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
        6
    rabbbit  
       2019-05-15 17:08:47 +08:00
    document.querySelector('#Main') == "[object HTMLDivElement]" // true
    document.getElementById('Main') == "[object HTMLDivElement]" // true
    MrKou47
        7
    MrKou47  
       2019-05-16 00:30:29 +08:00 via iPhone
    这个问题的关键不在于 js 的继承,而在于 ecma 规定的==操作符的算法。建议楼主先看规范
    关于   ·   帮助文档   ·   博客   ·   API   ·   FAQ   ·   实用小工具   ·   2994 人在线   最高记录 6679   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 17ms · UTC 14:30 · PVG 22:30 · LAX 06:30 · JFK 09:30
    Developed with CodeLauncher
    ♥ Do have faith in what you're doing.