Node lookup method
document.getElementById() must be preceded by document
document.getElementsByName() must be preceded by document
No restriction on elements before ele.getElementsByTagName()
No restriction on elements before ele.getElementsByClassName()
querySelector()
querySelectorAll()
. tagName element name
In the lower version of IE, there is a bug in document.getElementById()
The element used to get the specified value of id or name
If the name attribute value of one element is the same as the id attribute value of another element
The elements in the first place will be selected according to the order
Identify IE browser: in IE browser, V will be resolved to V; in other browsers, V is vertical tab (equivalent to space)
! + "\ v1" in IE:! + "\ v1"=!+"v1"=!NaN=true; in other browsers:! + "\ v1" =! + "1" =! 1 = false
document.all is a collection of all elements within a page
document.all(0) gets the first element
document.all[0] gets the first element
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style> body{ width:100%; height:100%; } </style> <script src="DomReady.js"></script> <script> myReady(function(){ var div=document.getElementById("div1"); console.log(div.tagName); //var myul=div.getElementById("myul"); //console.log(myul);//Index.html: 19 uncaught typeerror: div.getelementbyid is not a function at htmldocument. < anonymous > (index. HTML: 19) indicates that other elements cannot be used to get an id var target=document.getElementById("target"); console.log(target.innerHTML);//IE7 The following: This is the wrong element other browsers: This is the right element // Compatible with lower versions IE Writing function getElementById(id){ var el=document.getElementById(id); //If it is IE Browser if(!+"\v1"){ // If the id Designated id，Then return directly if(el && el.id===id){ return el; }else{ var els=document.all(id); var len=els.length; for(var i=0;i<len;i++){ if(els[i].id===id){ return els[i]; } } } } //If it's another browser return el; } console.log(getElementById("target").tagName);//p }); </script> </head> <body> <a href="#" name="target">This is the wrong element</a> <p id="target">This is the right element</p> <div id="div1"> <ul id="myul"> <li>1</li> <li>2</li> <li>3</li> </ul> </div> </body> </html>
document.getElementsByName() has a Bug on a lower version browser
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style> body{ width:100%; height:100%; } </style> <script src="DomReady.js"></script> <script> myReady(function(){ var cbox=document.getElementsByName("num"); console.log(cbox.length);//3 console.log(cbox);//NodeList(3) [input, input, input] }); </script> </head> <body> <input type="checkbox" name="num">1 <input type="checkbox" name="num">2 <input type="checkbox" name="num">3 </body> </html>
document.getElementsByTagName("!") can get all comments
. nodeValue() display comment text
Get comment cannot be obtained in Google browser, only exists below IE8
document.getElementsByTagName("*") gets all elements
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style> body{ width:100%; height:100%; } </style> <script src="DomReady.js"></script> <script> myReady(function(){ var input=document.getElementsByTagName("input"); console.log(input[0].value);//hh~ var comments=document.getElementsByTagName("!"); var len=comments.length; for(var i=0;i<len;i++){ console.log(comments[i].nodeValue); } var all=document.getElementsByTagName("*"); var len=all.length; for(var i=0;i<len;i++){ console.log(all[i].tagName); } }); </script> </head> <body> <!-- This is a comment --> <input type="text" value="hh~"> </body> </html>
getElementsByClassName()
Compatibility IE9+
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style> body{ width:100%; height:100%; } </style> <script src="DomReady.js"></script> <script> myReady(function(){ var lights=document.getElementsByClassName("light"); console.log(lights);//HTMLCollection(3) [div.light, div.light.dark, div.light] var light_dark=document.getElementsByClassName("light dark"); console.log(light_dark);//HTMLCollection [div.light.dark] }); </script> </head> <body> <div class="light"></div> <div class="light dark"></div> <div class="light"></div> </body> </html>
Because document.getElementsByClassName() is not compatible with browsers below IE8, use document.getElementsByTagName()
Here's how to write compatibility
In regular, s means blank
pattern.test(str) regular detection
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style> body{ width:100%; height:100%; } </style> <script src="DomReady.js"></script> <script> myReady(function(){ // Custom compatibility IE8 Here's how var getElementsByClassName=function(opts){ // All parameters are stored in an object, and the properties of the object are used to obtain these parameters var searchClass=opts.searchClass; var tag=opts.tag || "*";//If no label name is specified, all labels will be found var node=opts.node || document;//If no lookup scope is specified, the entire document will be found var res=[]; //If it's a modern browser if(document.getElementsByClassName){ var nodes=node.getElementsByClassName(searchClass); // Determine whether it is the specified tag name if(tag !== "*"){ for(var i=0,len=nodes.length;i<len;i++){ if(nodes[i].tagName==tag.toUpperCase()){ res.push(nodes[i]); } } }else{ res=nodes; } return res; }else{ //If it is IE8 The following browsers var els=node.getElementsByTagName(tag); var len=els.length; // Regular: start|Blank space + class + End|Blank space var pattern=new RegExp("(^|\\s)"+searchClass+"($|\\s)"); for(var i=0,j=0;i<len;i++){ if(pattern.test(els[i].className)){ res[j]=els[i];//Store the matched data to res in j++; } } return res; } } // Calling method var node=document.getElementById("box2"); var res=getElementsByClassName({ searchClass:"light dark", node:node }); console.log(res[0].innerHTML);//1 }); </script> </head> <body> <div id="box1"> <div class="light">light</div> <div class="light dark">light dark</div> <div class="light">light</div> </div> <div id="box2"> <div class="light">light2</div> <div class="light dark">light dark2</div> <div class="light">light2</div> </div> </body> </html>
querySelector() querySelectorAll() compatibility: IE8+
querySelector() returns when it finds one
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style> body{ width:100%; height:100%; } </style> <script src="DomReady.js"></script> <script> myReady(function(){ var box1=document.querySelector("#box1"); console.log(box1.tagName);//UL var li=box1.querySelector("li:last-child"); console.log(li.innerHTML);//light // Class name is not standard //var boxh=document.querySelector(".hh:bb");//index.html:22 Uncaught DOMException: Failed to execute 'querySelector' on 'Document': '.hh:bb' is not a valid selector. //console.log(boxh); // Need to escape var boxh=document.querySelector(".hh\\:bb"); console.log(boxh);//<ul id="box1" class="hh:bb">... var all=document.querySelectorAll("ul,input"); console.log(all);//NodeList(3) [ul#box1.hh:bb, ul#box2, input] }); </script> </head> <body> <ul id="box1" class="hh:bb"> <li class="light">light</li> <li class="light dark">light dark</li> <li class="light">light</li> </ul> <ul id="box2"> <li class="light">light2</li> <li class="light dark">light dark2</li> <li class="light">light2</li> </ul> <input type="text" value="1"> </body> </html>
As mentioned before, the class array object is dynamic, but querySelectorAll() returns a staticNodeList, which is not dynamic
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style> body{ width:100%; height:100%; } </style> <script src="DomReady.js"></script> <script> myReady(function(){ // No longer trapped in a dead cycle // because querySelectorAll The return is staticNodeList // Not dynamic var div1=document.querySelectorAll("div"); var i=0; while(i<div1.length){ document.body.appendChild(document.createElement("div")); i++; } }); </script> </head> <body> <div>1</div> <div>1</div> </body> </html>
