✍ 📁 🙈 🙉 🙊 : querySelectorAll

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

<pre><b>document.all </b>
<span id="dp1"></span>
<span id="dp"></span>
</pre>

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>

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

<pre><b>document.querySelectorAll(CSS selectors) </b>

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>

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

dp.innerHTML= txt ;
</script>

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

dp.innerHTML= txt ;
</script>

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

dp.innerHTML= txt ;
</script>

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

dp.innerHTML= txt ;
</script>

Edit

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

✍ 📁 🙈 🙉 🙊

window Resize

html 測試左入右出

html 測試上入下出

html 測試單入單出

html 測試左單右單