JavaScript DOM编程、事件

最新推荐文章于 2025-05-05 14:32:57 发布
原创 最新推荐文章于 2025-05-05 14:32:57 发布 · 238 阅读 · 0 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#javascript

本文详细介绍了如何使用JavaScript操作DOM，包括获取、查看、修改DOM元素及其属性的方法，如getElementById及setAttribute等；并讲解了如何通过DOM操作实现节点的添加、删除、替换，以及常见的鼠标、键盘事件处理。

Element 对象

获取DOM元素对象

getElementById()
getElementsByName()
getElementsByTagName()
getElementsByClassName()

查看/修改属性

getAttribute('属性名')
setAttribute('属性名', '属性值')
style.color = 'red'
attributes

获取相关元素

  • 父元素
    • parentNode
  • 子元素
    • childNodes
    • firstChild
    • lastChild
    • firstElementChild
    • lastElementChild
  • 相邻元素
    • previousSibling
    • nextSibling
    • previousElementSibling
    • nextElementSibling

添加节点

document.createElement() 创建一个节点
e.cloneNode() 复制e
e.appendChild() 在e末尾添加节点
e.insertBefore(c, p) 在e中的p节点前添加c节点

删除和替换节点

removeChild(e) 删除节点e
replaceChild(new, old) 用new节点替换old节点

事件

鼠标事件

click
dbclick
mousedown
mousemove
mouseout
mouseover
mouseup

键盘事件

keydown
keypress
keyup

HTML事件

load
unload
select
change
focus
submit
reset
resize
scroll

精选资源
JavaScript_DOM编程艺术.pdf
02-14
事件是JavaScript编程中不可或缺的一部分，JavaScript DOM编程艺术详细介绍了事件的概念和机制。作者会介绍如何使用事件监听器来捕捉用户的交互行为，并为不同类型的事件（如点击、键盘输入、表单提交等）编写相应的...
JavaScriptDOM编程艺术（第2版）PDF版本下载.txt
07-17
根据提供的文件信息，我们可以推断出这是一本关于JavaScript DOM编程技术的书籍——《JavaScript DOM编程艺术（第2版）》。尽管实际书籍内容并未给出，但从标题、描述及部分链接信息来看，这本书主要涉及JavaScript...
JavaScript — DOM编程
2403_89893216的博客
04-16 1170
1. DOM树结构文档由节点（元素、属性、文本等）构成的树形结构，document对象是入口。元素节点可通过getElementById、querySelector、getElementsByClassName等方法获取。2. 节点操作增删改：createElement、appendChild、removeChild、replaceChild。属性/内容：setAttribute、textContent、innerHTML。3. 事件处理。
JavaScript DOM编程
weixin_62270300的博客
03-02 916
目录 一、什么是DOM? 二、动态改变文档内容的原理 三、Element常用属性 四、常用方法 1.创建和增加节点的方法 2.删除和替换节点的方法： 3.其他方法 五、使用JS操作表格 总结： 一、什么是DOM? 文档对象模型（Document Object Model） 通过DOM可以动态改变文档内容 二、动态改变文档内容的原理 解析文档（如HTML）并生成DOM树 通过DOM标准接口+编程语言改变文档内容 解析文档生成DOM树的过程 .
《JavaScript DOM 编程艺术》-- 总结
m0_61535378的博客
10-05 773
今天看完了JavaScript DOM 编程艺术，大概是用了三个星期的时间陆陆续续看完的。这本书关于JavaScript的知识点不多，但是展现的确实和标题一样，着重的是结构分离和平稳退化的思想，对于刚入门的新手，可以很好地建立良好的编程意识。下面总结一下。
JavaScript：DOM事件
博客网站 https://async-area.com
12-24 2255
讲解JavaScript中的事件，包括事件监听，事件冒泡，事件委托等技巧
JavaScript DOM 编程艺术
lucky_jiexia的博客
01-04 677
《JavaScript DOM 编程艺术》是JavaScript入门级的书，主要以案例形式推进学习，下面是我的读书笔记。   第二章 JavaScript语法 1、用JavaScript编写的代码必须通过HTML/XHTML文档才能执行。 第一种方式是将JavaScript代码放到文档<head>标签中的<script>标签之间。 一种更好的方式是把JavaScr...
JavaScript第十一讲：DOM编程“事件”练习题
星途码客的博客
06-06 602
“验证账号是否已存在”DOM事件练习题
《JavaScript DOM 编程艺术》
weixin_36986228的博客
02-01 949
【亲测免费】 《JavaScript DOM编程艺术(第2版)》资源文件下载
最新发布
gitblog_06739的博客
05-05 533
《JavaScript DOM编程艺术(第2版)》资源文件下载 【下载地址】JavaScriptDOM编程艺术第2版资源文件下载 探索JavaScript与DOM编程的奥秘，本开源项目为您提供《JavaScript DOM编程艺术(第2版)》的完整资源，包括随书光盘的源代码和电子书PDF。这些资源是Web开发人员学习和实...
谈谈 《 JavaScript - DOM编程艺术 》这本书
世界和我们都不该止步于此
02-17 776
好吧，现在已经2023年了，对于这本书（第二版）来说可能有点老了，这本书不是很难理解，但也不是很适合新手读，当然，这本书并不是百宝书 📕 ，它更注重于编程的规范与思路、用户的体验、实战演练，并且我在这本书中学到了不少东西，我决定将这些知识分享出来。
【JavaScript】1.4 事件和DOM操作
Andy0214的专栏
11-13 2951
事件和DOM操作是JavaScript中非常重要的概念。通过理解和使用事件和DOM操作，我们可以创建动态的、交互式的网页。在接下来的章节中，我们将深入学习更多关于JavaScript的知识。希望你在学习的过程中能够找到乐趣，并且通过学习JavaScript，开启你的编程之旅！
精选资源
随书光盘+PDF JavaScript DOM编程艺术(第2版)-源代码2.5MB PDF114MB .zip
06-17
JavaScript DOM编程艺术(第2版)是一本深受开发者欢迎的书籍，主要涵盖了JavaScript语言在Web前端开发中的应用，特别是关于DOM（Document Object Model）的深入理解和实践。这本书的随书光盘包含了源代码和PDF电子版...
JavaScript DOM编程艺术【第2版&高清】.pdf
10-26
要精通DOM编程，首先要对JavaScript语言本身有足够的理解，包括变量、数据类型、运算符、函数、对象、事件等基础知识。 2. DOM概念：DOM（Document Object Model）是一个跨平台和语言独立的接口，允许程序和脚本...
JavaScript DOM编程艺术(第2版pdf)+源代码
02-26
JavaScript DOM编程艺术(第2版)是一本深受程序员喜爱的JavaScript技术书籍，专注于讲解如何使用JavaScript与Document Object Model（DOM）进行交互。DOM是Web页面的结构化表示，它允许我们通过编程方式操纵HTML和XML...
java 8 实现简单的Servlet路由
dislido的博客
09-11 5052
使用注解方式创建Servlet类，doGet方法转向doPost方法 @WebServlet("/svc/*") public class MyServlet extends HttpServlet { @Override protected void doGet(HttpServletRequest req, HttpServletResponse resp) throws Ser
Kotlin Servlet
dislido的博客
09-06 1078
在项目中选中kotlin支持，其余准备工作与java完全相同创建Servlet类ktTest.HelloKtclass HelloKt : HttpServlet() { override fun doGet(req: HttpServletRequest?, resp: HttpServletResponse?) { resp?.contentType="text/html
Kotlin I/O操作
dislido的博客
09-01 876
Kotlin使用java原本的java.io库进行I/O操作并对其进行了扩展 fun main(vararg a:String) { val file = FileInputStream("test.txt") val data = ByteArray(1024) while (fis.read(data) != -1) { val s = String(d
Kotlin 类 对象 函数
dislido的博客
08-21 575
类定义类使用class声明类class Invoice { }// 如果一个类没有类体，可以省略花括号。 class Empty构造函数在 Kotlin 中的一个类可以有一个主构造函数和一个或多个次构造函数。 主构造函数是类头的一部分：它跟在类名（和可选的类型参数）后。 直接调用构造函数来创建类的实例，Kotlin中没有new关键字// 主构造函数写在类名后 class Class1 const
掌握Javascript DOM编程技巧
从提供的文件信息来看，标题和描述重复了“Javascript DOM编程”这一主题，文件标签也简单直接地指向了“Javascript”和“DOM编程”。此外，压缩包子文件的文件名称列表只给出了一项“DOMscripting”。基于这些信息...
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
表情包 代码片
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值