web学习笔记21-DOM

一，简介

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')