AI 助理
备案控制台
开发者社区 开发与运维 文章 正文

JavaScript中的DOM操作

2024-01-25 79
版权
版权声明：
本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《 阿里云开发者社区用户服务协议》和 《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写 侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。
简介： JavaScript中的DOM操作

@TOC

点击获取案例

一、DOM基础

1、获取节点

节点类型

  • 元素节点：获取元素节点：querySelector；querySelectorAll
  • 属性节点：element.src；element.id
  • 文本节点：innerHTML

网页效果：操作元素节点、属性节点、文本节点，以及修改元素的样式

1、document.getElementsById返回值是一个DOM节点
let btns = document.getElementsById("title");

2、document.getElementsByClassName返回值是一个DOM节点的集合
let btns = document.getElementsByClassName("btn");

3、document.querySelector 获取单个节点
let h1 = document.querySelector("#title");

4、document.querySelectorAll获取多个节点
let h2 = document.querySelectorAll(".btn");

1、2使用时较不方便，3、4使用时直接对选择器进行选择

2、事件类型

当……的时候，做……事儿

  • click，点击事件
  • mouseenter，鼠标移入元素

  • mouseleave，鼠标移出元素

      let btn = document.querySelector(".btn");
  // 事件监听函数
  btn.onclick = function (){
      alert("被点击");
  }

  // 鼠标移入事件函数
  btn.onmouseenter = function (){
      console.log("Hello enter");
  }
  // 鼠标移出事件函数
  btn.onmouseleave = function (){
      console.log("Hello,leave")
  }

需要绑定事件的时候在事件类型前加on

3、设置样式

通过click、mouseenter、mouseleave事件控制样式

  • element.style.color

  • element.style.backgroundColor

      let btn = document.querySelector(".btn");
  btn.onclick = function (){
      alert("被点击");
      // 改变样式————颜色，如果要改变其他块的颜色，则将this改为其他块的名字
      this.style.backgroundColor = "blue";
  }

4、设置属性

/*思路：

* 1、设定一个imagesSrcList集合，存放图片存储路径
* 2、通过DOM获取img标签
* 3、通过DOM获取所有button按钮标签
* 4、循环遍历btns，设置onclick点击事件函数，更换图片路径*/

let img = document.querySelector("img");
let imagesSrcList =
    ["images/桌面壁纸1.jpg",
        "images/桌面壁纸2.jpg",
        "images/桌面壁纸3.jpg"];
let btns = document.querySelectorAll("button");
for (let i in btns) {
    btns[i].onclick = function (){
        // console.log(imagesSrcList[i]);
        img.src = imagesSrcList[i];
    }
}
/*    btn.onclick = function (){
        for (let i = 0;i<imagesSrcList.length;i++){
        }
    }*/

5、通过class属性设置样式

  • element.className // 点击原始、设置激活的背景色

     let h1List = document.querySelectorAll("h1");
 for(let i in h1List){
     h1List[i].onclick = function (){
         if (this.className === "active"){
             this.className = ""
         }else {
             this.className = "active"
         }
     }
 }

二、DOM节点操作

1、innerHTML

在这里插入图片描述

<body>
<button>按钮</button>
<ul></ul>
<script>
    let btn = document.querySelector('button');
    let ul = document.querySelector('ul');
    btn.onclick = function (){
    
    
        ul.innerHTML = `
        <li>香蕉</li>
        <li>苹果</li>
        <li>鸭梨</li>`;
    }
</script>
</body>

2、节点操作

2.1、创建元素节点：createElement

2.2、创建文本节点：createTextNode

2.3、添加节点：appendChild

2.4、删除节点：removeChild

水果列表的添加和删除
在这里插入图片描述

<body>
<input type="text">
<button>点击添加按钮</button>
<ul class="fruit-list">
    <li>香蕉</li>
    <li>苹果</li>
    <li>鸭梨</li>
</ul>
<script>
    let btn = document.querySelector('button');
    let ul = document.querySelector('ul');
    let inp = document.querySelector('input');
    let list = document.querySelectorAll('.fruit-list li')
    btn.onclick = function (){
    
    
        // 获取输入框的内容
        let value = inp.value;
        // 创建元素标签li，但只存在于内存当中，用之即用，不用即毁
        let li = document.createElement("li");
        // let txt = document.createTextNode("香蕉")
        let txt = document.createTextNode(value);
        // 添加节点
        ul.appendChild(li);
        li.appendChild(txt);
    }

    for (let i in list){
    
    
        list[i].onclick = function (){
    
    
            console.log(this);
            ul.removeChild(this);
        }
    }
</script>
</body>

三、事件对象

事件监听函数的形参可以获取事件对象
通过事件对象可以获取鼠标坐标

  1. 获取x坐标：e.clientX;

  2. 获取y坐标：e.clientY;

    <body>
<div class = "box"></div>
<script>
 let box = document.querySelector(".box");
 box.onclick = function(e){
      
      
     console.log(e.clientX);
     console.log(e.clientX);
 }
</script>
</body>

    随鼠标显示图片的大图
    在这里插入图片描述

    1、事件绑定

    1. addEventListener("eventType",fun)
    2. element.onEventType = fun

区别：

  1. addEventListener在同一元素上的同一事件类型添加多个事件，不会被覆盖，而onEventType会覆盖
  2. addEventListener可以设置元素在捕获阶段触发事件，而onEventType不能
    let btn = document.querySelector("button");
    btn.addEventListener("click",function (){
        console.log("hello world1");
    })

    btn.addEventListener("click",function (){
        console.log("hello world2");
    })

2、事件流

3、事件捕获与事件冒泡

默认情况下，事件会在冒泡阶段执行
addEventListener(eventType,fun,boolean);// 默认false：冒泡阶段触发；true：捕获阶段触发

4、阻止事件冒泡

  • e.stopPropagation

实现下面功能：

  • 点击一个按钮，显示一个容器盒子；
  • 点击容器，容器背景颜色改变
  • 点击容器中的按钮，容器隐藏
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>事件</title>
    <style>
        .show{
    
    

        }
        .box{
    
    
            width: 200px;
            height: 200px;
            background-color: yellow;
            display: none;
        }
    </style>
</head>
<body>
<button class="show">显示</button>
<div class="box">
    <button class="close">关闭</button>
</div>
<script>
* 实现下面功能：
- 点击一个按钮，显示一个容器盒子；
- 点击容器，容器背景颜色改变
- 点击容器中的按钮，容器隐藏*/
    let show = document.querySelector(".show");
    let box = document.querySelector(".box");
    let close = document.querySelector(".close");
    show.onclick = function (){
    
    
        box.style.display = "block";
    }
    close.onclick = function (e){
    
    
        box.style.display="none";
        // 停止事件冒泡，使得点击关闭按钮不会触发box的onclick事件
        e.stopPropagation();
    }
    box.onclick = function (){
    
    
        this.style.backgroundColor = "red";
    }


</script>
</body>
</html>

5、事件默认行为

为一个可以跳转到百度的 a 标签设置点击事件：
去掉事件默认行为

  • e.preventDefault()

or

  • return false

案例：在超链接标签上添加自己的实现效果，让它只执行自己的实现效果而不跳转

6、事件委托

通过e.target将子元素的事件委托给父级处理

升级版的水果列表增删

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>innerHTML</title>
</head>
<body>
<input type="text">
<button>点击添加按钮</button>
<ul class="fruit-list">
    <li>香蕉</li>
    <li>苹果</li>
    <li>鸭梨</li>
</ul>
<script>
    let btn = document.querySelector('button');
    let ul = document.querySelector('ul');
    let inp = document.querySelector('input');
    let list = document.querySelectorAll('.fruit-list li')
    btn.onclick = function (){
    
    
        // 获取输入框的内容
        let value = inp.value;
        // 创建元素标签li，但只存在于内存当中，用之即用，不用即毁
        let li = document.createElement("li");
        // let txt = document.createTextNode("香蕉")
        let txt = document.createTextNode(value);

        // 添加节点
        ul.appendChild(li);
        li.appendChild(txt);

        // 事件委托
        ul.onclick = function (e){
    
    
            ul.removeChild(e.target);
        }
</script>
</body>
</html>
`

7、事件类型

7.1、鼠标事件

let box = document.querySelector(".box");
box.onclick = function (){
    console.log("被点击");
}
box.onmouseenter = function (){
    console.log("鼠标移入")
}
box.onmousemove = function (){
    console.log("鼠标移出")
}

7.2、键盘事件

let box= document.querySelector(".box");
console.log(box.offsetTop);// 获取box的距顶部的距离

// 键盘按下事件
document.onkeydown = function (e){
    // console.log(e.keyCode);// 打印键盘锁对应的编码
    let code = e.keyCode;
    switch (code){
        case 37:
            console.log("左键");
            box.style.left = box.offsetLeft - 5 + "px";
            break;
        case 38:
            console.log("上键");
            box.style.top = box.offsetTop - 5 + "px";
            break;
        case 39:
            console.log("右键");
            box.style.left = box.offsetLeft + 5 + "px";
            break;
        case 40:
            console.log("下键");
            box.style.top = box.offsetTop + 5 + "px";
            break;

    }
}

7.3、触屏事件

let box = document.querySelector(".box");
// 鼠标按下事件
box.ontouchstart = function (){
    console.log("start");
}
// 鼠标抬起事件
box.ontouchend = function (){
    console.log("end");
}

// 鼠标滑动事件
box.ontouchmove = function (){
    console.log("I'm moving");
}

四、计时器

1、计时器方法

  • 定时器 ：timer = setInterval(() =>{函数体},相隔秒数)
  • 清除定时器，clearInterval(timer);为了防止事件函数导致计时器执行的次数越多，数越快
  • 设置定时输出：setTimeout(()=>{函数体},相隔秒数)
  • 清除定时输出：clearTimeout()

2、计时器应用

2.1、防抖与节流

1、防抖：对于短时间内多次触发事件的情况，可以使用防抖停止事件持续触发

    防抖debounce
    let timer = null;
    window.onscroll = function (){
   
   
        if (timer!== null){
   
   
            clearTimeout(timer);
        }
        timer = setTimeout(()=>{
   
   
            console.log("Hello world!");
            timer = null;
        },500)

2、节流：防止短时间内多次触发事件的情况，但是间隔事件内，还是需要不断触发

    节流throttle
    let mark = true;//标记
    window.onscroll = function (){
   
   
        if(mark){
   
   
            setTimeout(()=>{
   
   
                console.log("hello world!")
                mark = true;
            },500)
        }
        mark = false;
    }

3、返回顶部效果

防抖实现
节流实现

文章标签：
JavaScript
前端开发
容器
关键词：
JavaScript DOM
dom操作
JavaScript操作
dom javascript
JavaScript dom操作
博客zhu虎康
目录
相关文章
cqtianxin1
|
9天前
|
JavaScript 前端开发
JavaScript HTML DOM
JavaScript HTML DOM
cqtianxin1
22 2
JavaScript HTML DOM
cqtianxin1
|
7天前
|
JavaScript 前端开发 索引
JavaScript HTML DOM 节点列表
JavaScript HTML DOM 节点列表
cqtianxin1
12 5
cqtianxin1
|
7天前
|
JavaScript 前端开发 索引
JavaScript HTML DOM 集合(Collection)
JavaScript HTML DOM 集合(Collection)
cqtianxin1
8 4
周一同学Zelina
|
8天前
|
JavaScript 前端开发 索引
你可能没有听说过 js中的 DOM操作还有这个: HTMLCollection 和 NodeList
该文章详细解释了JavaScript中HTMLCollection和NodeList这两种DOM集合类型的特性、使用方法及其区别，并通过实例代码展示了如何操作这两种集合来选取和遍历DOM元素。
周一同学Zelina
24 5
cqtianxin1
|
9天前
|
JavaScript 前端开发
JavaScript HTML DOM 事件
JavaScript HTML DOM 事件
cqtianxin1
14 5
cqtianxin1
|
7天前
|
JavaScript 前端开发
JavaScript HTML DOM 元素 (节点)
JavaScript HTML DOM 元素 (节点)
cqtianxin1
14 2
cqtianxin1
|
9天前
|
JavaScript 前端开发
JavaScript HTML DOM - 改变CSS
JavaScript HTML DOM - 改变CSS
cqtianxin1
16 4
cqtianxin1
|
9天前
|
JavaScript 前端开发
JavaScript HTML DOM EventListener
JavaScript HTML DOM EventListener
cqtianxin1
13 2
游客j4mujezz7vm7y
|
9天前
|
JavaScript 前端开发
js操作dom|29
js操作dom|29
游客j4mujezz7vm7y
29 2
杀死一只知更鸟debug
|
9天前
|
XML 移动开发 JavaScript
js中BOM和DOM总结（基础篇）
文章总结了JavaScript的BOM和DOM知识点，包括window、screen、location、history、navigator对象，以及消息框、计时器和cookie。同时，介绍了DOM的概念、节点获取和修改方法，以及事件处理。
杀死一只知更鸟debug
12 0
js中BOM和DOM总结（基础篇）