DOM（一）元素获取和元素属性操作

目录

获取元素

常见的鼠标事件

自定义属性

案例练习

1.点击按钮显示当前时间

2.页面密码框点击眼睛显示密码功能

3.文本框获得焦点时，里面的默认文字隐藏，失去焦点时显示文字

4.简单表单信息验证

5.鼠标移入改变列表样式

6.tab切换，点击切换显示内容

7.全选按钮（多选框按钮选中时checked=true，反之为false）

---

获取元素

根据id获取元素：document.getElementById('id'); 获取到唯一一个元素。

根据标签名获取元素：document.getElementsByTagName('标签名');获取到所有相同标签名的元素，因此结果是一个集合，存储在伪数组中。

0
1
2

根据类名获取元素：document.getElementsByClassName('类名');获取所有同一类名的元素，结果存在伪数组中。

0
1
2

获取指定选择器的第一个元素：document.querySelector();

根据指定选择器返回所有元素：document.querySelectorAll();

box1
box2
box3

获取特殊元素： 

document.body     //返回body元素

document.documentElement   //返回HTML元素

---

常见的鼠标事件

onclick	鼠标点击左键触发
onmouseover	鼠标经过触发
onfocus	获得鼠标焦点触发
onblur	失去鼠标焦点触发
onmousemove	鼠标移动触发
onmouseup	鼠标弹起触发
onmousedown	鼠标按下触发

---

自定义属性

获取自定义属性：element.getAttribute('属性');

 修改自定义属性：element.setAttribute('属性','值'); 原本标签内没有的自定义属性也能直接添加。

 移除属性值：element.removeAttribute('属性');

---

案例练习

1.点击按钮显示当前时间

    当前时间
    

2.页面密码框点击眼睛显示密码功能

    

        密码
        
        
    
    

3.文本框获得焦点时，里面的默认文字隐藏，失去焦点时显示文字

4.简单表单信息验证

5.鼠标移入改变列表样式

    

        
不使云用个们太
        
不使云用个们太
        
不使云用个们太
        
不使云用个们太
        
不使云用个们太
        
不使云用个们太
    
    

6.tab切换，点击切换显示内容

    
    

        李的釜
        苟中向
        方失他
        对身措
    
    

        
苦保妄学求。
        
太明拿，论。
        
家元仁，没。
        
当找仍，他。
    
    

7.全选按钮（多选框按钮选中时checked=true，反之为false）

    

        
        全选/取消
    
    

        
 洪韩修
        
 帝交颜
        
 可杂云
        
 恼位变