【JavaScript】DOM（二）

最新推荐文章于 2024-10-02 05:39:15 发布
最新推荐文章于 2024-10-02 05:39:15 发布
阅读量85 收藏 1
点赞数
分类专栏： JavaScript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_45965358/article/details/120147738
版权

DOM HTML CSS 事件处理 JavaScript
关键词由CSDN通过智能技术生成

文章目录

1.DOM HTML

在这里插入图片描述

1.1 增加（末尾加入）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>添加子节点</title>
    <style type="text/css">
        ul li {
            background-color: lightblue;
            display: inline;
            margin-right: 20px;
        }
        button {
            margin-left: 40px;
        }
    </style>
    <script type="text/javascript">
        window.onload = function(){
            var button = document.getElementsByTagName("button")[0];
            button.onclick = function(){
                var newLi = document.createElement("li");
                var newText = document.createTextNode("广州");
                newLi.appendChild(newText);
                var ulHtml = document.getElementsByTagName("ul")[0];
                ulHtml.appendChild(newLi);
            }
        }
    </script>
</head>
<body>
    <form>
        <ul id="city">
            <li id="beijing">北京</li>
            <li id="shanghai">上海</li>
            <li id="shenzhen">深圳</li>
            <li id="KongHong">香港</li>            
        </ul>
    </form>
    <button value="添加城市">添加城市</button>
</body>
</html>

请添加图片描述

1.2增加（插入）

在这里插入图片描述

<script type="text/javascript">
    window.onload = function(){
        var button = document.getElementsByTagName("button")[0];
        button.onclick = function(){
        var newLi = document.createElement("li");
        var newText = document.createTextNode("广州");
        newLi.appendChild(newText);
        var oldNode = document.getElementById("shanghai");
        var ulHtml = document.getElementsByTagName("ul")[0];
        ulHtml.insertBefore(newLi, oldNode);
     }
}
</script>

在这里插入图片描述

1.3 修改

在这里插入图片描述

window.onload = function() {
	var button = document.getElementsByTagName("button")[0];
    button.onclick = function(){
        var newLi = document.createElement("li");
        var newText = document.createTextNode("广州");
        newLi.appendChild(newText);
        var oldNode = document.getElementById("shanghai");
        var ulHtml = document.getElementsByTagName("ul")[0];
        ulHtml.replaceChild(newLi, oldNode);
    }
}

在这里插入图片描述

1.4 删除

在这里插入图片描述
在这里插入图片描述

1.5另一种操作DOM的方法

    <script type="text/javascript">
        window.onload = function(){
            var button = document.getElementsByTagName("button")[0];
            button.onclick = function(){
                var city = document.getElementById("shenzhen");
                city.innerHTML = "东京";
            }
        }
    </script>

在这里插入图片描述

    <script type="text/javascript">
        window.onload = function(){
            var button = document.getElementsByTagName("button")[0];
            button.onclick = function(){
                var city = document.getElementById("city");
                city.innerHTML += "<li>东京</li>";
            }
        }
    </script>

在这里插入图片描述

2.DOM CSS

2.1操作内联样式

元素.style.样式（只能获取内联样式）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>cssDemo</title>
    <style type="text/css">
        #container {
            width: 200px;
            height: 200px;
            background-color: blue;
        }
    </style>
    <script type="text/javascript">
        window.onload = function(){
            var button = document.getElementById("button");
            button.onclick = function(){
                var container = document.getElementById("container");
                container.style.backgroundColor = "red";
            }
        }
    </script>
</head>
<body>
    <div id="container"></div><br/><br/>
    <button id="button">改变样式</button>
</body>
</html>

在这里插入图片描述

2.2获取元素的样式

在这里插入图片描述

    <script type="text/javascript">
        window.onload = function(){
            var box = document.getElementById("container");
            var button = document.getElementById("button");
            button.onclick = function(){
                alert(getComputedStyle(box, null).backgroundColor);
            }
        }
    </script>

在这里插入图片描述
我们可以进一步将它封装成函数，供我们方便调用。

    <script type="text/javascript">
        window.onload = function(){
            var box = document.getElementById("container");
            var button = document.getElementById("button");
            button.onclick = function(){
                alert(getElementStyle(box, "width"));
            }
            var getElementStyle = function(obj, name) {
                return getComputedStyle(obj, null)[name];
            }
        }
    </script>

3.事件

3.1事件对象

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>事件</title>
    <style type="text/css">
        #box1 {
            width: 250px;
            height: 250px;
            border: solid;
        }
        #box2 {
            width: 250px;
            height:50px;
            border: solid;
        }
    </style>
    <script type="text/javascript">
        window.onload = function(){
            var box1 = document.getElementById("box1");
            var box2 = document.getElementById("box2");
            box1.onmousemove = function(event){
                var x = event.clientX;
                var y = event.clientY;
                box2.innerHTML = "x = " + x + "y = " + y;
            }
        }
    </script>
</head>
<body>
    <div>
        <div id="box1"></div><br/><br/>
        <div id="box2"></div>
    </div>
</body>
</html>

在这里插入图片描述

3.2 Div跟随鼠标

在这里插入图片描述
请添加图片描述

3.3事件冒泡

在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>demo9</title>
    <style type="text/css">
        #box1 {
            width: 300px;
            height: 300px;
            background-color: blue;
        }
        #box2 {
            width: 50px;
            height: 50px;
            background-color: red;
            position: absolute;
        }
    </style>
    <script type="text/javascript">
        window.onload = function(){
            var box2 = document.getElementById("box2");
            document.onmousemove = function(event){
                var left = event.clientX;
                var top = event.clientY;
                box2.style.left = left + "px";
                box2.style.top = top + "px";
            };
        }
    </script>
</head>
<body>
    <div id="box1"></div>
    <div id="box2"></div>
</body>
</html>

在这里插入图片描述
我们来分析一下程序，当鼠标在空白区域地时候，触发了document的事件，但是当鼠标进入蓝色区域，并没有直接触发document事件，应为鼠标事件在蓝色区域中，但是因为有了事件冒泡，所以这个事件会一层一层往上直到触发document事件。我们可以通过event.cancelBubble = true来取消事件冒泡。

    <script type="text/javascript">
        window.onload = function(){
            var box2 = document.getElementById("box2");
            document.onmousemove = function(event){
                var left = event.clientX;
                var top = event.clientY;
                box2.style.left = left + "px";
                box2.style.top = top + "px";
            };
            var box1 = document.getElementById("box1");
            box1.onmousemove = function(event){
                event.cancelBubble = true;
            }
        }
    </script>

在这里插入图片描述

3.4 事件的委派

在这里插入图片描述

3.5 事件的绑定

我们之前的方法：对象.onclick = function(){}
一个元素只能绑定一个函数，如果我们想要一次绑定多个函数，我们需要使用下面的方法。

在这里插入图片描述在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>demo10</title>
    <script type="text/javascript">
        window.onload = function() {
            var button = document.getElementById("button");
            button.addEventListener("click", function(){
                alert(1);
            }, false);
            button.addEventListener("click", function(){
                alert(2);
            }, false);
        }
    </script>
</head>
<body>
    <button id="button" value="按钮">按钮</button>
</body>
</html>

在这里插入图片描述

3.6 事件的传播

在这里插入图片描述

在这里插入图片描述

作者：Beyong　　　　
出处：Beyong博客
github地址：https://github.com/beyong2019

本博客中未标明转载的文章归作者Beyong有，欢迎转载，但未经作者同意必须保留此段声明，且在文章明显位置给出原文连接，否则保留追究法律责任的权利。

Listener-1379
关注
专栏目录
JavaScript dom操作 趣味案例
06-25
本资源为JavaScript的dom操作的趣味案例，可直接打开查看本资源为JavaScript的dom操作的趣味案例，可直接打开查看本资源为JavaScript的dom操作的趣味案例，可直接打开查看本资源为JavaScript的dom操作的趣味案例，可...
JavaScript DOM操作 示例代码
06-25
包含dom的查询、访问、修改、添加、替换、删除等操作包含dom的查询、访问、修改、添加、替换、删除等操作包含dom的查询、访问、修改、添加、替换、删除等操作包含dom的查询、访问、修改、添加、替换、删除等操作包含...
JavaScript dom操作 dom元素查询 示例代码
06-27
JavaScript dom操作 dom元素查询 示例代码JavaScript dom操作 dom元素查询 示例代码JavaScript dom操作 dom元素查询 示例代码JavaScript dom操作 dom元素查询 示例代码JavaScript dom操作 dom元素查询 示例代码...
javascript Dom 编程艺术
08-11
本 书在简洁明快地讲述JavaScript和DOM的基本知识之后，通过几个实例演示了专业水准的网页开发技术，透彻阐述了平稳退化等一批至关重要的 JavaScript编程原则和最佳实践，并全面探讨了HTML5以及jQuery等JavaScript库...
javascript DOM 操作.doc
01-15
javascript DOM 操作 javascript DOM 操作是指在客户端使用javascript语言来操作文档对象模型（Document Object Model，DOM），以便于动态地更改网页的内容和结构。下面是javascript DOM 操作的相关知识点： IE 中...
knowLedge-Vue I18n 是 Vue.js 的国际化插件
2301_76671906的博客
09-30 881
Vue 2 中使用 Vue I18n 插件实现中英文切换
JavaScript ArrayBuffer的读写与类型转换
白瑕 的博客
10-01 417
所有视图的基本单位是ArrayBuffer, ArrayBuffer中只存储二进制格式的数据.ArrayBuffer不可直接读写, 必须通过视图(比如DataView)暴露的API.
Vue实战教程：如何用JS封装一个可复用的Loading组件
Jiaberrr的博客
09-28 583
通过以上步骤，我们成功在Vue项目中封装了一个可复用的Loading组件。在实际开发中，我们可以根据项目需求对Loading组件进行样式和功能的扩展，使其更加完善。封装组件是提高代码复用性和维护性的有效手段，希望本文能对你有所帮助。
如何使用Redisson的布隆过滤器？
最新发布
付聪
10-02 324
【代码】如何使用Redisson的布隆过滤器？
Web认识 -- 第一课
ZxVSaccount的博客
09-30 1167
这里是我们进入前端学习的开端,在本次更新之后我会陆续上传html,css,javaScript等相关语言的教程,有感兴趣的小伙伴们点点关注,未来我们一起学习!IE、火狐和谷歌是目前互联网上的三大浏览器，其他常用的浏览器还有苹果的Safari浏览器和欧朋浏览器等。对于一般的网站，只要兼容IE浏览器、火狐浏览器和谷歌浏览器，就能满足绝大多数用户的需求。本节主要简单介绍了一下关于HTML、CSS、JavaScript的一些基本概念,有感兴趣的朋友,点点关注我们一起学习,博主持续更新中!
React响应式修改数组和对象
警警的博客
09-30 779
React的状态是不可变的，这意味着你不能直接修改状态对象中的数组元素，而是需要创建一个新的数组来更新状态。你不能直接修改对象中的属性，而是需要创建一个新的对象来更新状态。不可变性（Immutability）：React中的状态是不可变的，这意味着你不能直接修改状态对象中的数组元素，而是需要创建一个新的数组来更新状态。避免直接修改状态：React的状态是不可变的，直接修改状态（如this.state.items.push(4)）不会触发重新渲染，因为React无法检测到这种变化。// 修改name属性。
深入理解 Nuxt.js 中的 app:data:refresh 钩子
09-29 1315
钩子在数据被刷新时触发，可以选择性地传入要刷新的键名（keys）。这为开发者提供了一个灵活的机制来响应数据变化，并进行必要的更新。Nuxt.js 中的钩子的用途及其实现方法。这个钩子为开发者提供了一种灵活的方式来处理数据的更新，从而优化应用的响应性和用户体验。
【开源免费】基于SpringBoot+Vue.JS校园资料分享平台（JAVA毕业设计）
customer08的博客
09-30 1232
校园资料分享平台是一个B/S模式系统，采用Spring Boot框架作为开发技术，MYSQL数据库设计开发，充分保证系统的稳定性。系统具有界面清晰、操作简单，功能齐全的特点，使得校园资料分享平台管理工作系统化、规范化。
跨境电商系统基本功能和特点​
商城 / Java 商城 -首选 商城 开源 电商 商城 源码 商城
09-29 401
综上所述，跨境电商系统通过其全面的功能和特点，为全球用户提供了便捷、高效、安全的跨境购物体验。随着技术的不断进步和市场的不断发展，跨境电商系统将继续优化和完善，以适应新的挑战和机遇。
初学Vue
2302_80244686的博客
09-29 870
一套用于构建用户界面的渐进式JavaScript框架Vue可以自底向上逐层的应用。
从0学习React（3）
qq_54432917的博客
09-29 720
在第一篇文章中，我们对index.tsx文件的每一行代码都做了简单的分析。通过第一篇文章的总结，我也大致知道了index.tsx里的很多语法。而第二篇文章，我对index.tsx文件的框架做了一个大致的分析，通过第二篇文章，我对index.tsx有了进一步的认识。按理来讲，第三篇文章我还是解析index.tsx文件，但是我发现，对于前两篇文章，其实我对语法的细节有很多不明白的点。因此这篇文章，我就把React的一些最基础的知识给梳理一下，帮助我更好的理解index.tsx的代码。
Vue脚手架搭建及vue项目创建
ning的博客
09-29 983
Vue CLI 是一个强大的工具，它简化了 Vue.js 项目的搭建和开发流程。通过几个简单的命令，我们可以快速创建一个功能完备的 Vue.js 项目，并开始开发。随着项目的深入，你还可以探索更多的 Vue CLI 功能和插件，以满足不同的开发需求。版权声明：本博客内容为原创，转载请保留原文链接及作者信息。参考文章VUE快速入门手册——安装VUE脚手架（创建自己的第一个vue项目）Vue脚手架搭建及vue项目创建【详细教程】
Vue基础(1)
HBR666_的博客
09-29 1293
2.数据代理的理解 通过一个对象代理对另一个对象的属性的操作（读/写） 如果直接更改obj2中的x obj中的x也会更改 即通过一个对象（obj2）对另一个对象obj的属性（x）的操作。当发现被修改时，页面中用到两者的地方会自动更新，而计算属性是依赖着data中的来改变的，则会再次调用fullName，调用get方法，达到页面中插值fullName修改的效果。2.所有不被Vue管理的函数（定时器的回调函数，ajax的回调函数等，promise的回调函数），最好写成箭头函数。3.get函数什么时候执行？
JavaScript Set基础与实战应用
软考鸭
10-01 378
Set是JavaScript中一个非常有用的数据结构，它提供了一种存储唯一值的方式。通过掌握Set的基本用法、特性以及高级操作，你可以在开发过程中更加灵活地处理集合数据。无论是去除数组中的重复元素，还是进行集合运算，Set都能提供简洁而高效的解决方案。
JavaScript DOM编程艺术探索
"JavaScript DOM编程艺术，深入探讨JavaScript与DOM的关系，以及它们在网页交互中的重要性。" 在网页设计领域，JavaScript与DOM是不可或缺的技术工具，它们共同塑造了现代网页的交互性和动态性。JavaScript是一种由...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值