JavaScript DOM编程

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

#JAVAScript Dom

本文深入讲解了DOM（文档对象模型）的基本概念，包括其在HTML和XML文档中的应用，以及如何使用JavaScript进行DOM操作，如节点的查询、创建、插入、删除和修改。同时，文章还介绍了事件监听的实现方式，提供了多个实践案例，如爱好选择和员工管理，帮助读者掌握DOM编程的核心技能。

 

 

JavaScript DOM编程

 

 

 

  1.  DOM概述
    1. 什么是DOM?
  1. DOM= Document Object Model，文档对象模型， DOM 是 W3C（万维网联盟）的标准。DOM 定义了访问 HTML 和 XML 文档的标准：独立于平台和语言的接口. W3C DOM 标准被分为 3 个不同的部分：
    1. 核心 DOM - 针对任何结构化文档的标准模型
    2. XML DOM - 针对 XML 文档的标准模型
    3. HTML DOM - 针对 HTML 文档的标准模型

 

    1. 什么是HTML DOM?
  2. HTML DOM 定义了访问和操作HTML文档的标准方法。
  3. HTML DOM 把 HTML 文档呈现为带有元素、属性和文本的树结构（节点树）
  4. 当我们用浏览打开一个html文件时, 浏览器内置的HTML解析引擎就会将整个文档加载到内存中, 并根据HTML DOM定义的接口和实现类生成一个包含文件内所有数据的DOM对象树.

 

<html>

   <head>

      <title>文档标题</title>

   </head>

   <body>

      <h1>我的标题</h1>

      <a href="http://www.atguigu.com">我的链接</a>

   </body>

</html>

 

 

 

  1. HTML DOM核心: 节点
    1. HTML节点(Node)
  1. HTML文档中的每个成分都是一个节点。
    1. 整个文档是一个文档节点(Document)
    2. 每个 HTML 标签是一个元素节点(Element)
    3. 每一个 HTML 属性是一个属性节点(Attribute)
    4. 包含在 HTML 元素中的文本是文本节点(Text
    1. Node层次
  2. DOM中的节点彼此都有等级关系。
  3. HTML 文档中的所有节点组成了一个文档树（或节点树）。HTML 文档中的每个元素、属性、文本等都代表着树中的一个节点。树起始于文档节点，并由此继续伸出枝条，直到处于这棵树最低级别的所有文本节点为止。
    1. HTML DOM节点树
  1. 一棵节点树中的所有节点彼此都是有关系的

<html>

  <head>

    <title>DOM Tutorial</title>

  </head>

  <body>

    <h1>DOM Lesson one</h1>

    <p>Hello world!</p>

  </body>

</html>

 

父节点

除文档节点之外的每个节点都有父节点

子节点

大部分元素节点都有子节点

同辈节点

当节点分享同一个父节点时，它们就是同辈

后代节点

后代指某个节点的所有子节点

先辈节点

先辈是某个节点的父节点，或者父节点的父节点，以此类推

  1. DOM操作
    1. HTML DOM访问节点(查询)

对象类型

属性/方法

说明

文档/元素节点

getElementById(id)

根据标签的id得到对应的标签对象

文档/元素节点

getElementsByTagName(tag)

根据标签名得到对应的所有子标签对象的集合(数组)

 

 

 

节点

nodeName

得到节点名

节点

nodeValue

得到节点的值

节点

nodeType

节点类型值

 

 

 

元素节点

childNodes

得到所有子节点的集合(数组)

元素/文本节点

parentNode

得到父节点对象(标签)

元素节点

firstChild

得到第一个子节点(标签/文本)

元素节点

lastChild

得到最后一个子节点(标签/文本)

 

 

 

元素节点

getAttributeNode(attrName)

根据属性名标签的属性节点

 

    1. HTML DOM的增删改

对象类型

属性/方法

说明

文档节点

createElement(tagName)

创建一个新的元素节点对象

文档节点

createTextNode(text)

创建一个文本节点对象

 

 

 

元素节点

appendChild(node)

将指定的节点添加为子节点

元素节点

insertBefore(new,target)

在指定子节点的前面插入新节点

 

 

 

元素节点

replaceChild(new, old)

用新节点替换原有的旧子节点

元素节点

removeChild(childNode)

删除指定的子节点

元素节点

setAttribute(name, value)

为标签添加一个属性

元素节点

removeAttribute(name)

删除指定的属性

 

 

 

元素节点

innerHTML

向标签中添加一个标签

 

 

 

<html>

<head>

<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">

<title>HTML DOM编程测试</title>

<style type="text/css">

ul {

    list-style-type: none;

}

 

li {

    border-style: solid;

    border-width: 1px;

    padding: 5px;

    margin: 5px;

    background-color: #99ff99;

    float: left;

}

 

.out {

    width: 400px;

    border-style: solid;

    border-width: 1px;

    margin: 10px;

    padding: 10px;

    float: left;

}

</style>

</head>

<body>

    <div class="out">

       <p>你喜欢哪个城市?</p>

       <ul id="city">

           <li id="bj" name="BeiJing">北京</li>

           <li>上海</li>

           <li id="dj">东京</li>

           <li>首尔</li>

       </ul>

       <br>

       <div id="inner"></div>

    </div>

</body>

</html>

 

  1. 事件监听
    1. 添加事件监听
  1. 页面的很多交互操作都是通过在一些页面视图上添加事件监听的方式来实现的
  2. 给标签添加事件属性

<button onclick="showMsg()">Click Me</button>

 

  1. 给标签对象添加事件属性

var btnEle = document.getElementById("btn");

btnEle.onclick = function(){

alert("Thank you, baby!!!!!");

};

 

    1. 事件回调函数之this
  2. 在事件函数的回调函数中, this代表发生事件所有的视图对象, 经常利用this来获取数据
  1. 练习
    1. 练习1: 爱好选择
  1. 技术点:
    1. DOM节点的查找
    2. 添加事件监听
    3. checkbox的操作
    4. 逻辑能力
    5. 重构能力
  2. 效果图

  1. 页面

<body>

    <form method="post" action="">

       你爱好的运动是？

<input type="checkbox" id="checkedAll_2"/>全选/全不选

       <br/>

        <input type="checkbox" name="items" value="足球"/>足球

       <input type="checkbox" name="items" value="篮球"/>篮球

       <input type="checkbox" name="items" value="羽毛球"/>羽毛球

       <input type="checkbox" name="items" value="乒乓球"/>乒乓球

       <br/>

        <input type="button" id="CheckedAll" value="全　选"/>

        <input type="button" id="CheckedNo" value="全不选"/>

        <input type="button" id="CheckedRev" value="反　选"/>

   

       <input type="submit" id="send" value="提　交"/>

    </form>

</body>

 

    1. 练习2: 员工管理
  2. 技术点:
    1. DOM节点的CRUD操作
    2. 添加事件监听
    3. 逻辑能力
    4. 重构能力
  3. 效果图

  1. 页面

 

<center>

    <br> <br> 添加新员工 <br> <br> name: <input type="text"

       name="name" id="name" />&nbsp;&nbsp; email: <input type="text"

       name="email" id="email" />&nbsp;&nbsp; salary: <input type="text"

       name="salary" id="salary" /> <br> <br>

    <button id="addEmpButton">Submit</button>

    <br> <br>

    <hr>

    <br> <br>

    <table  border="1" cellpadding="5" cellspacing=0>

       <tbody id="employeetable">

           <tr>

              <th>Name</th>

              <th>Email</th>

              <th>Salary</th>

              <th>&nbsp;</th>

           </tr>

           <tr>

              <td>Tom</td>

              <td>tom@tom.com</td>

              <td>5000</td>

              <td><a href="deleteEmp?id=001">Delete</a></td>

           </tr>

           <tr>

              <td>Jerry</td>

              <td>jerry@sohu.com</td>

              <td>8000</td>

              <td><a href="deleteEmp?id=002">Delete</a></td>

           </tr>

           <tr>

              <td>Bob</td>

              <td>bob@tom.com</td>

              <td>10000</td>

              <td><a href="deleteEmp?id=003">Delete</a></td>

           </tr>

       </tbody>

    </table>

</center>

 

 

 

 

 

随书光盘+PDF JavaScript DOM编程艺术(第2版)-源代码2.5MB PDF114MB .zip
06-17
JavaScript DOM编程艺术(第2版)是一本深受开发者欢迎的书籍，主要涵盖了JavaScript语言在Web前端开发中的应用，特别是关于DOM（Document Object Model）的深入理解和实践。这本书的随书光盘包含了源代码和PDF电子版...
JavaScriptDOM编程艺术（第2版）PDF版本下载.txt
07-17
根据提供的文件信息，我们可以推断出这是一本关于JavaScript DOM编程技术的书籍——《JavaScript DOM编程艺术（第2版）》。尽管实际书籍内容并未给出，但从标题、描述及部分链接信息来看，这本书主要涉及JavaScript...
javaScript DOM编程基础
niaonao
12-21 3748
javaScript Document Object Model; Document：文档，html文档与xml文档 Object：对象，javaScript document对象方法及属性 Model：模型 DOM是针对xml、html的基于树的API，DOM树定义了节点Node的接口以及许多节点类型来表示文档不同功能不同方面的节点
Javascript——DOM编程
热门推荐
Switch的博客
12-27 1万+
Javascript——DOM编程 基本概述     文档对象模型（Document Object Model，简称DOM），是W3C组织推荐的处理可扩展标志语言的标准编程接口。DOM可以以一种独立于平台和语言的方式访问和修改一个文档的内容和结构。换句话说，这是表示和处理一个HTML或XML文档的常用方法。DOM 可被 JavaScript 用来读取、改变 HTML、XHTML 以
《JavaScript DOM 编程艺术》-- 总结
m0_61535378的博客
10-05 768
今天看完了JavaScript DOM 编程艺术，大概是用了三个星期的时间陆陆续续看完的。这本书关于JavaScript的知识点不多，但是展现的确实和标题一样，着重的是结构分离和平稳退化的思想，对于刚入门的新手，可以很好地建立良好的编程意识。下面总结一下。
【亲测免费】 《JavaScript DOM编程艺术(第2版)》资源文件下载
gitblog_06739的博客
05-05 483
《JavaScript DOM编程艺术(第2版)》资源文件下载 【下载地址】JavaScriptDOM编程艺术第2版资源文件下载 探索JavaScript与DOM编程的奥秘，本开源项目为您提供《JavaScript DOM编程艺术(第2版)》的完整资源，包括随书光盘的源代码和电子书PDF。这些资源是Web开发人员学习和实...
JavaScript DOM 编程艺术
lucky_jiexia的博客
01-04 670
《JavaScript DOM 编程艺术》是JavaScript入门级的书，主要以案例形式推进学习，下面是我的读书笔记。   第二章 JavaScript语法 1、用JavaScript编写的代码必须通过HTML/XHTML文档才能执行。 第一种方式是将JavaScript代码放到文档&lt;head&gt;标签中的&lt;script&gt;标签之间。 一种更好的方式是把JavaScr...
JavaScript DOM 编程
web前端开发
12-07 238
DOM- D：文档 - html 文档或 xml 文档- O：对象 - document 对象的属性和方法- M：模型- DOM 是针对 xml 的基于树的API- DOM 树：节点的层...
《JavaScript DOM 编程艺术》
weixin_36986228的博客
02-01 945
JavaScript DOM编程艺术简略笔记
小賀のBlog
03-28 961
JavaScript DOM编程艺术一书的简略重点笔记
JavaScript DOM编程艺术（第2版）的简单总结
Shadow_killers的专栏
12-21 417
介绍 JavaScript DOM编程艺术（第2版）主要讲述了 JavaScript、DOM 和 HTML5 的基础知识，着重讲述了 DOM 编程，并通过几个实例演示了具有专业水准的网页开发。 下面介绍一下各章节的讲到的内容。 第1章 JavaScript简史 本章主要讲解JavaScript的发展简史、不同的浏览器会采用不同的办法来完成一样的任务，这会影响JavaScript的发展，而DOM标准化，让这种情况有所改变。而本书要讲的就是JavaScript和DOM一起完成的任务，不需要讨论浏览器。 第2章
JavaScript_DOM编程艺术.pdf
02-14
JavaScript DOM编程艺术是前端开发领域的一本重要书籍，旨在指导开发者如何高效地利用JavaScript操作文档对象模型（DOM）。DOM作为一种程序接口，通过它可以对HTML或XML文档进行动态访问和更新。本书详细介绍了DOM的...
JavaScript DOM编程艺术(第2版pdf)+源代码
02-26
JavaScript DOM编程艺术(第2版)是一本深受程序员喜爱的JavaScript技术书籍，专注于讲解如何使用JavaScript与Document Object Model（DOM）进行交互。DOM是Web页面的结构化表示，它允许我们通过编程方式操纵HTML和XML...
JavaScript DOM编程艺术【第2版&高清】.pdf
10-26
但是，根据标题《JavaScript DOM编程艺术【第2版&高清】.pdf》和描述“JavaScript DOM编程艺术，高清资源，无比经典，值得拥有”，我们可以推断这本书主要讲述了JavaScript中DOM（文档对象模型）的相关编程技术。...
多功能仿真软件Multisim中MC1496信号乘法混合电路仿真资源
最新发布
11-27
本资源包含了一个使用Multisim仿真软件实现的MC1496信号乘法混合电路的工程文件。此电路是根据网络上的电路图自主绘制的，旨在帮助电子爱好者、工程师及学生更好地理解和学习信号乘法混合电路的原理及其在实际应用中的表现。 文件描述 文件名：multisim仿真MC1496实现的信号乘法混合.rar 内容：Multisim仿真工程文件，包含电路图和相关仿真设置。 注意事项 本资源为仿真文件，运行前请确保已安装Multisim仿真软件。 电路图仅供参考，如有任何疑问或需要帮助，请根据个人学习途径寻求解答。 本资源中所包含的电路图是根据网上资料自主绘制，如有不准确之处，请以实际应用为准。 使用说明 解压下载的文件至指定文件夹。 打开Multisim软件，选择“打开工程”功能，找到并打开解压后的工程文件。 根据个人需求进行仿真实验或修改电路参数。
基于PyQt5的Python图书管理系统开发实践
11-27
采用PyQt5框架与Python编程语言构建图书信息管理平台 本项目基于Python编程环境，结合PyQt5图形界面开发库，设计实现了一套完整的图书信息管理解决方案。该系统主要面向图书馆、书店等机构的日常运营需求，通过模块化设计实现了图书信息的标准化管理流程。 系统架构采用典型的三层设计模式，包含数据存储层、业务逻辑层和用户界面层。数据持久化方案支持SQLite轻量级数据库与MySQL企业级数据库的双重配置选项，通过统一的数据库操作接口实现数据存取隔离。在数据建模方面，设计了包含图书基本信息、读者档案、借阅记录等核心数据实体，各实体间通过主外键约束建立关联关系。 核心功能模块包含六大子系统： 1. 图书编目管理：支持国际标准书号、中国图书馆分类法等专业元数据的规范化著录，提供批量导入与单条录入两种数据采集方式 2. 库存动态监控：实时追踪在架数量、借出状态、预约队列等流通指标，设置库存预警阈值自动提醒补货 3. 读者服务管理：建立完整的读者信用评价体系，记录借阅历史与违规行为，实施差异化借阅权限管理 4. 流通业务处理：涵盖借书登记、归还处理、续借申请、逾期计算等标准业务流程，支持射频识别技术设备集成 5. 统计报表生成：按日/月/年周期自动生成流通统计、热门图书排行、读者活跃度等多维度分析图表 6. 系统维护配置：提供用户权限分级管理、数据备份恢复、操作日志审计等管理功能 在技术实现层面，界面设计遵循Material Design设计规范，采用QSS样式表实现视觉定制化。通过信号槽机制实现前后端数据双向绑定，运用多线程处理技术保障界面响应流畅度。数据验证机制包含前端格式校验与后端业务规则双重保障，关键操作均设有二次确认流程。 该系统适用于中小型图书管理场景，通过可扩展的插件架构支持功能模块的灵活组合。开发过程中特别注重代码的可维护性，采用面向对象编程范式实现高内聚低耦合的组件设计，为后续功能迭代奠定技术基础。 资源来源于网络分享，仅用于学习交流使用，请勿用于商业，如有侵权请联系我删除！
理工科研究生学习课程-最优化理论与方法
11-27
文档主要为最优化理论与方法学习过程中的笔记记录，包含各类题型，牛顿法，最速下降法，单纯形法，动态规划法，大M法等
【硕士论文完美复现】【价格型需求响应】基于需求侧响应的配电网供电能力综合评估（Python代码实现）
11-27
【硕士论文完美复现】【价格型需求响应】基于需求侧响应的配电网供电能力综合评估（Python代码实现）内容概要：本文档是一份关于“基于需求侧响应的配电网供电能力综合评估”的硕士论文复现资源，重点围绕价格型需求响应展开，结合Python代码实现，对配电网在考虑用户侧响应情况下的供电能力进行建模与评估。内容涵盖电力系统中需求响应机制的设计、负荷调整模型的构建、优化算法的应用以及供电能力的量化分析，旨在通过仿真手段提升配电网运行效率与可靠性，并验证所提方法的有效性。文档还附带完整的代码资源链接，便于读者复现实验结果。; 适合人群：具备一定电力系统基础知识和Python编程能力的研究生、科研人员及从事智能电网相关工作的技术人员。; 使用场景及目标：①用于学习和复现硕士论文中的需求响应模型与供电能力评估方法；②支撑科研项目中对配电网灵活性与用户侧互动机制的研究；③为微电网、虚拟电厂等领域的优化调度提供技术参考。; 阅读建议：建议结合文中提供的网盘资源下载完整代码与数据，边运行代码边理解模型细节，重点关注需求响应建模与供电能力计算的实现逻辑，同时可扩展应用于其他优化场景。
掌握Javascript DOM编程技巧
从提供的文件信息来看，标题和描述重复了“Javascript DOM编程”这一主题，文件标签也简单直接地指向了“Javascript”和“DOM编程”。此外，压缩包子文件的文件名称列表只给出了一项“DOMscripting”。基于这些信息...
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
表情包 代码片
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值