首页 - 互联网

JavaScript选择器

作者: 五速梦信息网
时间: 2026年04月04日 13:37

Js选择器

getElementById()getElementsByClassName()getElementsByName()getElementsByTagName()querySelector()querySelectorAll()

getElementById

ididHTMLDivElement

&lt;div id=“t1”&gt;T1&lt;/div&gt;
&lt;script type=“text/javascript”&gt;


var t1 = document.getElementById(&#34;t1&#34;);<br/>
console.log(t1); // &lt;div id=&#34;t1&#34;&gt;D1&lt;/div&gt;<br/>
console.log(Object.prototype.toString.call(t1)); // [object HTMLDivElement]<br/>


&lt;/script&gt;

getElementsByClassName

classclassHTMLCollection

&lt;div class=“t2”&gt;D2&lt;/div&gt;

&lt;div class=“t2”&gt;D3&lt;/div&gt;
&lt;script type=“text/javascript”&gt;


var t2List = document.getElementsByClassName(&#34;t2&#34;);<br/>
console.log(t2List); // HTMLCollection(2) [div.t2, div.t2]<br/>
// 使用for循环遍历<br/>
for(let i=0,n=t2List.length;i&lt;n;++i) console.log(t2List[i]);<br/>
// HTMLCollection的prototype中没有forEach方法，遍历需要使用Array的prototype中forEach通过call绑定对象实例并传参<br/>
Array.prototype.forEach.call(t2List,v =&gt; console.log(v) );<br/>
// HTMLCollection的prototype中没有map方法，也需要使用Array的prototype中forEach通过call绑定对象实例并传参<br/>
Array.prototype.map.call(t2List,v =&gt; console.log(v) );<br/>


&lt;/script&gt;

getElementsByName

namenameNodeList

&lt;div name=“t3”&gt;D4&lt;/div&gt;

&lt;div name=“t3”&gt;D5&lt;/div&gt;
&lt;script type=“text/javascript”&gt;


var t3List = document.getElementsByName(&#34;t3&#34;);<br/>
console.log(t3List); // NodeList(2) [div, div]<br/>
// 可直接使用forEach进行遍历<br/>
t3List.forEach( v =&gt; console.log(v) );<br/>
// NodeList的prototype中没有map方法，使用map的场景也需要借助Array的prototype中map通过call绑定对象实例并传参<br/>
Array.prototype.map.call(t3List,v =&gt; console.log(v) );<br/>


&lt;/script&gt;

getElementsByTagName

HTMLCollection

&lt;p class=“t4”&gt;P6&lt;/p&gt;

&lt;p class=“t4”&gt;P7&lt;/p&gt;
&lt;script type=“text/javascript”&gt;


var t4List = document.getElementsByTagName(&#34;p&#34;);<br/>
console.log(t4List); // HTMLCollection(2) [p, p]<br/>
Array.prototype.forEach.call(t4List, function(v){console.log(v);});<br/>
Array.prototype.map.call(t4List,function(v){console.log(v);} );<br/>


&lt;/script&gt;

querySelector

CSSCSSHTMLDivElement

&lt;div&gt;


&lt;div class=&#34;t5&#34;&gt;D8&lt;/div&gt;<br/>


&lt;/div&gt;
&lt;script type=“text/javascript”&gt;


var t5 = document.querySelector(&#34;div .t5&#34;);<br/>
console.log(t5); // &lt;div class=&#34;t5&#34;&gt;D8&lt;/div&gt;<br/>
console.log(Object.prototype.toString.call(t5)); // [object HTMLDivElement]<br/>


&lt;/script&gt;

querySelectorAll

CSSCSSNodeList

&lt;div&gt;


&lt;div id=&#34;t6&#34;&gt;D9&lt;/div&gt;<br/>
&lt;div&gt;D10&lt;/div&gt;<br/>
&lt;div&gt;D11&lt;/div&gt;<br/>


&lt;/div&gt;
&lt;script type=“text/javascript”&gt;


 var t6List = document.querySelectorAll(&#34;#t6 ~ div&#34;);<br/>
console.log(t6List); // NodeList(2)[div, div]<br/>
t6List.forEach(function(v){console.log(v);});<br/>
Array.prototype.map.call(t6List,function(v){console.log(v);} );<br/>


&lt;/script&gt;

代码示例

&lt;!DOCTYPE html&gt;

&lt;html&gt;

&lt;head&gt;


&lt;title&gt;Js选择器&lt;/title&gt;<br/>
&lt;meta charset=&#34;utf-8&#34;&gt;<br/>


&lt;/head&gt;

&lt;body&gt;
&lt;div id=“t1”&gt;D1&lt;/div&gt;
&lt;div class=“t2”&gt;D2&lt;/div&gt;


&lt;div class=&#34;t2&#34;&gt;D3&lt;/div&gt;


&lt;div name=“t3”&gt;D4&lt;/div&gt;


&lt;div name=&#34;t3&#34;&gt;D5&lt;/div&gt;


&lt;p class=“t4”&gt;P6&lt;/p&gt;


&lt;p class=&#34;t4&#34;&gt;P7&lt;/p&gt;


&lt;div&gt;


    &lt;div class=&#34;t5&#34;&gt;D8&lt;/div&gt;<br/>
&lt;/div&gt;


&lt;div&gt;


    &lt;div id=&#34;t6&#34;&gt;D9&lt;/div&gt;<br/>
    &lt;div&gt;D10&lt;/div&gt;<br/>
    &lt;div&gt;D11&lt;/div&gt;<br/>
&lt;/div&gt;


&lt;/body&gt;

&lt;script type=“text/javascript”&gt;


var t1 = document.getElementById(&#34;t1&#34;);<br/>
console.log(t1); // &lt;div id=&#34;t1&#34;&gt;D1&lt;/div&gt;<br/>
console.log(Object.prototype.toString.call(t1)); // [object HTMLDivElement]<br/>
console.log(&#34;&#34;);


var t2List = document.getElementsByClassName(“t2”);


console.log(t2List); // HTMLCollection(2) [div.t2, div.t2]<br/>
// 使用for循环遍历<br/>
for(let i=0,n=t2List.length;i&lt;n;++i) console.log(t2List[i]);<br/>
// HTMLCollection的prototype中没有forEach方法，遍历需要使用Array的prototype中forEach通过call绑定对象实例并传参<br/>
Array.prototype.forEach.call(t2List,v =&gt; console.log(v) );<br/>
// HTMLCollection的prototype中没有map方法，也需要使用Array的prototype中forEach通过call绑定对象实例并传参<br/>
Array.prototype.map.call(t2List,v =&gt; console.log(v) );<br/>
console.log(&#34;&#34;);


var t3List = document.getElementsByName(“t3”);


console.log(t3List); // NodeList(2) [div, div]<br/>
// 可直接使用forEach进行遍历<br/>
t3List.forEach( v =&gt; console.log(v) );<br/>
// NodeList的prototype中没有map方法，使用map的场景也需要借助Array的prototype中map通过call绑定对象实例并传参<br/>
Array.prototype.map.call(t3List,v =&gt; console.log(v) );<br/>
console.log(&#34;&#34;);


var t4List = document.getElementsByTagName(“p”);


console.log(t4List); // HTMLCollection(2) [p, p]<br/>
Array.prototype.forEach.call(t4List, function(v){console.log(v);});<br/>
Array.prototype.map.call(t4List,function(v){console.log(v);} );<br/>
console.log(&#34;&#34;);


var t5 = document.querySelector(“div &gt; .t5”);


console.log(t5); // &lt;div class=&#34;t5&#34;&gt;D8&lt;/div&gt;<br/>
console.log(Object.prototype.toString.call(t5)); // [object HTMLDivElement]<br/>
console.log(&#34;&#34;);


var t6List = document.querySelectorAll(“#t6 ~ div”);


console.log(t6List); // NodeList(2) [div, div]<br/>
t6List.forEach(function(v){console.log(v);});<br/>
Array.prototype.map.call(t6List,function(v){console.log(v);} );<br/>
console.log(&#34;&#34;);<br/>


&lt;/script&gt;

&lt;/html&gt;

每日一题

https://github.com/WindrunnerMax/EveryDay

参考

数组的遍历 https://github.com/WindrunnerMax/EveryDay/blob/master/JavaScript/Js%E9%81%8D%E5%8E%86%E6%95%B0%E7%BB%84%E6%80%BB%E7%BB%93.md

ES6箭头函数 https://github.com/WindrunnerMax/EveryDay/blob/master/JavaScript/ES6%E6%96%B0%E7%89%B9%E6%80%A7.md

原型与原型链 https://github.com/WindrunnerMax/EveryDay/blob/master/JavaScript/%E5%8E%9F%E5%9E%8B%E4%B8%8E%E5%8E%9F%E5%9E%8B%E9%93%BE.md

CSS选择器 https://github.com/WindrunnerMax/EveryDay/blob/master/CSS/CSS%E9%80%89%E6%8B%A9%E5%99%A8.md