前端学习笔记-JS-DOM-操作元素

操作元素

JavaScript可以改变网页内容、结构和样式，我们可以利用DOM操作元素来改变元素里面的内容、属性等。

 

改变元素内容

element.innerText

    
    
    


点击显示当前时间
13

• 从起始位置到终止位置的内容，但它去除Html标签，同时空格和换行也会去掉
• innerText不识别HTML标签
• 可读写的，可以获取元素里面的内容

element.innerHTML W3C推荐使用

• 从起始位置到终止位置的全部内容，包括Html标签，同时保留空格和换行
• 能识别HTML标签
• 可读写的，可以获取元素里面的内容

 

修改元素属性

常用元素的属性操作

    
    
    


小糸侑
七海灯子

 

修改表单属性

请点击

案例：仿京东显示密码，点击按钮将密码框显示为文本框，并可以查看密码明文

算法：利用一个flag变量，如果是1就切换为文本框，如果是0就切换为密码框

 

修改样式属性

element.style

行内样式操作，修改元素样式，如果样式比较少或者功能简单的情况下使用 注意：

• 里面的属性是驼峰命名法
• JS修改的是行内样式，权重比CSS的高

 

表单事件

• 获得焦点 onfocus
• 失去焦点 onblur

 

element.className

类名样式操作，适合样式比较多的情况下使用，修改了元素的类名

注意：这个方法直接修改了类名，也就是说会覆盖原来的类名

 

 

操作元素小总结

 

排他思想（算法）

两层循环，先排除其他人，然后再设置自己的样式

    
    
    
    



    按钮1
    按钮2
    按钮3
    按钮4
    按钮5
    

 

案例：百度换肤效果

分析：

• 利用循环给一组元素注册点击事件
• 当鼠标经过一张图片，当前的页面背景换成经过的图片，鼠标移开之后，换回默认的
• 当点击了图片，当前的页面背景换成点击的图片
• 核心算法：把当前图片的src路径取过来，给body作为背景

 

案例： 表单全选取消全选

    
    
    




    

        

            

                

                    

                        
                    
                    
商品
                    
价钱
                
            
            

                

                    

                        
                    
                    
iPhone8
                    
8000
                
                

                    

                        
                    
                    
iPad Pro
                    
5000
                
                

                    

                        
                    
                    
iPad Air
                    
2000
                
                

                    

                        
                    
                    
Apple Watch
                    
2000
                

            
        
    
    

 

获取属性值

• element.属性 获取内置属性值（元素自带的属性）
• element.getAttribute('属性') 主要获取自定义的属性（标准），我们定义的属性

设置属性值

• element.属性 = '值'；
• element.setAttribute('属性', '值') 主要更改自定义的属性

移除属性值

• element.removeAttribute('属性') 主要移除自定义的属性（标准）

 

Tab切换案例

分析：

• 一个大盒子，里面上下两个小盒子
• 上面的模块，点击某一个之后，这个的背景色是红色，其余的是灰色（排他思想）
• 点击某一个之后，显示这个模块对应的内容，其他的隐藏，这个要写到点击事件里面
• 下面的显示内容和上面的小 li 一一对应
• 核心思路：
  • 给上面的tab_list 添加自定义属性，属性号从0开始
  • 当点击上面的模块，下面对应的模块开始显示，其他的隐藏

    
    
    
    
    



    

        

            

                
商品介绍
                
规格与包装
                
售后保障
                
商品评价（50000）
                
手机社区
            
        
        

            

                商品介绍模块内容
            
            

                规格与包装模块内容
            
            

                售后保障模块内容
            
            

                商品评价（50000）模块内容
            
            

                手机社区模块内容
            

        
    
    

 

自定义属性

自定义属性目的：为了保存并使用数据，有些数据保存到页面中，为不是数据库中

设置自定义属性

但是有些自定义属性容易引以歧义，不容易判断是内置属性还是自定义属性，所以H5给我们新增了自定义属性 H5规定自定义属性以 “data-” 开头

获取H5自定义属性

• 兼容性：element.getAttribute('属性')     建议使用
• H5新增：element.dataset.index 或者 element.dataset[ 'index' ]