YPE html>

graph TD
A[JS]
A -->|JS语法| D[ECMAScript]
A -->|页面文档对象模型| E[DOM]
A -->|浏览器对象模型| F[BOM]

123一二三四五

123上山打老虎

123老虎有几只

123快来数一数

123一二三四五

getElementsByClassName()

类名选择器

querySelector()

HTML5新增的

返回指定选择器的第一个对象

15212

1641238











151232

1612348

querySelectorAll()

返回指定选择器的所有对象集合 用法和querySelector()一样

document.body

获取body元素

document.documentElement

获取html元素

事件基础

JavaScript使我们有能力创建动态页面，而事件是可以被JavaScript侦测到的行为。 网页中的每个元素都可以产生某些触发JavaScript的事件。

事件由三部分组成：

• 事件源 事件被触发的对象 比如按钮

• 事件类型 如何触发 比如鼠标点击、鼠标经过、键盘按下、滚动滚轮

• 事件处理程序 通过函数赋值的方式完成

按钮

事件都有：

操作元素

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

element.innerText

• 从起始位置到终止位置的内容，但它去除Html标签，同时空格和换行也会去掉

• innerText不识别HTML标签

• 可读写的，可以获取元素里面的内容

element.innerHTML

• 从起始位置到终止位置的全部内容，包括Html标签，同时保留空格和换行

• 能识别HTML标签

• 可读写的，可以获取元素里面的内容

修改表单属性

disabled 让某个表单被禁用，不能被点击， 用法：

btn.onclick = function () {
    btn.disabled = true;
    //或者写成下面这种
    this.disabled = true;
    //this指向的是时间函数的调用者
}

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

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

修改样式属性

element.style

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

• 里面的属性是驼峰命名法

• JS修改的是行内样式，权重比CSS的高

•  

element.className

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

注意：这个方法直接修改了类名，也就是说会覆盖原来的类名，原来的就不生效了 如果想要保留原先的类名，这样做：

//假设first 是原来的类名，change是想加入的
this.className = ‘first change‘;

表单事件

获得焦点 onfocus 失去焦点 onblur

案例：京东搜索框，默认是“手机”两个字，当用户点击搜索框的时候，“手机”两个字消失，当输入文本之后，保持文本内容不变

分析：

• 如果获得焦点，判断里面是否是默认文字，如果是默认文字，就清空表单内容

• 如果失去焦点，判断表单是否为空，如果为空，则表单内容改为默认文字

• 获得焦点的时候，把文本框里的文字变黑

• 失去焦点的时候，文本框文字变浅

案例：密码提示框，选中的时候提示密码的长度和标准，失去焦点的时候，检查密码是否合乎规范

分析：

• 如果获得焦点，提示密码的长度和标准

• 如果失去焦点，检查密码是否合乎规范，如果不符合规范，就提示

• 因为改变的样式比较多，所以用className来修改样式

    

    

    



    


        
        
请输入6~16位密码

    


    

操作元素小总结

graph LR
A[操作元素]  -->B[操作元素内容]
B  -->F[innerText]
B  -->G[innerHTML]
A[操作元素]  -->C[操作常见元素属性]
C -->H[src href title alt等 ]
A[操作元素]  -->D[操作表单元素属性]
D -->I[ type value disabled等]
A[操作元素]  -->E[操作元素样式属性]
E -->J[element.style]
E -->K[element.className]

排他思想

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

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

案例：百度换肤效果

分析：

• 利用循环给一组元素注册点击事件

• 当鼠标经过一张图片，当前的页面背景换成经过的图片，鼠标移开之后，换回默认的

• 当点击了图片，当前的页面背景换成点击的图片

• 核心算法：把当前图片的src路径取过来，给body作为背景

?


    

    

    

    

    

?

?

?
    


        


        


        


        


    


    

?

案例： 表单全选取消全选

分析：

• 点击上面全选复选框，下面所有的复选框都选中（全选）

• 再次点击全选复选框，下面所有的复选框都不中选（取消全选）

• 如果下面复选框全部选中，上面全选按钮就自动选中

• 如果下面复选框有一个没有选中，上面全选按钮就不选中

• 所有复选框一开始默认都没选中状态

• 下面复选框需要全部选中，上面全选才能选中做法：给下面所有复选框绑定点击事件，每次点击，都要循环查看下面所有的复选框是否有没选中的，如果有一个没选中的上面全选就不选中。

    

    

    

    

    



    
        
            
                
                
                
            
        
        
            
                
                
                
            
            
                
                
                
            
            
                
                
                
            
            
                
                
                         
            
        
    




商品
价格







iPhone Xs Max
10000




iPad Pro
5000




iWatch
3000




AirPods
1000






    

操作元素

获取属性值

• element.属性 获取内置属性值（元素自带的属性）

• element.getAttribute(‘属性‘) 主要获取自定义的属性（标准），我们定义的属性

设置属性值

• element.属性 = ‘值‘；

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

移除属性值

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

TAB案例 （重点）

分析：

• 一个大盒子，里面上下两个小盒子

• 上面的模块，点击某一个之后，这个的背景色是红色，其余的是灰色（排他思想）

• 点击某一个之后，显示这个模块对应的内容，其他的隐藏，这个要写到点击事件&a