链接 getElementById

Question

我一直在寻找这个问题的答案，但找不到答案，所以我想尝试一下 StackOverflow。

在 javascript 中，这是否有效：

x = document.getElementById('myId'); y = x.getElementById('mySecondId');

我知道这可以通过 getElementsByTagName 完成，但我不确定 getElementById 返回的对象是否是能够使用 getElementById 方法。

我知道每个文档的 ID 应该是唯一的，但有时情况并非如此。

谢谢！

Answer 1

没有。

...但是您可以：

Element.prototype.getElementById = function(id) {
    return document.getElementById(id);
}

在此页面上尝试一下：

var x = document.getElementById('footer').getElementById('copyright');

编辑：正如 Pumbaa80 指出的那样，您想要其他东西。嗯，就在这里。谨慎使用。

Element.prototype.getElementById = function(req) {
    var elem = this, children = elem.childNodes, i, len, id;

    for (i = 0, len = children.length; i < len; i++) {
        elem = children[i];

        //we only want real elements
        if (elem.nodeType !== 1 )
            continue;

        id = elem.id || elem.getAttribute('id');

        if (id === req) {
            return elem;
        }
        //recursion ftw
        //find the correct element (or nothing) within the child node
        id = elem.getElementById(req);

        if (id)
            return id;
    }
    //no match found, return null
    return null;
}

示例： http://jsfiddle.net/3xTcX/

Answer 2

嗯，找出答案的最好方法就是尝试一下。在这种情况下，它不起作用，因为 getElementById 方法仅适用于 DOMDocument 对象（例如 document 变量），而不适用于DOMElement 对象，它们是单独的节点。我认为它也应该在这些上可用，但是嘿，我不同意 DOM API 的大部分设计......

Answer 3

您可以在示例中使用 y = x.querySelector('#'+'mySecondId'); 而不是 y = x.getElementById('mySecondId');的问题。

Element.getElementById 不存在，但您可以按照其他答案中提到的方式添加它，即使不建议向 Element 添加方法。如果您绝对想使用这种解决方案，以下是一种可能性：

Element.prototype.getElementById = function(id) {
return this.querySelector("#"+id);
}

在 Element.prototype 内使用 element.querySelector 而不是 document.getElementById 的一个优点。 getElementById 的优点是，即使元素尚未在 DOM 中（例如使用 document.createElement 创建元素之后），element.querySelector 也能正常工作。

Answer 4

没有。

默认情况下，只有 document 对象具有 getElementById 方法。

即使 x 是 iframe 或其他内容，在访问另一个 getElementById 之前，您仍然必须访问一些其他属性或其他内容。

Answer 5

当有多个 id 时，请考虑不使用 id

也许类或自定义属性更好，然后您可以使用 document.querySelectorAll 来查找它们。

els = document.querySelectorAll('[custom-attr]')

Answer 6

这是基于 Node.contains 的快速替代方案

var getById = function(id, context) {
  var el = document.getElementById(id);
  return context.contains(el) ? el : null;
}

var container = document.getElementById('container-element');
getById('my-element-id', container);

最后一行（在最新的 Chrome 和 Firefox 上进行了分析）的执行速度比 jQuery 的等效项快 4 到 10 倍

$('#my-element-id', container);

唯一好的替代方案是 querySelector （更快一点）

container.querySelector('#my-element-id');