HTML DOM

news2024/11/18 7:47:06

通过 HTML DOM,可访问 JavaScript HTML 文档的所有元素。


HTML DOM (文档对象模型)

当网页被加载时,浏览器会创建页面的文档对象模型(Document Object Model)。

HTML DOM 定义了用于 HTML 的一系列标准的对象,以及访问和处理 HTML 文档的标准方法。通过 DOM,你可以访问所有的 HTML 元素,连同它们所包含的文本和属性。

HTML DOM 独立于平台和编程语言。它可被任何编程语言诸如 Java、JavaScript 和 VBScript 使用。

HTML DOM 模型被构造为对象的树:

HTML DOM 树

通过可编程的对象模型,JavaScript 获得了足够的能力来创建动态的 HTML。

  • JavaScript 能够改变页面中的所有 HTML 元素

  • JavaScript 能够改变页面中的所有 HTML 属性

  • JavaScript 能够改变页面中的所有 CSS 样式

  • JavaScript 能够对页面中的所有事件做出反应


查找 HTML 元素

通常,通过 JavaScript,您需要操作 HTML 元素。

为了做到这件事情,您必须首先找到该元素。有三种方法来做这件事:

  • 通过 id 找到 HTML 元素

  • 通过标签名找到 HTML 元素

  • 通过类名找到 HTML 元素


通过 id 查找 HTML 元素

在 DOM 中查找 HTML 元素的最简单的方法,是通过使用元素的 id。

本例查找 id="intro" 元素:

实例

var x=document.getElementById("intro");

尝试一下 »

如果找到该元素,则该方法将以对象(在 x 中)的形式返回该元素。

如果未找到该元素,则 x 将包含 null。


通过标签名查找 HTML 元素

本例查找 id="main" 的元素,然后查找 id="main" 元素中的所有 <p> 元素:

实例

var x=document.getElementById("main");

var y=x.getElementsByTagName("p");

尝试一下 »


通过类名找到 HTML 元素

本例通过 getElementsByClassName 函数来查找 class="intro" 的元素:

实例

var x=document.getElementsByClassName("intro");

尝试一下 »


HTML DOM 教程

在本教程接下来的篇幅中,您将学到:

  • 如何改变 HTML 元素的内容 (innerHTML)

  • 如何改变 HTML 元素的样式 (CSS)

  • 如何对 HTML DOM 事件作出反应

  • 如何添加或删除 HTML 元素

相关教程

JavaScript 和 HTML DOM 参考手册

javascript DOM知识脑图

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/388977.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

Compaction的原理与Hbase Compaction实现

HBase中的用户数据在LSM树体系架构中最终会形成一个一个小的HFile文件。我们知道&#xff0c;HFile小文件如果数量太多会导致读取低效。为了提高读取效率&#xff0c;LSM树体系架构设计了一个非常重要的模块——Compaction。Compaction核心功能是将小文件合并成大文件&#xff…

现代C++教程 笔记

写在前面 记录一下《现代C教程》中的要点。 现代C是指C11之后的语法特性&#xff0c;如无特别说明&#xff0c;下面的语法特性均是C11后才可使用。 一、语言可用性的强化 1. 常量 1.1 nullptr 作用&#xff1a; 代替NULL赋空指针&#xff1b; 使用&#xff1a; char *a …

进制的转换:

任意进制转换成十进制&#xff1a;十进制数位置上数*当前进制的位权二进制与八进制、十六进制之间的转换&#xff1a;3个二进制一个8进制4个二进制一个16进制各种进制的书写方式:十进制转换任意进制,分为整数部分和小数部分&#xff1a;整数部分&#xff08;除基取余法&#xf…

SpringCloud的五大组件功能

SpringCloud的五大组件 EurekaRibbonHystrixZuulConfig 一、Eureka 作用是实现服务治理&#xff0c;即服务注册与发现。 Eureka服务器相当于一个中介&#xff0c;负责管理、记录服务提供者的信息。服务调用者不需要自己寻找服务 &#xff0c;而是把需求告诉Eureka &#x…

IronWebScraper 2023.2.2 Crack

关于 .NET 的 IronWebScraper 用于从 HTML Web 应用程序中提取干净的结构化数据的 C# 框架。 IronWebScraper for .NET 是一个 C# 网络抓取库&#xff0c;它允许开发人员模拟和自动化人类浏览行为&#xff0c;以从 Web 应用程序中提取内容、文件和图像作为本机 .NET 对象。Iron…

基于Flink SQL CDC Mysql to Mysql数据同步

基于Flink SQL CDC Mysql to Mysql数据同步 Flink CDC有两种方式同步数据库&#xff1a; 一种是通过FlinkSQL直接输入两表数据库映射进行数据同步&#xff0c;缺点是只能单表进行同步&#xff1b;一种是通过DataStream开发一个maven项目&#xff0c;打成jar包上传到服务器运行…

考研第一天,汤家凤基础班,连续与极限复习笔记

函数连续极限性质保号性证明极值点&#xff1a;夹逼准则二项式展开根号下&#xff0c;大于一&#xff0c;小于一的讨论直接放缩求和分子分母齐次&#xff0c;且分母大一次&#xff0c;用积分单调有界存在极限几个重要的切线放缩证明有界&#xff0c;然后放缩求单调证明有界&…

智慧高校数字化校园数据中心建设方案

本资料来源网络&#xff0c;知识分享&#xff0c;仅供个人学习&#xff0c;请勿商用。完整资料阅览见文末&#xff0c;部分资料内容&#xff1a; 一、 云数据中心建设规划云计算平台逻辑架构图 云设施即服务(IaaS&#xff0c;Cloud Infrastructure as a Service)&#xff1a;系…

信息系统项目管理师——信息化和信息系统

信息的特征&#xff08;掌握&#xff09; 1、客观性 2、普遍性 3、无限性 4、动态性&#xff1a;信息是随着时间的变化而变化的。 5、相对性 6、依附性&#xff1a; 1&#xff09;信息是客观世界的反映&#xff0c;任何信息必然由客观事物所产生&#xff0c;不存在无源的信息。…

视觉SLAM十四讲ch5 相机与图像笔记

视觉SLAM十四讲ch5 相机与图像本讲目标上讲回顾相机模型小孔成像模型&#xff08;单目模型&#xff09;畸变双目模型RGB-D相机本讲目标 ●理解理解针孔相机的模型、内参与径向畸变参数。 ●理解一个空间点是如何投影到相机成像平面的。 ●掌握OpenCV的图像存储与表达方式。 ●…

synchronized原理(轻量级,锁膨胀,自旋,偏向锁)

轻量级锁 轻量级锁的使用场景&#xff1a;如果一个对象虽然有多线程要加锁&#xff0c;但加锁的时间是错开的&#xff08;也就是没有竞争&#xff09;&#xff0c;那么可以使用轻量级锁来优化。 轻量级锁对使用者是透明的&#xff0c;即语法仍然是 synchronized。 轻量级锁加…

c++11 标准模板(STL)(std::unordered_map)(三)

定义于头文件 <unordered_map> template< class Key, class T, class Hash std::hash<Key>, class KeyEqual std::equal_to<Key>, class Allocator std::allocator< std::pair<const Key, T> > > class unordered…

学习 Python 之 Pygame 开发魂斗罗(九)

学习 Python 之 Pygame 开发魂斗罗&#xff08;九&#xff09;继续编写魂斗罗1. 在子弹类中修改敌人发射子弹的位置2. 创建显示敌人子弹的函数3. 解决敌人不会向下掉落的问题4. 给敌人碰撞体组增加碰撞体5. 解决敌人叠加在一起的问题继续编写魂斗罗 在上次的博客学习 Python 之…

linux入门---如何实现用户切换

目录标题基本用户认识用户的切换susu -exitsu 用户名sudo基本用户认识 在linux系统中将用户分为两个大类一个是root用户一个是普通用户&#xff0c;root用户是linux操作系统的超级管理员&#xff0c;相当于古代的皇帝不会受到任何的权限约束&#xff0c;而普通用户就会受到权限…

循环缓冲区概述

传送门 >> AutoSAR入门和实战系列总目录 文章目录概述使用循环缓冲区机制循环缓冲区、循环队列、循环缓冲区或环形缓冲区是一种数据结构&#xff0c;它使用单个固定大小的缓冲区&#xff0c;就好像它是端到端连接的一样。这种结构很容易用于缓冲数据流。 概述 循环缓冲…

Linux性能学习(2.2):内存_进程线程内存分配机制探究

文章目录1 进程内存分配探究1.1 代码1.2 试验过程2 线程内存分配探究2.1 代码2.2 试验过程3 总结参考资料&#xff1a;1. 嵌入式软件开发杂谈&#xff08;3&#xff09;&#xff1a;Linux下内存与虚拟内存2. 嵌入式软件开发杂谈&#xff08;1&#xff09;&#xff1a;Linux下最…

Cookie+Session详解

文章目录批量删除会话技术简介CookieCookie 查看Cookie 的删除Cookie 使用页面获取 cookie 信息cookie 特点Sessionsession 的使用Session 登录权限验证过滤器简介过滤器的使用WebFilter 注解过滤放行登录权限验证批量删除 servlet 类 dao 层 会话技术 简介 在计算机领域…

论文阅读_近端策略优化_PPO

论文信息 name_en: Proximal Policy Optimization Algorithms name_ch: 近端策略优化算法 paper_addr: http://arxiv.org/abs/1707.06347 date_publish: 2017-08-28 if: IF 8.665 Q1 B1 Top EI author: John Schulman citation: 9685 读后感 PPO近端策略优化是一种强化学习算…

Linux 练习四 (目录操作 + 文件操作)

文章目录1 基于文件指针的文件操作1.1 文件的创建&#xff0c;打开和关闭1.2 文件读写操作2 基于文件描述符的文件操作2.1 打开、创建和关闭文件2.2 文件读写2.3 改变文件大小2.4 文件映射2.5 文件定位2.6 获取文件信息2.7 复制文件描述符2.8 文件描述符和文件指针2.9 标准输入…

Git标签与版本发布

1. 什么是git标签 标签&#xff0c;就类似我们阅读时的书签&#xff0c;可以很轻易找到自己阅读到了哪里。 对于git来说&#xff0c;在使用git对项目进行版本管理的时候&#xff0c;当我们的项目开发到一定的阶段&#xff0c;需要发布一个版本。这时&#xff0c;我们就可以对…