Dom
文档对象模型
- DOM操作：JS调用浏览器提供的一系列接口的操作
DOM树
获取对象的方式
-
document.querySelector
- 获取第一个满足条件的DOM对象，能直接对元素对象进行操作
- 例： let head = document.querySelector('.head')
-
document.querySelectorAll
- 获取的是满足条件的所有DOM对象，获取的是伪数组，不能直接操作，必须通过下标或者循环遍历的方式获取到元素对象才能进行操作
- 数组只有一个属性length
- 例： let span = document.querySelectorAll('span')
- 拓展：伪数组不是真正的数组，不能使用map,filter循环遍历，只能使用for,forEach遍历
-
其他了解
- document.getElementById()
- document.getElementsByTagName()
- document.getElementsByClassName()
-
获取子代选择器的两种方法
-
在控制台查看内置对象
- console.dir()
设置/修改元素内容
-
DOM对象都是根据标签生成的,所以操作标签,本质上就是操作DOM对象.
-
有=号是赋值，没有就是取值
-
赋值（或覆盖）内容
-
document.write()
- 只能追加到body中 已废弃
-
innerText
- 只关注内容, 不关注标签。不解析内容中的标签结构，会把标签当成内容原样输出，开发常用
- span.innerText = '传智播客中心'
-
innerHTML
- 能解析内容中的标签结构，有网页结构再用
- span.innerHTML = '传智播客中心'
-
-
取值
-
innerText
- 获取标签之间的文本内容，标签会被忽略
- console.log(h2.innerText)
-
innerHTML
- 获取标签之间所有内容包括标签
- console.log(h2.innerHTML)
-
-
-
使用: 不明确数据的安全性的情况下, 使用innerText
- 因为以后开发可能有人会利用标签破坏代码的完整性
设置/修改元素属性
-
设置/修改元素样式属性
-
style操作css
-
每一个DOM对象都有一个style属性,style属性的值是一个对象，里面存储了所有行内样式对应的键值对。
- style属性只能获取和设置行内样式，在类样式中定义的样式通过style获取不到。
-
命名： 这里有两种动态设置样式的方法，是因为之前学过查找对象有两种方式 （对象名.属性名）&&（对象名['属性名']）
-
驼峰命名法，div.style.backgroundColor （因为-在js中-会被解析成减号）
-
对象['完整样式名']， 如：h2['text-decoration']
- 而且以后开发中，['color'] == [变量]，大部分会改成变量，这里一定要懂
-
-
-
操作类名(className)
- 由于class是关键字, 所以使用className去代替
- className是使用新类名替换（覆盖）所有旧类名, 无论原标签有多少个类名，都会进行覆盖，太高强硬，开发几乎不用！
-
classList
-
添加：add(class1, class2, ...)
- 新增一个新的类名，不影响该标签之前原有的类名
- 例： p.classList.add('size50', 'underline')
-
删除：remove(class1, class2, ...)
- 移除指定名称的类名，不影响该标签其他的类名
- 例： p.classList.remove('size50')
-
切换：toggle(class)
- 切换元素的类名，像一个if分支一样，有这个类名就移除，没有则添加
- 例： p.classList.toggle('size50')
-
包含：contains(class)
- 判断当前元素是否包含某个指定名称的样式，如果有则返回true，如果没有 则返回false
- 例： p.classList.contains('size50')
-
-
对比className和style、classList的区别
- 修改大量样式的更方便
- 修改不多样式的时候方便
- classList 是追加和删除不影响以前类名
-
定时器
-
作用：每隔一段时间重复做一个事情
-
setInterval(执行的函数，时间间隔)
-
清除浮动
- clearInterval(‘句柄’)
事件监听
-
事件：用户操作所触发的行为
-
dom.addEventListener(事件类型，处理函数)
- 总结：我们只是传递一个当事件触发之后的处理函数，但是函数并不是开发者直接调用的，而是事件处理机制监听到事件触发之后再调用的
-
常见事件类型
-
鼠标事件
- click:单击事件
- mouseenter:鼠标进入，当鼠标进入到该元素的范围就会自动触发
- mouseleave:鼠标离开，鼠标离开该元素的范围就会自动触发
-
键盘事件
- keydown:键按下时自动触发
- keyup:键松开时自动触发
-
表单事件
-
input:文本输入框内容变化所触发的事件，只要内容变化就会触发
-
fcous:文本框聚焦事件，文本框获取焦点，焦点就是光标点
-
blur:文本框的失焦事件，只要失焦就会触发，不关注内容是否变化
-
change:文本框失焦事件，前提是内容改变了
-
-
文件事件
-
change:对于表单元素file而言，它 是用户选择好文件之后触发
-
-
综合案例
点击按钮随机切换背景图片
单击按钮随机显示图片
密码框的显示与隐藏
-
效果1
- 效果2
实现全选和取消全选
- 效果1
- 效果2
获取验证码倒计时
随机点名：
轮播图案例
小米下拉框内容显示和隐藏
- 效果1
- 效果2
