包括但不限于,作者水平有限,如有不足,请评论指出
第一种,已有元素,且元素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>
<li></li>
<li></li>
<li></li>
<li></li>
<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下的某一个标签
<ul id="ul01">
<li>你好</li>
<li>我好好</li>
<li>大家好</li>
<li>都好</li>
</ul>
var list = document.getElementById("ul01").getElementsByTagName("li");