原生js选择器或者选择元素或者选择方式

最新推荐文章于 2024-05-24 00:34:26 发布

qq_42331499

最新推荐文章于 2024-05-24 00:34:26 发布

阅读量2.2k

点赞数 1

文章标签： html javascript html5

本文链接：https://blog.csdn.net/qq_42331499/article/details/120447313

版权

包括但不限于，作者水平有限，如有不足，请评论指出

第一种，已有元素，且元素id为01

var aa = document.getElementById("01");

第二种，已有元素，id已有，使用变量选择

var number01 = 3;

var aa = document.getElementById(number01)

第三种，选择所有某一标签的所有元素，比如div

var aa_array = document.querySelectorAll("div")

遍历方式

for(var i =0;i <aa_array.length; i++){

console.log(aa_array[i])

}

第四种，选择带有某一类的所有元素,比如类名为monster

var aa_array = document.querySelectorAll(".monster")

遍历方式

for(var i =0;i <aa_array.length; i++){

console.log(aa_array[i])

}

第五种, 比如标签div

var aa_array = document.getElementsByTagName("div")

第六种通过类名选择,比如类名为aa

var aa_array = document.getElementsByClassName("aa")

此方法和querySelectorAll()方法有区别，如果是想要遍历，就是用querySelectorAll();

第七种通过name属性来选择，比如name为jack

var aa_array = document.getElementsByName("jack")

遍历方式

for(var i =0;i <aa_array.length; i++){

console.log(aa_array[i])

}

第八种，使用querySelector

获取第一个span标签

document.querySelector("span");

获取第一个class=tank的元素

document.querySelector(".tank");

第九种结果内选择，比如选择具有某类名，比如class=tank,且带有某一属性的元素，比如属性值为my_make

var all_tank_array = document.querySelectorAll(".tank")
   var all_tank_my_make=[];
   for(var a = 0;a <all_tank_array.length; a++){
       if(all_tank_array[a].getAttribute("tank") =="my_make"){
           all_tank_my_make.push(all_tank_array[a]);
       }
   }

第十种选择某一个标签内的子元素

<body>

<ul id="ul01">
   <li>你好</li>
   <li>我好好</li>
   <li>大家好</li>
   <li>都好</li>
</ul>
<button οnclick="submit02()">提交评论</button>
<script type="text/javascript">
   function submit02() {

var list = document.querySelectorAll("ul li");
   console.log(list);

//这里，长度是4，没有选到ul之外的li

for(var i =0;i <list.length;i++){
   list[i].parentNode.removeChild( list[i] );
   console.log(i);
}

console.log(list);

}

</script>

第十一种，选择某一id下的某一个标签

var list = document.getElementById("ul01").getElementsByTagName("li");

qq_42331499

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
原生js选择器或者选择元素或者选择方式

第一种，已有元素，且元素id为01var aa = document.getElementById("01");第二种，已有元素var number01 = 3;var aa = document.getElementById(number01);第三种，选择所有某一标签的所有元素，比如divvar aa_array = document.querySelectorAll("div");第四种，选择带有某一类的所有元素元素比如类名为monstervar aa_array =
复制链接

扫一扫