DOM（个人学习笔记总结）

忙着可爱ヾ

已于 2023-07-08 10:26:45 修改

阅读量117

点赞数

分类专栏：个人笔记文章标签：学习笔记 javascript 前端

于 2023-07-06 09:36:30 首次发布

本文链接：https://blog.csdn.net/m0_52781394/article/details/131568834

版权

个人笔记专栏收录该内容

2 篇文章 0 订阅

订阅专栏

DOM

个人学习笔记总结

一. 总结

1. 定义

DOM（文档对象模型），编程接口，通过DOM接口可以改变网页的内容、结构和样式

使JavaScript操作HTML

使HTML形成一颗DOM树（文档、元素、节点）

2. 操作

创建
- document.write
- document.createElement
- innerHTML
增
- appendChild
- insertBefore
删
- removeChild
改
- 元素内容：innerHTML、innerText
- 元素属性：.属性 [src、href、title]
- 表单元素：value、type、disabled
- 元素样式：style、classList
查
- H5新：querySelector、querySelectorAll
- 通过节点：父（parentNode）、子（children）、兄（previousElementSibling、nextElementSibling，有兼容性问题）
属性操作
- 自定义属性：setAttribute、getAttribute、removeAttribute
事件操作
- 鼠标事件：click、mouseenter、mouseleave、mousemove、mouseup、mousedown
- 焦点事件：focus、blur
- 键盘事件：keydown、keyup
- 表单输入：input

3. 事件高级

1. DOM事件流

事件流：DOM传播的过程

三个阶段：捕获阶段（自上而下）、当前目标阶段、冒泡阶段（自下而上）

在这里插入图片描述

2. 事件对象

”event“：事件一系列相关数据的集合

3. event.target 和 this 的区别

event.target：谁点击指向谁，有兼容性问题（ie678不可用）

this ：谁绑定事件，指向谁

<body>
  <ul>
    <li>1</li>
    <li>2</li>
    <li>3</li>
  </ul>
</body>
<script>
  let ul = document.querySelector('ul')
  ul.addEventListener('click',function(e){
    //1.this：谁绑定，指向谁
    console.log(this)//ul
    //2.e.target：谁触发，指向谁
    //问：为什么可以触发ul绑定的事件？  由于冒泡事件，所以先触发li，后触发ul
    console.log(e.target)//li
  })
</script>

4. 阻止冒泡事件

event.stopPropagation()

5. 事件委托

原理：若有多个子节点需要事件监听器，并不是为其都设置事件监听器，而是为其父节点设置，然后利用冒泡原理设置每个子节点

6. 鼠标事件对象

e.clientX：相对于浏览器窗口
e.clientY：
e.pageX：相对于文档页面
e.pageY
e.screenX：相对于电脑屏幕
e.screenY

二. 实践

1. 一键换肤

描述：网页中一键换肤，换背景颜色或图片

   let imgs = document.querySelectorAll('img')
   for(let i = 0;i<imgs.length;i++){
    imgs[i].addEventListener('click',function(){
      document.body.style.backgroundImage = 'url(./'+(i+1)+'.jpg)'
    })
   }

2. 表格变色

描述：鼠标扫过表格中的某一行数据变色，更加醒目

   let tds = document.querySelectorAll('td')
   for(let i = 0;i<tds.length;i++){
    tds[i].addEventListener('mouseenter',function(){
      tds[i].classList.add('active')
    })
    tds[i].addEventListener('mouseleave',function(){
      console.log(i)
      tds[i].classList.remove('active')
    })
   }

在这里插入图片描述

3. 评论

描述：发布评论，下方显示出内容，从开始插入

  let text = document.querySelector('textarea')
  let button = document.querySelector('button')
  let ul = document.querySelector('ul')

  button.addEventListener('click',function(){
    if(text.value==''){
      alert('您还没有输入内容')
    }else{
      //创建节点
      let li = document.createElement('li')
      li.innerHTML = text.value
      //添加节点到父节点第一个子节点上
      ul.insertBefore(li,ul.children[0]) 
    }
  })

在这里插入图片描述

4. 根据数据动态创建表格

描述：有一组数据，但不知道具体几行几列，动态创建表格并将数据插入到表格中

<body>
  <table border>
    <thead style="background-color: rgb(185, 185, 185);">
      <th>name</th>
      <th>sex</th>
      <th>grade</th>
      <th>class</th>
      <th>操作</th>
    </thead>
    <tbody></tbody>
  </table>
</body>
<script>
  let datas = [{
    name:'Amy',
    sex:'女',
    grade:1,
    class:1
  },{
    name:'Mike',
    sex:'男',
    grade:3,
    class:2
  },{
    name:'John',
    sex:'男',
    grade:1,
    class:1
  },{
    name:'Sarah',
    sex:'女',
    grade:2,
    class:3
  }]
  
  let tbody = document.querySelector('tbody')
  
  for(let i = 0;i < datas.length;i++){
    let tr = document.createElement('tr')
    tbody.appendChild(tr)
    for (const k in datas[i]) {
      let td = document.createElement('td')
      td.innerHTML = datas[i][k]
      tr.appendChild(td)
    }
    let td = document.createElement('td')
    td.innerHTML = '<a href="javascript:;">删除</a>'
    tr.appendChild(td)
  }

  let a = document.querySelectorAll('a')
  for(let i = 0;i<a.length;i++){
    a[i].addEventListener('click',function(){
    tbody.removeChild(this.parentNode.parentNode)
  })
  }
  
</script>

在这里插入图片描述

5. 跟随鼠标的东西

描述：鼠标移动时，有一个图标跟随鼠标

  let img = document.querySelector('img')
  let mouse = document.addEventListener('mousemove',function(e){
    //相对于文档页面
    let x = e.pageX;
    let y = e.pageY;
    img.style.top = y + 'px'
    img.style.left = x + 'px'
  })