一,简介
DOM: Document Object Model
- 文档对象模型: HTML文档 转化成 JS的document对象
- 学习DOM 就是学习操作 document 对象, 利用JS操作页面内容
如何查找元素:
- 关系
- 父: parentElement
- 子: children
- 兄: 上一个兄弟元素 previousElementSibling
- 弟: 下一个兄弟元素 nextElementSibling
- 特征
- id: 通过唯一标识查找 getElementById
- css选择器
- 单个: querySelector
- 批量: querySelectorAll
操作元素的属性
-
事件: 都是 on 开头
- onclick: 点击
- onmouseover: 鼠标悬浮
-
样式
- className: 样式类的名字
- classList: 对 className 封装后得到的
- style: 内联样式 - 优先级最高
- 计算后的样式: getComputedStyle
-
属性操作
-
系统属性: 直接用点语法操作
-
自定义属性:
- 旧: 随便书写, 需要使用
getAttribute
和setAttribute
来操作 - 新: 用
data-
做开头, 保存在 元素的dataset
属性里, 以 小驼峰命名法 命名
<tr> <td>1</td> <td>可乐</td> <td data-price="3.8" class='td-price'>¥3.8</td> </tr> <script> //使用 let d = document.querySelector('td-price') let data = d.dataset.price </script>
- 旧: 随便书写, 需要使用
-
二,事件
1,表单事件
//
let inp = document.querySelector('[type=text]')
// 获取焦点 focus
inp.onfocus = function () {
console.log('focus: 获得焦点')
}
// 失去焦点 blur
inp.onblur = function () {
console.log('blur: 失去焦点');
}
// 值变化 change
inp.onchange = function () {
// 表单元素的值 都是value属性存储
console.log('change: 值变化', this.value)
}
// 值实时变更 input
inp.oninput = function () {
console.log('input实时:', this.value);
}
2,键盘事件
// 键盘事件 keyup -- 按键抬起
// 事件参数: 由系统触发的所有事件, 默认都会受到一个实参, 包含当前事件所有的信息
// 习惯形参名: e 全称:event, 用于存储事件参数
inp.onkeyup = function (e) {
// console.log(arguments)
console.log(e)
// keyCode属性: 代表按键的编号
// 回车的编号是 13
console.log('keyup 按键抬起')
if (e.keyCode == 13) alert("回车被点击!")
}
3,事件冒泡
事件冒泡: 当元素上触发一个事件后, 会传递给父元素触发相同的事件
当事元素: 触发事件的第一元素, 存储在事件参数的 target 属性中
阻止冒泡机制:propagation: 传播
//触发事件元素
e.target
//阻止事件冒泡
e.stopPropagation()
3.1 事件委托
因为事件冒泡机制的存在,我们可以利用这种机制,将原本需要绑定在子元素上的事件,绑定在其父级上。
事件委托: 把自身的事件处理操作 委托 给祖先元素处理
3.2 动态新增子元素
通过动态新增的的子元素,需要实时为其添加样式类名,如果使用forEach遍历的方法,则需要在每一次新元素创建时,重新遍历一次
btn.onclick = function (e) {
ul.innerHTML += '<li>新元素</li>'
//遍历方式
let items = document.querySelectorAll('li')
console.log(items);
items.forEach(item => {
item.onclick = function () {
items.forEach(item => item.classList.remove('active'))
item.classList.add('active')
}
})
}
如果采用事件委托方法去添加,则不必这么麻烦,只需要在创建好所有子元素之后,调用父元素事件,就可以为所有新创建的子元素增加样式名
//事件委托
ul.onclick = function (e) {
if (e.target.localName == 'li') {
e.target.classList.add('active')
}
}
4,事件监听
在团队开发过程中,多人协作开发,对同一事件是需要反复调用,这时候如果不加以控制,则会导致后调用事件,覆盖前面的事件,导致程序无法正常进行。因此,在开发过程中,需要使用事件监听器
addEventListener(事件名(不带on), 方法)
btn.addEventListener('click', function () {
console.log(33)
})
监听窗口滚动事件
// 窗口的滚动:
// scroll: 滚动事件
window.addEventListener('scroll', function () {
// 读取页面滚动距离:
console.log('滚动距离:', pageYOffset);
}
三,创建DOM元素
传统的开发方式: 书写HTML代码, 浏览器自动把HTML代码转换成 document 对象, 然后渲染到浏览器上
优势: HTML更简单易读 易写
缺点: 需要浏览器消耗一定的性能进行解析
另一种方案: 直接书写 DOM 代码, 放弃HTML
优点: 性能提高, 省略浏览器的解析过程
缺点: 书写较难
// 万能的创建元素的方法: createElement(标签名)
const btn = document.createElement('button')