Question

我正在编写一个非常大的脚本，性能对我来说是一件大事，特别是它必须能够在IE（雇主要求）中尽可能快地工作。我必须做一些innerHTML和类似的东西但是对于一个具有一些类或id的元素并且嵌套到具有一些id或类的其他元素中。

我可以使用querySelector()来实现，但正如我在IE的某些性能测试中看到的那样，querySelector比getElementById或甚至getElementsByClassName()慢几倍。这就是我想使用这些getElement...函数的原因。

以下是一个例子：

<div id='firstID' class='someClass'>
  <div id='secondID' class='someClass2'></div>
</div>
<div id='thirdID' class='someClass'>
  <div id='secondID' class='someClass2'></div>
</div>

我希望获得此secondID元素，但它必须是firstID元素中的元素。就像我之前说过的那样，我可以使用querySelector('#firstID #secondID');或jQuery等价物，但它比getElementById()慢得多，所以我问你怎么能把它翻译成getElementById？

P.S。在我的测试中，getElementById每秒执行1 300 000次，而querySelector执行时间约400 000次。所以，你看到我在哪里得到它。

Answer 1

永远不要使用相同的ID两次（ID代表身份，两个元素不能具有相同的身份）。您可以使用类名

<!DOCTYPE html>
<html>
    <head>
        <title></title>
    </head>
    <body>
        <div id="a">
            <div id="b" class="someClass2"></div>
        </div>
        <div id="c">
            <div id="d" class="someClass2"></div>
        </div>

    <script type="text/javascript">
        var parent = document.getElementById("a");
        var childs = parent.getElementsByClassName("someClass2");
        var firstSomeClass2Element = childs[0];
        firstSomeClass2Element.innerHTML = "Example";
    </script>

    </body>
</html>

有关ID的更多信息：

Element.id属性表示元素的标识符，   反映id全局属性。

它必须在文档中是唯一的，并且通常用于检索   使用getElementById的元素。 id的其他常见用法包括使用   使用CSS设置文档样式时，元素的ID作为选择器。

https://developer.mozilla.org/es/docs/Web/API/Element/id

这是您需要的解决方案，但非常非常糟糕

<!DOCTYPE html>

<html>
    <head>
        <title></title>
    </head>
    <body>
        <div id="a">
            <div id="b" class="someClass2">a</div>
        </div>
        <div id="c">
            <div id="b" class="someClass2">s</div>
        </div>

    <script type="text/javascript">
        var parent = document.getElementById("a");
        var childs = parent.childNodes;

        for (var i = 0; i < childs.length; i++) {
            if (childs[i].nodeType == Node.ELEMENT_NODE) {
                if(childs[i].id == "b") {
                    console.log("Done");
                }
            }
        }
    </script>

    </body>
</html>

附加功能的示例

<!DOCTYPE html>
<html>
    <head>
        <title></title>
    </head>
    <body>
        <div id="a">
            <div id="b" class="someClass2">a</div>
        </div>
        <div id="c">
            <div id="b" class="someClass2">s</div>
        </div>

    <script type="text/javascript">
        HTMLElement.prototype.findId = function(_id) {
            var childs = this.childNodes;

            for (var i = 0; i < childs.length; i++) {
                if(childs[i].nodeType == Node.ELEMENT_NODE) {
                    if(childs[i].id == _id) {
                        return childs[i];
                    }
                }
            }

            return null;
        }

        // Usage Example
        var parent = document.getElementById("a");
        console.dir(parent.findId("b"));

    </script>

    </body>
</html>

如何使用id和getElementById在其他特定元素中获取元素？

1 个答案: