关于选择器(很早之前写的)

<div class="kaishi" id="aa">1</div>
<a href="" id="ab">2</a>
<div id="ac" name="nihao">
<div>a</div>
<div>b</div>
<div>c</div>
<div>d</div>
<div>e</div>
</div>
<script type="text/javascript">
// 获取元素
var a=document.getElementById("aa") //用id获取
console.log(a)
var b=document.getElementsByClassName("kaishi")//这个获取的是一个类数组类对象 因为是个数组所以获取元素的时候要加下标号0
console.log(b[0])
var c=document.getElementsByName("nihao")//这个不经常用 必须属性叫name 通过取它的值才能获取到元素 必须也要加下标0跟上面那个一样解释
console.log(c[0])


// 接下来这两个一般是配合用的 下面主要是针对id名字是ac的那个盒子
var d=document.getElementById("ac") //这个获取的是父级及其下的所有子集元素 但是并不能干什么
console.log(d)
var e=d.getElementsByTagName("div")//这个获取的就是notelist 节点数组 以节点数组名称显示 你看下面的打印
console.log(e)
//上面这两个是最好用的也是最实用的 我在路上跟你说过这个 这个时候就可以体验for的方便了 我给你写一个for的 就跟上面这两个有关
var arr=["red","blue","black","yellow","pink"]
for(var i=0;i<e.length;i++){
e[i].style.background=arr[i]
}//动态添加属性

var h=document.querySelector(".kaishi") //路上跟你说的那个H5特别好用的一个js选择器
var h1=document.querySelector("#aa") //路上跟你说的那个H5特别好用的一个js选择器
console.log(h)
console.log(h1)

</script>

posted @ 2018-03-16 17:40  子元君  阅读(97)  评论(0编辑  收藏  举报