JS 事件与 DOM 对象

最新推荐文章于 2024-07-31 16:33:32 发布
最新推荐文章于 2024-07-31 16:33:32 发布
阅读量81 收藏
点赞数 3
分类专栏： 网页 文章标签： javascript html html5
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_61211769/article/details/119960574
版权

1、JS 事件

1.1、作用：

  • 验证用户输入的数据

  • 增加页面的动感效果

  • 增强用户的体验度

1.2、事件的绑定

  • 在标签在添加 onclick = ""

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
    </head>
    <body>
        <button onclick="func_click()">按钮1</button>
        
        <script>
            function func_click() {
                console.log("我被点击了！");
            }
        </script>
    </body>
</html>

  • 选中元素，在 js 代码中为元素绑定事件

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
    </head>
    <body>
        <button id="btn">按钮2</button>
        
        <script>
            var btn = document.querySelector("#btn");
            btn.onclick = function() {
                console.log("我被点击了！");
            }
        </script>
    </body>
</html>

1.3、事件类型

1.3.1、鼠标事件

  • onclick：鼠标单击事件

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
    </head>
    <body>
        <button onclick="func_click()">按钮1</button>
        
        <script>
            function func_click() {
                console.log("我被点击了！");
            }
        </script>
    </body>
</html>

  • ondblclick：鼠标双击事件

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
    </head>
    <body>
        <button ondblclick="func_dblclick()">按钮2</button>
        
        <script>        
            function func_dblclick() {
                console.log("我被双击了！");
            }
        </script>
    </body>
</html>

  • onmouseover：鼠标移入事件

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
    </head>
    <body>
        <button onmouseover="func_over()">按钮3</button>
        
        <script>
            function func_over() {
                console.log("我移入了！");
            }
        </script>
    </body>
</html>

  • onmouseout：鼠标移出事件

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
    </head>
    <body>
        <button onmouseout="func_out()">按钮4</button>
        
        <script>
            function func_out() {
                console.log("我移出了！");
            }
        </script>
    </body>
</html>

  • onmousemove：鼠标移动事件

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
    </head>
    <body>
        <button onmousemove="func_move()">按钮5</button>
        
        <script>        
            function func_move() {
                console.log("我移动了！");
            }
        </script>
    </body>
</html>

1.3.2、键盘事件

  • onkeyup：键盘松开事件

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
    </head>
    <body>
        <input type="text" onkeyup="func_up()">
        
        <script>
            function func_up() {
                console.log("我被松开了！")
            }
        </script>
    </body>
</html>

  • onkeydown：键盘按下事件

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
    </head>
    <body>
        <input type="text" onkeydown="func_down()">
​
        <script>
            function func_down() {
                console.log("我被按下了！")
            }
        </script>
    </body>
</html>

1.3.3、表单事件

  • onfocus：获取焦点事件

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
    </head>
    <body>
        <input type="text" onfocus="func_focus()">
        
        <script>
            function func_focus() {
                console.log("我获取到了焦点！");
            }
        </script>
    </body>
</html>

  • onblur：失去焦点事件

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
    </head>
    <body>
        <input type="text" onblur="func_blur()">
        
        <script>
            function func_blur() {
                console.log("我失去了焦点！");
            }
        </script>
    </body>
</html>

1.3.4、文档事件

  • onload：页面加载事件

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
    </head>
    <body onload="func_load()">
            function func_load() {
                console.log("页面加载完毕！");
            }
        </script>
    </body>
</html>

2、DOM

2.1、介绍

        DOM：Document Object Model 文档对象模型

        作用：赋予了我们操作页面中元素的能力，实现对元素的新增，创建，修改，删除……

        加载 HTML 页面时，Web 浏览器生成一个树型结构，用来表示页面内部结构。DOM 将这种树型结构理解为由节点组成，组成一个节点树

2.2、节点的分类

  • 文档节点 文档本身 整个文档 document

  • 元素节点 所有的HTML元素 <a>、<div>、<p>

  • 属性节点 HTML元素内的属性 id、href、name、class

  • 文本节点 元素内的文本 hello

  • 注释节点 HTML中的注释 <!-- -->

2.3、节点的操作

2.3.1、获取节点

  • 直接获取

    • getElementById()：根据元素的 id 属性值获取一个节点

    • getElementsByClassName()：根据元素的 class 属性值获取一组节点

    • getElementsByTagName()：根据元素的标签名获取一组节点

    • getElementsByName()：根据元素的 name 属性值获取到一组节点

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
    </head>
    <body>
        <div id="box">
            box
            <p class="haha">box 中的 haha</p>
        </div>
        <p class="haha">p1</p>
        <p class="haha">p2</p>
        <span class="haha">span</span>
​
        <form action="" id="form">
            <input type="checkbox" name="hobby" value="1"> 读书
            <input type="checkbox" name="hobby" value="2"> 写字
            <input type="checkbox" name="hobby" value="3"> 敲代码
        </form>
        
        <script>
            // 根据元素的 id 属性值获取一个节点
            var box = document.getElementById("box");
            console.log(box);
            
            // 根据元素的 class 属性值获取一组节点
            var hahas = document.getElementsByClassName("haha");
            console.log(hahas);
            
            // 根据元素的标签名获取一组节点
            var ps = document.getElementsByTagName("p");
            console.log(ps);
            
            // 根据元素的 name 属性值获取到一组节点
            var hobby = document.getElementsByName("hobby");
            console.log(hobby);
        </script>
    </body>
</html>

  • 间接获取

    • childNodes：返回元素的一个子节点的数组

    • firstChild：返回元素的第一个子节点

    • lastChild：返回元素的最后一个子节点

    • nextSibling：返回元素的下一个兄弟节点

    • parentNode：返回元素的父节点

    • previousSibling：返回元素的上一个兄弟节点

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
    </head>
    <body>
        <ul id="box">
            <li class="first">li1</li>
            <li>li2</li>
            <li>li3</li>
            <li>li4</li>
            <li>li5</li>
        </ul>
​
        <script>
            var box = document.getElementById("box");
​
            console.log(box.childNodes);
            console.log(box.firstChild);
            console.log(box.firstElementChild);     
            console.log(box.lastChild);
            console.log(box.lastElementChild);
            console.log(box.firstElementChild.nextSibling);
            console.log(box.firstElementChild.nextElementSibling);
            console.log(box.lastElementChild.previousSibling);
            console.log(box.lastElementChild.previousElementSibling);
            console.log(box.parentNode);
            console.log(box.firstElementChild.parentNode);
            
        </script>
    </body>
</html>

2.3.2、创建节点

  • 创建元素节点

var div = document.createElement("div");

  • 创建文本节点

var text = document.createTextNode("我是文本节点！");

  • innerHTML

div.innerHTML = "明天的你会感谢今天努力的自己!";
div.innerHTML = "<p>我是p标签</p>"

2.3.3、插入节点

  • 父节点.appendChild(子节点)：把子节点追加到父节点的最后

var box = document.querySelector("#box")
box.appendChild(div);

  • 父节点.insertBefore(要插入的子节点, 参考节点)

var p = document.createElement("p");
p.innerHTML = "明天的你会感谢今天努力的自己!";
box.insertBefore(p, div);

2.3.4、操作节点

  • 替换节点

    • 父节点.replaceChild(新子节点, 原子节点)

    • 返回被替换的节点

    • 如果新节点是页面中原有的节点，实现了移动覆盖的效果

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
    </head>
    <body>
        <ul>
            <li>li1</li>
            <li>li2</li>
            <li>li3</li>
            <li>li4</li>
        </ul>
        
        <script>
            var ul = document.getElementsByTagName("ul")[0];
            var newLi = document.createElement("li");
            newLi.innerHTML = "新的 li 标签";
​
            console.log(ul.replaceChild(newLi, ul.firstElementChild));
            console.log(ul.replaceChild(ul.lastElementChild, ul.firstElementChild));
        </script>
    </body>
</html>

  • 删除节点

    • 父节点.removeChild(子节点)

    • 返回被删除的节点

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
    </head>
    <body>
        <ul>
            <li>li1</li>
            <li>li2</li>
            <li>li3</li>
            <li>li4</li>
        </ul>
        
        <script>
            console.log(ul.removeChild(ul.firstElementChild));
        </script>
    </body>
</html>

  • 克隆节点

    • 节点.cloneNode(boolean)

    • true：深拷贝，拷贝当前节点以及子元素

    • false：浅拷贝，拷贝当前节点不拷贝字内容

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
    </head>
    <body>
        <ul>
            <li>li1</li>
            <li>li2</li>
            <li>li3</li>
            <li>li4</li>
        </ul>
        
        <script>
            console.log(ul.cloneNode(true));
            console.log(ul.cloneNode(false));
        </script>
    </body>
</html>
YANG**
关注
  • 3
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
JavaScript Dom 事件绑定与处理
猿码互联
05-12 464
JavaScript中的DOM事件是在HTML元素上发生的特定动作或事件。事件可以是鼠标点击、键盘按下、窗口调整大小等。JavaScript提供了一系列的方法来处理或绑定这些事件。
inner Text和innerHTNL的区别
m0_63502124的博客
10-24 297
【代码】inner Text和innerHTNL的区别。
【JavaScript】1.4 事件和DOM操作
Andy0214的专栏
11-13 2766
事件和DOM操作是JavaScript中非常重要的概念。通过理解和使用事件和DOM操作，我们可以创建动态的、交互式的网页。在接下来的章节中，我们将深入学习更多关于JavaScript的知识。希望你在学习的过程中能够找到乐趣，并且通过学习JavaScript，开启你的编程之旅！
JavaScript获取DOM对象常用方法
『愚』的博客
11-15 4011
获取DOM对象的常用方法有如下几种： getElementById() 通过元素的ID属性获取DOM对象，获取的是一个DOM对象。 getElementsByTagName() 通过元素的标签名获取DOM对象，获取的是一组DOM对象。 getElementsByClassName() 通过元素的class属性获取DOM对象，获取的是一组DOM对象。 getElementsByName() 通过元素的name属性获取DOM对象，获取的是一组DOM对象。 样例代码： <!DOCTYPE html&gt
JavaScript操作DOM对象
weixin_67877326的博客
05-18 593
一、DOM操作 DOM：文档对象模型，是基于文档编程的一套API接口 1.DOM操作分类 使用JavaScript操作DOM时通常分为三类：DOM Core（核心）、HTML-DOM和CSS-DOM 1.节点和节点关系 DOM是以树状结构的HTML文档，根据DOM概念，HTML文档中的每个标签或元素都是一个节点。 整个文档是一个文档节点 每个HTML标签是一个元素节点 包含在HTML元素中的文本是文本节点 每个HTML属性是一个属性节点 注释属于注释节点 使用父（parent）、子（ch
JavaScript DOM对象的尺寸和位置详解
zhishunet
01-25 619
在DOM对象操作中，其尺寸和位置也是DOM的核心内容，因为js的“交互式应用”几乎少不了对DOM对象的尺寸和位置进行操作，特别是js动画效果。
JavaScript中的DOM事件
传播有益的技术文章，力求精准、专业、专心、专享
06-08 924
事件，就是用户或浏览器自身执行操作而触发的某种动作，那么对某种动作的响应就是事件处理。响应事件处理或者说进行事件处理的回调函数就叫做**事件响应处理函数**。
JavaScript中的DOM对象
qq_44971635的博客
03-23 2414
文章目录 前言 一、DOM是什么？ 二、获取元素节点的方法 1.获取body和head节点 2.通过ID获取元素节点 3.通过class获取元素节点 4.通过name属性获取元素节点 5.通过标签名获取元素节点 6.通过css选择器获取元素节点 三、操作元素的属性 四、操作元素的样式属性 五、节点操作 六、节点的属性 六、其他 前言 提示：DOM DOM树理解。 一、DOM是什么？ 示例：DOM（document object mod...
DOM事件类型、event对象，最详解析。
热门推荐
LeslieCheung_的博客
05-11 1万+
目录事件对象（一）DOM中的事件对象⑴ 示例⑵ 所有事件都有的event对象的属性和方法① currentTarget | this | targer 的区别 事件对象 在触发DOM上的某个事件时，会产生一个事件对象event，这个事件对象包含着所有与事件有关的信息，例如事件是冒泡还是捕获，事件的目标，鼠标坐标，键盘按下的键，等等信息，不要太好用 下面一起来看看event事件对象都有哪些内容吧。 （一）DOM中的事件对象 兼容DOM的浏览器会将一个event对象传入到事件处理程序中。无论DOM0
JavaScript DOM 对象详解
xycxycooo的博客
07-16 804
在 JavaScript 编程中，DOM（Document Object Model）是指文档对象模型，它提供了一组用于与 HTML 文档进行交互的对象。DOM 是一种跨平台的、独立于语言的接口，它将 HTML 或 XML 文档表示为一个树形结构，其中每个节点都是一个对象，代表文档的一部分（如元素、属性、文本等）。通过 DOM，开发者可以添加、删除、修改和查询文档中的元素和内容。通过本文的详细讲解，相信你已经对 JavaScript 中的 DOM 对象有了全面的了解。方法可以通过元素的标签名获取元素集合。
jquery对象和javascript对象即DOM对象相互转换
12-09
总的来说，jQuery对象与DOM对象之间的转换是开发中常见的需求。掌握这种转换技巧能帮助你更好地利用这两个世界的优点，提升代码的可读性和效率。在编写jQuery代码时，一定要注意选择合适的方法，避免混淆两者，这样...
js中DOM事件绑定分析
11-27
然而，这些方法存在一些问题，如不支持事件捕获，不阻止重复绑定，`this`指向`window`而非DOM对象，以及潜在的内存泄漏问题。因此，在现代浏览器广泛支持`addEventListener()`和`removeEventListener()`的情况下，...
jquery对象与DOM对象转化
12-03
下面我们将深入探讨jQuery对象与DOM对象之间的转化方式。 首先，jQuery对象是一个集合，它实际上是一个包装了多个DOM元素的数组。这意味着，当你使用`$(selector)`选择元素时，返回的是一个包含匹配元素的jQuery...
解决JS内存泄露之js对象和dom对象互相引用问题
01-19
该问题涉及到作用域链，js对象和dom对象互相引用的问题。  因为对于匿名函数而言，其作用域链包含三个对象：匿名函数的变量对象、doTry()的变量对象和全局变量对象。此时doTry函数对象中btn变量引用了dom对象，即do...
jQuery对象与DOM对象之间的相互转换
12-04
总的来说，熟练掌握jQuery对象与DOM对象之间的转换，能够使你在处理JavaScript项目时更加得心应手，提高代码的灵活性和可读性。在实际工作中，根据需求灵活选择使用jQuery对象或DOM对象，可以优化代码性能，提高开发...
JavaScript青少年简明教程：函数及其相关知识（下）
cnds123的专栏
07-26 674
JavaScript青少年简明教程：函数及其相关知识（下）
VUE3自定义指令防止重复点击多次提交
MadSnail00的博客
07-30 246
vue3连续点击按钮重复提交，vue3自定义指令防止重复提交
【分享】前端程序员-技术网站推荐
一位前行者的博客
07-30 521
对于前端开发人员来说，以下是一些推荐的技术网站，这些网站提供了丰富的资源和知识，可以帮助你提升前端开发技能：收集一些 、、 的网站 vite 官方中文文档 element-plus 官方中文文档 pinia 官方中文文档 vue-router 官方中文文档 Tailwind CSS 官方文档 vitest 官方中文文档 es6 中文文档 axios 官方中文文档 vxetable 官方中文文档 lodash 中文文档 echarts 官方中文文档 animat
RN高级interview
最新发布
流星雨的博客
07-31 314
RN高级interview
深入理解JavaScript对象模型与事件处理
"javascript 对象模型与事件处理.pdf" JavaScript对象模型与事件处理是JavaScript编程中至关重要的概念，它们构成了JavaScript在Web开发中的基础。JavaScript是一种面向对象的语言，它的对象模型描述了对象间的层次...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值