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.querySelector中使用document.getElementById而不是Element.prototype.getElementById的一个优点是，即使元素尚未在DOM中（例如在创建元素之后），element.querySelector仍在工作与document.createElement。

Answer 4

不。

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

即使x是iframe或其他内容，您仍需要在访问其他getElementById之前访问其他一些属性或其他内容。

Answer 5

当有多个

时，请考虑不使用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');

链接getElementById

6 个答案: