JavaScript DOM操作与事件处理方法

2025-01-08 03:50

本文主要是介绍JavaScript DOM操作与事件处理方法,希望对大家解决编程问题提供一定的参考价值,需要的开发者们随着小编来一起学习吧!

《JavaScriptDOM操作与事件处理方法》本文通过一系列代码片段,详细介绍了如何使用JavaScript进行DOM操作、事件处理、属性操作、内容操作、尺寸和位置获取,以及实现简单的动画效果,涵...

前言

本文将通过一系列代码片段,深入探讨如何使用JavaScript进行DOM操作、事件处理以及获取和设置元素属性。这些示例涵盖了从基础到进阶的技术点,帮助读者更好地理解javascript在实际项目中的应用

1. 类名操作

代码片段

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .active {
            width: 100px;
            height: 100px;
            background: red;
        }
    </style>
</head>
<body>
    <input type="button" value="on|off">
    <div id="box"></div>
    <script>
        //1. 获取元素
        var div = document.querySelector('#box');
        var onoff = document.querySelector('input');
        //2. 添加类名
        div.className = 'pox';
        div.classList.add('hehe'); //添加新类名
        div.classList.add('haha');
        div.classList.add('active');
        //获取所有类名
        console.log(div.classList, div.classList.length);
        //通过下标获取指定的类名
        console.log(div.classList.item(2));
        //3. 添加事件
        onoff.onclick = function () {
            div.classList.toggle('active');
        }
        //4. 删除指定类名
        div.classList.remove('hehe');
        //5. 查看指定的类名是否存在
        console.log(div.classList.contains('hehe'));
    </script>
</body>
</html>

JavaScript DOM操作与事件处理方法

代码解析

获取元素

var div = document.querySelector('#box');
var onoff = document.querySelector('input');

使用querySelector方法获取页面中的<div><input>元素。

添加类名

div.className = 'pox';
div.classList.add('hehe');
div.classList.add('haha');
div.classList.add('active');

className属性可以直接设置或获取元素的类名。classList提供了一组便捷的方法来操作类名,如addremovetoggle等。

获取所有类名

console.log(div.classList, div.classList.length);
console.log(div.classList.item(2));

classList是一个DOMTokenList对象,可以通过length属性获取类名数量,通过item方法获取指定索引的类名。

添加事件

onoff.onclick = function () {
    div.classList.toggle('active');
}

toggle方法用于切换类名的存在状态。如果类名存在则移除,不存在则添加。

删除指定类名

div.classList.remove('hehe');

查看指定的类名是否存在

console.log(div.classList.contains('hehe'));

2. 属性操作

代码片段

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div id="box" title="JavaScript DOM操作与事件处理方法" data-id="sp1"></div>
    <script>
        //1. 获取元素
        var div = document.getElementById('box');
        //2. 获取属性
        console.log(div.id, div['title']);
        //3. 获取自定义属性
        console.log(div.getAttribute('data-id'));
        //4. 设置自定义属性
        div.setAttribute('data-cartId', '999');
   China编程     //5. 删除自定义属性
        div.removeAttribute('data-id');
        console.log(div.dataset.cartId);
        div.id = '';
    </script>
</body>
</html>

JavaScript DOM操作与事件处理方法

代码解析

获取元素

var div = document.getElementById('box');

获取属性

console.log(div.id, div['title']);

可以直接通过属性名访问标准属性,如idtitle

获取自定义属性

console.log(div.getAttribute('data-id'));

使用getAttribute方法获取自定义属性值。

设置自定义属性

div.setAttribute('data-cartId', '999');

使用setAttribute方法设置自定义属性值。

删除自定义属性

div.removeAttribute('data-id');

使用dataset访问自定义属性:

console.log(div.dataset.cartId);

dataset属性提供了一种更方便的方式访问带有data-前缀的自定义属性。

修改id属性:

div.id = '';

3. 内容操作

代码片段

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE-edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <input type="text" name="" id="">
    <div id="box"></div>
    <script>
        //1. 获取元素
        var txt = document.querySelector('input');
        var div = document.querySelector('#box');
        //3. 添加内容
        txt.value = '姓名:';
        div.innerHTML = '呵呵<i>嘿嘿</i>嘻嘻';
        //2. 获取元素中的内容
        console.log(txt.value);
        console.log(div.innerHTML);
        console.log(div.innerText);
    </script>
</body>
</html>

JavaScript DOM操作与事件处理方法

代码解析

获取元素

var txt = document.querySelector('input');
var div = document.querySelector('#box');

添加内容

txt.value = '姓名:';
div.innerHTML = '呵呵<i>嘿嘿</i>嘻嘻';

value属性用于设置或获取表单元素的值。innerHTML属性用于设置或获取HTML内容,支持HTML标签解析。

获取元素中的内容

console.log(txt.value);
console.log(div.innerHTML);
console.log(div.innerText);

innerText属性仅获取文本内容,不包含HTML标签。

4. 尺寸和位置

代码片段

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE-edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title&gFiJTTrJSPt;Document</title>
    <style>
        #box {
            width: 100px;
            height: 100px;
            background: red;
            border: 1px solid black;
            padding: 5px;
        }
    </style>
</head>
<body>
    <div id="box"></div>
    <script>
        //1. 获取元素
        var div = document.querySelector('#box');
        //2. 获取div的相对宽高
        console.log(div.offsetWidth, div.offsetHeight); //112 112
        console.log(div.clientWidth, div.clientHeight); //110 110
    </script>
</body>
</html>

JavaScript DOM操作与事件处理方法

代码解析

获取元素

var div = document.querySelector('#box');

获取相对宽高

console.log(div.offsetWidth, div.offsetHeight); //112 112
console.log(div.clientWidth, div.clientHeight); //110 110
  • offsetWidthoffsetHeight包括了宽度/高度、内边距和边框。
  • clientWidthclientHeight仅包括宽度/高度和内边距,不包括边框。

5. 动画效果

代码片段

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE-edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        #box {
            width: 100px;
            height: 100px;
            background: red;
            position: absolute;
        }
    </style>
</head>
<body>
    <input type="button" value="带你飞">
    <div id="box"></div>
    <script>
        //1. 获取元素
        var div = document.querySelector('#box');
        var fly = document.querySelector('input');
        //2. 添加事件
        fly.onclick = function () {
            var speed = 1;
            setInterval(function () {
                div.style.left = div.offsetLeft + speed++ + 'px';
            }, 30);
        }
    </script>
</body>
</html>

JavaScript DOM操作与事件处理方法

代码解析

获取元素

var div = document.querySelector('#box');
var fly = document.querySelector('input');

添加事件

fly.onclick = function () {
    var speed = 1;
    setInterval(function () {
        div.style.left = div.offsetLeft + speed++ + 'px';
    }, 30);
}

点击按钮后,使用setInterval定时器每30毫秒更新一次left样式属性,使div元素逐渐向右移动。

6. 表格操作与事件处理

代码片段

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE-edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <taChina编程ble border="1">
        <tr>
            <td>商品名称</td>
            <td>商品价格</td>
            <td>商品图片</td>
            <td>操作</td>
        </tr>
        <tr data-good-id="sp1">
            <td><input type="hidden" value="1">笔记本</td>
            <td>139999</td>
            <td>33333</td>
            <td><a href="javascript:;" rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  class="buy">购买</a></td>
        </tr>
        <tr data-good-id="sp2FiJTTrjsp">
            <td><input type="hidden" value="2">手机</td>
            <td>9999</td>
            <td>33333</td>
            <td><a href="javascript:;" rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  class="buy">购买</a>javascript;</td>
        </tr>
        <tr data-good-id="sp3">
            <td><input type="hidden" value="3">平板</td>
            <td>1999</td>
            <td>33333</td>
            <td><a href="javascript:;" rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  class="buy">购买</a></td>
        </tr>
    </table>
    <script>
        //1. this 代表它所在的function被哪个对象调用了,this就代表这个对象。
        //2. 如果没有明确的调用对象,则代表window
        var buy = document.querySelectorAll('.buy');
        //添加事件
        for (var i = 0, len = buy.length; i < len; i++) {
            buy[i].onclick = function () {
                //商品id
                var id = this.parentNode.parentNode.dataset.goodId;
                // alert(id);
                //商品序号
                var sn = this.parentNode.parentNode.firstElementChild.firstElementChild.value;
                // alert(sn);
                var name = this.parentNode.parentNode.firstElementChild.lastChild.nodeValue;
                alert(name);
            }
        }
    </script>
</body>
</html>

JavaScript DOM操作与事件处理方法

代码解析

获取元素

var buy = document.querySelectorAll('.buy');

添加事件

for (var i = 0, len = buy.length; i < len; i++) {
    buy[i].onclick = function () {
        //商品id
        var id = this.parentNode.parentNode.dataset.goodId;
        //商品序号
        var sn = this.parentNode.parentNode.firstElementChild.firstElementChild.value;
        //商品名称
        var name = this.parentNode.parentNode.firstElementChild.lastChild.nodeValue;
        alert(name);
    }
}

遍历所有带有buy类的链接,并为每个链接添加点击事件。点击时,通过this关键字获取当前点击的元素,然后逐层向上查找父元素,最终获取商品ID、序号和名称。

结尾

通过上述代码片段和技术解析,我们详细介绍了如何使用JavaScript进行DOM操作、事件处理、属性操作、内容操作、尺寸和位置的获取,以及实现简单的动画效果。这些技术点不仅涵盖了基础的DOM操作,还包括了一些常见的兼容性处理和高级用法。希望本文能帮助读者更好地理解和掌握JavaScript在Web开发中的应用,为后续的项目开发打下坚实的基础。

到此这篇关于JavaScript DOM操作与事件处理的文章就介绍到这了,更多相关js dom操作内容请搜索China编程(www.chinasem.cn)以前的文章或继续浏览下面的相关文章希望大家以后多多支持编程China编程(www.chinasem.cn)!

这篇关于JavaScript DOM操作与事件处理方法的文章就介绍到这儿,希望我们推荐的文章对编程师们有所帮助!



http://www.chinasem.cn/article/1152972

相关文章

C#多线程编程中导致死锁的常见陷阱和避免方法

《C#多线程编程中导致死锁的常见陷阱和避免方法》在C#多线程编程中,死锁(Deadlock)是一种常见的、令人头疼的错误,死锁通常发生在多个线程试图获取多个资源的锁时,导致相互等待对方释放资源,最终形... 目录引言1. 什么是死锁?死锁的典型条件:2. 导致死锁的常见原因2.1 锁的顺序问题错误示例:不同

深入解析Spring TransactionTemplate 高级用法(示例代码)

《深入解析SpringTransactionTemplate高级用法(示例代码)》TransactionTemplate是Spring框架中一个强大的工具,它允许开发者以编程方式控制事务,通过... 目录1. TransactionTemplate 的核心概念2. 核心接口和类3. TransactionT

Java实现Elasticsearch查询当前索引全部数据的完整代码

《Java实现Elasticsearch查询当前索引全部数据的完整代码》:本文主要介绍如何在Java中实现查询Elasticsearch索引中指定条件下的全部数据,通过设置滚动查询参数(scrol... 目录需求背景通常情况Java 实现查询 Elasticsearch 全部数据写在最后需求背景通常情况下

Spring Boot 整合 ShedLock 处理定时任务重复执行的问题小结

《SpringBoot整合ShedLock处理定时任务重复执行的问题小结》ShedLock是解决分布式系统中定时任务重复执行问题的Java库,通过在数据库中加锁,确保只有一个节点在指定时间执行... 目录前言什么是 ShedLock?ShedLock 的工作原理:定时任务重复执行China编程的问题使用 Shed

一文详解Java Condition的await和signal等待通知机制

《一文详解JavaCondition的await和signal等待通知机制》这篇文章主要为大家详细介绍了JavaCondition的await和signal等待通知机制的相关知识,文中的示例代码讲... 目录1. Condition的核心方法2. 使用场景与优势3. 使用流程与规范基本模板生产者-消费者示例

Sentinel 断路器在Spring Cloud使用详解

《Sentinel断路器在SpringCloud使用详解》Sentinel是阿里巴巴开源的一款微服务流量控制组件,主要以流量为切入点,从流量路由、流量控制、流量整形、熔断降级、系统自适应过载保护、... 目录Sentinel 介绍同类对比Hystrix:Sentinel:微服务雪崩问题问题原因问题解决方案请

Spring IOC的三种实现方式详解

《SpringIOC的三种实现方式详解》:本文主要介绍SpringIOC的三种实现方式,在Spring框架中,IOC通过依赖注入来实现,而依赖注入主要有三种实现方式,构造器注入、Setter注入... 目录1. 构造器注入(Cons编程tructor Injection)2. Setter注入(Setter

Java function函数式接口的使用方法与实例

《Javafunction函数式接口的使用方法与实例》:本文主要介绍Javafunction函数式接口的使用方法与实例,函数式接口如一支未完成的诗篇,用Lambda表达式作韵脚,将代码的机械美感... 目录引言-当代码遇见诗性一、函数式接口的生物学解构1.1 函数式接口的基因密码1.2 六大核心接口的形态学

Spring IOC控制反转的实现解析

《SpringIOC控制反转的实现解析》:本文主要介绍SpringIOC控制反转的实现,IOC是Spring的核心思想之一,它通过将对象的创建、依赖注入和生命周期管理交给容器来实现解耦,使开发者... 目录1. IOC的基本概念1.1 什么是IOC1.2 IOC与DI的关系2. IOC的设计目标3. IOC

Python实现文件下载、Cookie以及重定向的方法代码

《Python实现文件下载、Cookie以及重定向的方法代码》本文主要介绍了如何使用Python的requests模块进行网络请求操作,涵盖了从文件下载、Cookie处理到重定向与历史请求等多个方面,... 目录前言一、下载网络文件(一)基本步骤(二)分段下载大文件(三)常见问题二、requests模块处理