querySelectorAll

document.querySelectorAll("*") / document.all

<pre><b>document.all </b> <span id="dp1"></span> <span id="dp"></span> </pre> <div id="Mid" style="display:none"> <div class="item" >111</div> <div class="item">222 </div> <div class="item">222 </div> <span>333</span> </div> <script> var x = document.all; var i ,txt="" ; for( i=0 ; i< x.length ;i++){ txt += "<br> x[" +i+"].tagName = " + x[i].tagName } ; dp.innerHTML= txt ; txt="" ; txt += '<<c>div id="Mid" > \n' ; txt += ' <<c>div class="item" >111<<c>/div> \n' ; txt += ' <<c>div class="item" >222<<c>/div> \n' ; txt += ' <<c>div class="item" >222<<c>/div> \n' ; txt += ' <<c>span>333<<c>/span> \n' ; txt += '<<c>/div> \n\n' ; txt += '<<c>span id="dp"><<c>/span>\n\n' ; txt += '<<c>script>\n' ; txt += ' var x = document.all ; \n' ; txt += ' var i ,txt="" ;\n' ; txt += ' for( i=0 ; i< x.length ;i++){\n' ; txt += ' txt += "<<c>br> x[" +i+"].tagName = " + x[i].tagName };\n'; txt += 'dp.innerHTML= txt ;\n' ; txt += '<<c>/script>\n' ; dp1.innerHTML= txt ; </script> <style> b{font-size:30px;color:blue;} #www{font-size: 30px ;word-wrap:break-word;} pre { font-size: 20px ; white-space: pre-wrap; /* css-3 */ white-space: -moz-pre-wrap; /* Mozilla, since 1999 */ white-space: -pre-wrap; /* Opera 4-6 */ white-space: -o-pre-wrap; /* Opera 7 */ word-wrap: break-word; } /* Internet Explorer 5.5+ */ b{font-size:30px;color:blue;} r{font-size:20px;color:red;} </style>

00

<pre><b>document.querySelectorAll(CSS selectors) </b> <span id="dp1"></span> <span id="dp"></span> </pre> <div id="11" style="display:none"> <div class="item">111</div> <div class="item">111</div> </div> <script> var x = document.querySelectorAll("*"); var i ,txt="" ; for( i=0 ; i< x.length ;i++){ txt += "<br> x[" +i+"].tagName = " + x[i].tagName } ; dp.innerHTML= txt ; txt="" ; txt += '<<c>div id="Mid" > \n' ; txt += ' <<c>div class="item" >111<<c>/div> \n' ; txt += ' <<c>div class="item" >222<<c>/div> \n' ; txt += ' <<c>div class="item" >222<<c>/div> \n' ; txt += ' <<c>span>333<<c>/span> \n' ; txt += '<<c>/div> \n\n' ; txt += '<<c>span id="dp"><<c>/span>\n\n' ; txt += '<<c>script>\n' ; txt +=' var x = document.querySelectorAll(<r>"*"</r>) ;\n' txt +=' var i ,txt="" ;\n' ; txt +='for( i=0 ; i< x.length ;i++){ \n' ; txt +=' txt += "\\n x[" +i+"].tagName = " + x[i].tagName }; ' ; txt +='\n' ; txt +='dp.innerHTML= txt ;\n' ; txt += '<<c>/script>\n\n' ; txt +='<<c>div id="dp"><<c>/div>' ; dp1.innerHTML= txt ; </script> <style> b{font-size:30px;color:blue;} #www{font-size: 30px ;word-wrap:break-word;} pre { font-size: 20px ; white-space: pre-wrap; /* css-3 */ white-space: -moz-pre-wrap; /* Mozilla, since 1999 */ white-space: -pre-wrap; /* Opera 4-6 */ white-space: -o-pre-wrap; /* Opera 7 */ word-wrap: break-word; } /* Internet Explorer 5.5+ */ b{font-size:30px;color:blue;} r{font-size:20px;color:red;} </style>

00

<pre><b>Mid.querySelectorAll(CSS selectors) </b> <<c>div id="Mid" style="display:none"> <<c>div class="item" >111<<c>/div> <<c>div class="item" >222 <<c>/div> <<c>div class="item" >333 <<c>/div> <<c>span>333<<c>/span> <<c>/div> <<c>script> var x = <r>Mid</r>.querySelectorAll("*"); var i ,txt="" ; for( i=0 ; i< x.length ;i++){ txt += "<<c>br> x[" +i+"].tagName = " + x[i].tagName } ; dp.innerHTML= txt ; <<c>/script> <span id="dp"></span> </pre> <div id="Mid" style="display:none"> <div class="item" >111</div> <div class="item">222 </div> <div class="item">222 </div> <span>333</span> </div> <script> var x = Mid.querySelectorAll("*"); var i ,txt="" ; for( i=0 ; i< x.length ;i++){ txt += "<br> x[" +i+"].tagName = " + x[i].tagName } ; dp.innerHTML= txt ; </script> <style> b{font-size:30px;color:blue;} #www{font-size: 30px ;word-wrap:break-word;} pre { font-size: 20px ; white-space: pre-wrap; /* css-3 */ white-space: -moz-pre-wrap; /* Mozilla, since 1999 */ white-space: -pre-wrap; /* Opera 4-6 */ white-space: -o-pre-wrap; /* Opera 7 */ word-wrap: break-word; } /* Internet Explorer 5.5+ */ b{font-size:30px;color:blue;} r{font-size:20px;color:red;} </style>

00

<pre><b>Mid.querySelectorAll(CSS selectors) </b> <<c>div id="Mid" style="display:none"> <<c>div class="item" >111<<c>/div> <<c>div class="item" >222 <<c>/div> <<c>div class="item" >333 <<c>/div> <<c>span>333<<c>/span> <<c>/div> <<c>script> var x = <r>Mid</r>.querySelectorAll(<r>".item"</r>) ; var i ,txt="" ; for( i=0 ; i< x.length ;i++){ txt += "<<c>br> x[" +i+"].tagName = " + x[i].tagName } ; dp.innerHTML= txt ; <<c>/script> <span id="dp"></span> </pre> <div id="Mid" style="display:none"> <div class="item" >111</div> <div class="item">222 </div> <div class="item">222 </div> <span>333</span> </div> <script> var x = Mid.querySelectorAll(".item"); var i ,txt="" ; for( i=0 ; i< x.length ;i++){ txt += "<br> x[" +i+"].tagName = " + x[i].tagName } ; dp.innerHTML= txt ; </script> <style> b{font-size:30px;color:blue;} #www{font-size: 30px ;word-wrap:break-word;} pre { font-size: 20px ; white-space: pre-wrap; /* css-3 */ white-space: -moz-pre-wrap; /* Mozilla, since 1999 */ white-space: -pre-wrap; /* Opera 4-6 */ white-space: -o-pre-wrap; /* Opera 7 */ word-wrap: break-word; } /* Internet Explorer 5.5+ */ b{font-size:30px;color:blue;} r{font-size:20px;color:red;} </style>

00

<pre><b>Mid.querySelectorAll(CSS selectors) </b> <<c>div id="Mid" style="display:none"> <<c>div class="item" >111<<c>/div> <<c>div class="item" >222 <<c>/div> <<c>div class="item" >333 <<c>/div> <<c>span>333<<c>/span> <<c>/div> <<c>script> var x = <r>Mid</r>.querySelectorAll(<r>"div"</r>) ; var i ,txt="" ; for( i=0 ; i< x.length ;i++){ txt += "<<c>br> x[" +i+"].tagName = " + x[i].tagName } ; dp.innerHTML= txt ; <<c>/script> <span id="dp"></span> </pre> <div id="Mid" style="display:none"> <div class="item" >111</div> <div class="item">222 </div> <div class="item">222 </div> <span>333</span> </div> <script> var x = Mid.querySelectorAll("div"); var i ,txt="" ; for( i=0 ; i< x.length ;i++){ txt += "<br> x[" +i+"].tagName = " + x[i].tagName } ; dp.innerHTML= txt ; </script> <style> b{font-size:30px;color:blue;} #www{font-size: 30px ;word-wrap:break-word;} pre { font-size: 20px ; white-space: pre-wrap; /* css-3 */ white-space: -moz-pre-wrap; /* Mozilla, since 1999 */ white-space: -pre-wrap; /* Opera 4-6 */ white-space: -o-pre-wrap; /* Opera 7 */ word-wrap: break-word; } /* Internet Explorer 5.5+ */ b{font-size:30px;color:blue;} r{font-size:20px;color:red;} </style>

00

<pre><b>Mid.querySelectorAll(CSS selectors) </b> <<c>div id="Mid" style="display:none"> <<c>div class="item" >111<<c>/div> <<c>div class="item" >222 <<c>/div> <<c>div class="item" >333 <<c>/div> <<c>span>333<<c>/span> <<c>/div> <<c>script> var x = <r>Mid</r>.querySelectorAll(<r>"span"</r>) ; var i ,txt="" ; for( i=0 ; i< x.length ;i++){ txt += "<<c>br> x[" +i+"].tagName = " + x[i].tagName } ; dp.innerHTML= txt ; <<c>/script> <span id="dp"></span> </pre> <div id="Mid" style="display:none"> <div class="item" >111</div> <div class="item">222 </div> <div class="item">222 </div> <span>333</span> </div> <script> var x = Mid.querySelectorAll("span"); var i ,txt="" ; for( i=0 ; i< x.length ;i++){ txt += "<br> x[" +i+"].tagName = " + x[i].tagName } ; dp.innerHTML= txt ; </script> <style> b{font-size:30px;color:blue;} #www{font-size: 30px ;word-wrap:break-word;} pre { font-size: 20px ; white-space: pre-wrap; /* css-3 */ white-space: -moz-pre-wrap; /* Mozilla, since 1999 */ white-space: -pre-wrap; /* Opera 4-6 */ white-space: -o-pre-wrap; /* Opera 7 */ word-wrap: break-word; } /* Internet Explorer 5.5+ */ b{font-size:30px;color:blue;} r{font-size:20px;color:red;} </style>

00

Edit

#html #網頁格式 #style #div #script querySelectorAll() #script document.all #script CSS selectors #get Selector