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