{"componentChunkName":"component---src-templates-blog-post-js","path":"/selector-vs-getElement/","result":{"data":{"site":{"siteMetadata":{"title":"Noah's Web Dev Notes"}},"markdownRemark":{"id":"9c3fdaf6-8dd3-5053-a5b7-9a4d3a2a3d39","excerpt":"The JavaScript querySelector() method lets you retrieve an element from the DOM, or the web page, using a CSS selector. This method comes with a sister function…","html":"

The JavaScript querySelector() method lets you retrieve an element from the DOM, or the web page, using a CSS selector. This method comes with a sister function called querySelectorAll() which selects all the elements that match a particular selector from the DOM.

\n

The getElementById() method, on the other hand, retrieves an element based on its ID attribute, hence the name. This method is more restrictive than querySelector because you can only retrieve elements based on their particular ID.

\n

getElementById

\n

Syntax:

\n
element = document.getElementById(id);
\n

Returns a reference to the element by its ID. If the element with the specified ID is not in the document, it will returns null.

\n

querySelector

\n

Syntax:

\n
element = document.querySelector(selectors);
\n

Returns the first element within the document that matches the specified group of selectors, or null if no matches are found.

\n

Difference between them

\n

Both of these functions are very similar in what they can do in term of DOM manipulation, but getXXXByXX function returns element dynamically, while querySelector returns element statistically.

\n

See example below :

\n
    <ul>\n        <li>111</li>\n        <li>222</li>\n        <li>333</li>\n    </ul>
\n

If we use querySelector to manipulation it :

\n
var ul=document.querySelector('ul');\n        var list=ul.querySelectorAll('li');\n        for(var i=0;i<list.length;i++){\n            ul.appendChild(document.createElement('li'));\n        }//now it create 3 new li and append them into ul\n        console.log(list.length) //however, the result is still 3, not 6
\n

On the other hand, if we use selectorElementById :

\n
var ul=document.getElementsByTagName('ul')[0];\n        var list=ul.getElementsByTagName('li');\n        for(var i=0;i<list.lenth;i++){\n            ul.appendChild(document.createElement('li'));\n        }   \n        console.log(list.length)// The result will be 6, not 3
\n

Performance

\n

Lone story short, getElementById is faster than querySelector.

","frontmatter":{"title":"getElementById vs querySelector","date":"December 03, 2020","description":null}},"previous":{"fields":{"slug":"/why-redux/"},"frontmatter":{"title":"Why using redux in react?"}},"next":{"fields":{"slug":"/var-let-const/var-let-const/"},"frontmatter":{"title":"Difference between var, const and let?"}}},"pageContext":{"id":"9c3fdaf6-8dd3-5053-a5b7-9a4d3a2a3d39","previousPostId":"01301ac3-a252-5a49-8256-2231145abbfa","nextPostId":"d422e799-3251-5f86-900c-35e0e0b2f3ab"}},"staticQueryHashes":["2841359383","3257411868"]}