javascript servlet 5.JS基础交互

5.1 获取标签

5.1.1通过id获取标签(元素)

语法:document.getElementByid("id名") 作用:通过id名获取标签，可以获取到具体的某一个

       

• 泡面

       

• 米饭

       

• 尼古拉斯赵四

   

5.1.2通过类名获取标签(元素)

document.getElementsByClassName("类名")

作用:获取整个文档下对应的类名标签 获取集合中某一个具体的标签：集合[下标/序号]

       

• 这是li标签1

       

• 这是li标签2

       

• 这是li标签3

       

• 这是li标签4

​

   

父元素.getElementsByClassName("类名")

作用:获取该父元素下对应的类名标签

       

• 这是li标签1

       

• 这是li标签2

       

• 这是li标签3

       

• 这是li标签4

   

5.1.3通过标签名获取标签(元素)

document.getElementsByTagName("标签名")

获取整个文档下对应的标签名 获取到的是一个集合

       

•            

  这是li列表

         

       

•            

  这是li列表

         

       

•            

  这是li列表

         

   

父元素.getElementsByTagName("标签名")

获取该父元素下对应的标签

  //   2.父元素.getElementsByTagName("标签名") 获取该父元素下对应的标签

       var father = document.getElementById("wrap");

       var child = father.getElementsByTagName("div");

       console.log(child);//HTMLCollection(3)

==注意：通过类名和标签名获取拿到的都是一个集合，都需要通过集合名[下标]来获取具体某一个标签==

5.2 鼠标事件

==注意:onmouseover和onmouseenter及onmouseout和onmouseleave的区别放在事件冒泡讲==

onclick : 点击事件

ondblclick:鼠标双击

onmouseover/onmouseenter :  鼠标移入事件

onmouseout/onmouseleave:  鼠标移出事件

onmousemove :  鼠标移动事件

onmousedown :  鼠标按下

onmouseup   :  鼠标抬起

oncontextmenu: 鼠标右键显示菜单

语法 标签.事件类型 = function(){

 执行某个动作之后  要执行的逻辑代码

}

好文阅读

 您阅读本篇文章共花了：