【2017-03-30】JS document对象

一、获取标记对象

1.   html中查找标记对象：class ，id ，标签

document获取标记对象

（1）id：            document.getElementById("元素id");                         根据id只能找到一个元素对象（html的id不会重复）

（2）class：        document.getElementsByClassName("class名称");      根据class找到一个数组数据

（3）标签名：      document.getElementsByTagName("标签名")              根据标签：div/input/span等。找到的是一个数组数据

（4）name名：    document.getElementsByName("name名");                根据name来查找，找到一个数组数据

2.   将找到的数据放到变量中：

var a=document.getElementById("元素id")；                                       该类型只有一个值，操作时直接使用a

var a=documenr.getElementByClassName("class名称");                        该类型是一个数组，对数组内的单个元素操作使用for循环：a[i]

 

二、三个常用事件

1.点击事件onclick

a.onclick=function(){}

2.鼠标移入事件onmouseover

a.onmouseover=function(){}

3.鼠标移出事件onmouseout

a.onmouseout=function(){}

 

要给数组赋上事件必须进行循环：

var  arr =document.getElementsByClassName("div1");

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

{

   arr[i].onclick=function(){

     this.style.backgroundColor="blue";                   

    }

}

 三、控制标记的样式

1.元素标记.style.样式=“值”；

var a =document.getElementById("btn1");

a.onclick=function(){

a.style.backgroundColor="red";

}

js中background-color写作backgroungColor,样式里带“-”的，要将“-”去掉，并且将其之后一个字母变成大写

2.在对数组数据for循环遍历时，第一个元素是a[0]

要对某个元素的进行标记样式操作时，可用this来当做要抽取对象

3.在js里对象的index属性，可以记录一个int类型的值