链接的getElementById链接的getElementById(chaining getEle

2019-05-12 08:30发布

我一直在寻找的答案,这个问题,但我可以找到没有,所以我想我会尝试的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.getElementByIdElement.prototype.getElementByIdelement.querySelector工作,即使元素是不是已经在DOM,比如与创建后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');


文章来源: chaining getElementById