CODEWITHSUNDEEP
javascriptjqueryhtmlweb
eLGi
eLGi

Reputation: 100

How to get element inside other specific element using its id and getElementById?

I'm writing a really big script and performance is a big deal for me, especially that it has to work as fast as it can in IE (employer requirements). I have to do some innerHTML and stuff like that but for an element that has some class or id and is nested into some other element with some id or class.

I can do it using querySelector(), but as I saw in some performance tests for IE, querySelector is a few times slower than getElementById or even getElementsByClassName(). That's why I want to use these getElement... functions.

Here's an example: 

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

And I want to get this secondID element but it has to be one in firstID element. Like I said before, I can use querySelector('#firstID #secondID'); or a jQuery equivalent but it is much slower than getElementById() so I'm asking you how can I translate it into getElementById?

P.S. In my tests getElementById was performed 1 300 000 times per second whereas querySelector was perfomed about 400 000 times. So, you see where I'm getting with that.

Upvotes: 2

Views: 6746

Answers (1)

Velko Georgiev
Velko Georgiev

Reputation: 694

Never ever use the same ID twice ( ID stand for identity and two elements can't have the same identity ). You can use the class name instead

<!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>

More about ID:

The Element.id property represents the element's identifier, reflecting the id global attribute.

It must be unique in a document, and is often used to retrieve the element using getElementById. Other common usages of id include using the element's ID as a selector when styling the document with CSS.

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

Here is the solution you need but is very very bad

<!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>

Example with attached function

<!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>

Upvotes: 1

Related Questions