JavaScript - 对象编程之详解DOM对象

最新推荐文章于 2024-10-11 17:39:47 发布
最新推荐文章于 2024-10-11 17:39:47 发布
阅读量1k 收藏 23
点赞数 25
分类专栏： JavaScript 文章标签： javascript 开发语言 ecmascript 前端 css 前端框架
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_51222843/article/details/141970269
版权

1. 文档对象模型（DOM）

HTML DOM全称为HTML Document Object Model，专门适用于HTML/XHTML文档的对象模型。可以将HTML DOM理解为网页的API，将网页中的各种元素都看作一个对象，从而使网页中的元素也可以被计算机语言获取或编辑。

在使用DOM进行解析HTML对象的时候，首先在内存中构建一个完整的解析树，借此实现对整个XML文档的全面，动态访问。解析是有层次的，所有的HTML中的元素都解析成树上层次分明的节点，然后我们可以对这些节点执行添加，删除，修改以及查看等操作。

使用DOM对象常用于页面的一般显示，一般计算等功能。

2. 获取对象的方法

根节点由document对象表示 - 类比于HTML中的<html>标签

将document看作一棵树，获取跟节点的node以及对应的左右子节点

<script type='text/javascript'>
    var Origin = document.documentElement;
    alert(Origin.nodeName);
    var left_node = Origin.firstChild;
    alert(left_node);
    var right_node = Origin.leftChild;
    //可以一直循环，找到找到所有的标签
</script>

上述方法比较费时费力，在JavaScript中，可以通过多种方式获取和操作DOM

但通过以下所获取的内容是HTML文档中的标签内容，需要功能的增添还需要调用标签内部中的属性。

1. getElementById

通过元素的id获取DOM对象

let element = document.getElementById('myID')
alert(element.innerHTML);

2. getElementsByClassName

通过元素的class获取一组DOM对象，返回的是HTMLCollection（可以看做一个对象列表）

let items = document.getElementsByClassName('MyClassName');
console.log(items[0].innerHTML);

想要获取具有相同类名的多个元素时使用

3. getElementsByTagName

通过元素的标签名获取一组DOM对象，返回的是HTMLCollection

<html>
<p>1</p>
</html>
<script>
let paragraphs = document.getElementsByTagName('p');
console.log(paragraphs[0].innerHTML);
</script>

4. querySelector

通过CSS选择器获取第一个匹配的DOM对象

let element = document.querySelector('.myClass')

举例：

<div class='myClass'>Item 1</div>
<script>
    let item = document.querySelector('.myClass');
    console.log(item.innerHTML);
</script>

使用复杂的CSS选择器获取单个元素时使用最佳

5. querySelectorAll

通过CSS选择器获取所有匹配的DOM对象，返回NodeList

返回的NodeList可以任意取得想要的元素

let elements = document.querySelectorAll('.myClass');
<script>
    let items = document.querySelectorAll('.myClass');
    console.log(items[1].innerHTML);
</script>

6. getElementsByName

通过元素的name属性获取一组DOM对象，常用于表单元素

let elements = document.getElementsByName('username');

处理表单中具有相同name的多个元素时经常使用

<input type="text" name="username" value="Alice">
<input type="text" name="username" value="Bob">
<script>
    let usernames = document.getElementsByName("username");
    console.log(usernames[0].value);  // 输出: Alice
</script>

3. 事件驱动

通常鼠标或热键的动作称之为事件(Event)，而由鼠标或热键引发的一连串程序动作，称之为事件驱动(Event Driver)，而针对事件进行处理程序或函数，我们称之为事件处理程序(Event Handler)

主要事件：

• 引起页面之间跳转的事件，主要是超链接是假

• 事件浏览器自己引起的事件

• 事件在表单内部同界面对象交互

在之后专门一篇文章详解JavaScript中各个事件与其交互

4. DOM属性

<div id="myDiv">Hello, <b>world</b>!</div>

<script>
    let content = document.getElementById("myDiv").innerHTML;
    console.log(content);  // 输出: Hello, <b>world</b>!
</script>

总结：

• 内容相关：innerHTML, innerText, textContent, value, placeholder

• 样式与类：style, className, classList

• 表单相关：disabled, checked, readOnly

1. 内容相关

属性作用用法
innerHTML获取标签中的HTML，包括文档与标签getElementById("myDiv").innerHTML
innerText获取或设置元素的纯文本内容getElementById("myDiv").innerText
textContent获取或设置元素及其子元素的文本内容getElementById("myDiv").textContent
value用于获取或设置表单元素，如<input><textarea>的值getElementById("myDiv").value
src获取或设置图片，音视频等元素的资源路径；当前页面getElementById("myDiv").src
href获取或设置<a>链接元素的URLgetElementById("myDiv").href
placeholder获取或设置输入框<input><textarea>的占位符文本getElementById("myDiv").placeholder='';
attributes获取元素的所有属性getElementById("myDiv").attributes
title获取或设置元素的title属性，用于鼠标悬停时的提示文本getElementById("myDiv").title = "New tooltip text";

2. 样式与类

属性作用用法
style用于获取或设置元素的内联样式属性getElementById("myDiv").style.color
id获取或设置元素的id属性getElementById("myDiv").id = 'xxx'

className/

classList

如下所示如下所示

className:获取或设置元素的class属性，作为字符串处理多个类名

let className = document.getElementById("myDiv").className;
document.getElementById("myDiv").className = "newClass";

classList:提供对类名进行添加，删除，切换的更便捷方法

document.getElementById("myDiv").classList.add("newClass");
document.getElementById("myDiv").classList.remove("oldClass");
document.getElementById("myDiv").classList.toggle("toggleClass");

3. 表单相关

disabled获取或设置表单元素是否禁用getElementById("myCheckbox").disabled = true;
checked

用于获取或设置复选框<input type='checkbox'>或

单选框<input type='radio'>的选中状态

getElementById("myCheckbox").checked = true;
readOnly获取或设置表单元素是否为只读状态getElementById("myInput").readOnly = true;
scrollTop/scrollLeft获取或设置元素的滚动条位置getElementById("myDiv").scrollTop = 100; // 滚动到 100px

4. 小练习

网页简易计算器

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>第一个JavaScript程序</title>
		<style>
		label
		{
			width:100px;
			text-align:right;
			display:block;
			float:left;
		}
		section
		{
			width:260px;
			text-align:center;
		}
		</style>
		<script src='js/new.js'></script>
		<!-- 如果进行引用，在<script></script>之间不允许有代码 -->
	</head>
	<body>
		<section>
			<form name='myform' action='' method='get'>
				<p><label>汇款金额：</label><input type='text' name='txt'></p>
				<p><label>手续费：</label><input type='text' name='txtfee' readonly></p>
				<p><input type='button' value='确定' onclick='calc()'></p>
				<p><input type='button' onclick="appear()"></p>
				<p><input type='text' name='appea' readonly></p>
				<p><input type='button' value='计算' onclick='CalcF()'></p>
				<p><input type='text' name='textstring'></p>
				<p><input type='button' value='check' onclick='isRight()'></p>
			</form>
		</section>
	</body>
</html>

蒜蓉大猩猩
关注
专栏目录
DOM 简介 | 深入了解DOM
青春木鱼的博客
09-05 4856
W3C DOM由以下三部分组成：核心DOM - 针对任何结构化文档的标准模型。XML DOM - 针对XML文档的标准模型。HTML DOM - 针对HTML文档的标准模型。DOM是一种提供对文档访问或修改方法的模型，它的范围很广，但对于 web 开发者来说，往往都认为它是指JavaScript在浏览器访问和修改html 文档的一种技术，但实际上范围远不局限在这里。
JavaScript DOM 对象详解
xycxycooo的博客
07-16 927
在 JavaScript 编程中，DOM（Document Object Model）是指文档对象模型，它提供了一组用于与 HTML 文档进行交互的对象。DOM 是一种跨平台的、独立于语言的接口，它将 HTML 或 XML 文档表示为一个树形结构，其中每个节点都是一个对象，代表文档的一部分（如元素、属性、文本等）。通过 DOM，开发者可以添加、删除、修改和查询文档中的元素和内容。通过本文的详细讲解，相信你已经对 JavaScript 中的 DOM 对象有了全面的了解。方法可以通过元素的标签名获取元素集合。
【JavaScript】获取 DOM 对象的方法详解
lph159的博客
09-10 581
CSS 选择器是一种用于选择 HTML 元素的模式。通过 CSS 选择器，我们可以选择一个或多个网页中的元素并对其进行操作。在 JavaScript 中，CSS 选择器同样可以用于获取 DOM 元素。获取 DOM 对象是前端开发中的基础操作之一。通过本文的介绍，我们了解了多种获取 DOM 对象的方法，包括根据 CSS 选择器获取 DOM 对象的和，以及其他常用方法如等。每种方法都有其适用的场景，开发者应根据需求和性能权衡选择最合适的方式来获取 DOM 对象。
dom对象详解-document对象
u014163736的博客
02-23 1072
dom对象详解-document对象 dom编程最重要的一个对象 最复杂的 document对象代表的是整个html文档，因此可以访问到文档中的各个对象（元素）。 是学习dom编程的一个最关键所在 常用函数 write() 这个是向文档输出文本或是js代码 writeln（） 这个也是向文档输出文本或是js代码， 不同的是多一个换行符。但是实际上对于浏览器来说，输出效果并没有区别。 可在每个表达式后写一个换行符 getElementById() 规定html文档中id号...
Javascript之BOM与DOM讲解
热门推荐
晨港飞燕的专栏
05-13 8万+
一.Javascript组成JavaScript的实现包括以下3个部分：ECMAScript(核心)描述了JS的语法和基本对象。文档对象模型 （DOM）处理网页内容的方法和接口浏览器对象模型（BOM）与浏览器交互的方法和接口javascript 有三部分构成，ECMAScript，DOM和BOM，根据宿主（浏览器）的不同，具体的表现形式也不尽相同，ie和其他的浏览器风格迥异,IE 扩展了 BOM，...
JS---JS的DOM详解（四）
前端与计算机相关知识的分享，博主的qq523235674
02-06 915
1、DOM简介 1.1、什么是DOM 文档对象模型（Document Object Model，简称 DOM），是 W3C 组织推荐的处理可扩展标记语言（HTML或者XML）的标准编程接口 W3C 已经定义了一系列的 DOM 接口，通过这些 DOM 接口可以改变网页的内容、结构和样式。 文档：一个页面就是一个文档，DOM中使用doucument来表示 元素：页面中的所有标签都是元素，DOM中使用 element 表示 节点：网页中的所有内容都是节点（标签，属性，文本，注释等），DO.
React路由该如何使用？react-router-dom详解
ZhShy
10-16 2061
通过嵌套的书写Route组件实现对嵌套路由的定义。path开头为/的为绝对路径，反之为相对路径。可以在任何组件中使用Routes组件，且组件内的Routes中，路径默认带上当前组件的路径作为前缀。注意：此时定义父组件的路由时，要在后面加上/*，否则父组件将无法渲染。}使用，可以使用一个JS对象而不是Routes组件与Route组件来定义路由。其功能类似于react-router-configuseRoutes的返回是 React Element，或是 null。children?element?
你不知道的JavaScript--Item29 DOM基础详解
小平果的欢乐谷
11-08 1526
看完JavaScript高级程序设计，整理了一下里面的DOM这一块的知识点，比较多，比较碎！DOM在整个页面的地位如图：DOM（文档对象模型）是针对HTML 和XML 文档的一个API（应用程序编程接口）。DOM描,绘了一个层次化的节点树，允许开发人员添加、移除和修改页面的某一部分.1、节点层次DOM 可以将任何HTML 或XML 文档描绘成一个由多层节点构成的结构。节点分为几种不同的类型，每种类型
JavaScript DOM详解
m0_56649557的博客
07-25 439
什么是DOM
实现JavaScript的组成----BOM和DOM详解
10-22
标题所涉及的知识点是JavaScript的组成...上述内容涵盖了BOM和DOM在JavaScript中的角色和应用，进一步的学习需要对每个对象、属性和方法有更深入的理解，同时结合实际项目进行实践，以便更好地掌握JavaScript编程技能。
JavaScriptDOM编程艺术（第2版）PDF版本下载.txt
07-17
根据提供的文件信息，我们可以推断出这是一本关于JavaScript DOM编程技术的书籍——《JavaScript DOM编程艺术（第2版）》。尽管实际书籍内容并未给出，但从标题、描述及部分链接信息来看，这本书主要涉及JavaScript...
jQuery对象与DOM对象转换方法详解
10-22
jQuery对象和DOM对象是两个不同的概念，但它们在实际编程中经常需要互相转换，以便于利用各自的优点。下面我们将深入探讨这两种对象及其转换方法。 **jQuery对象** 是jQuery库中的一个集合，它封装了DOM元素，提供...
JavaScript事件对象深入详解
10-17
JavaScript事件对象是JavaScript编程中处理用户交互和动态更新页面的核心机制。事件对象(event object)包含了与事件相关的所有信息，如触发事件的元素、事件类型以及特定事件的额外数据。这篇深入详解将帮助我们理解...
解释器、预处理、main函数
编程语言技巧经验分享
10-07 1244
解释器覆盖范围很广，不管是解释语言的运行时解释翻译器，还是操作系统自带脚本的解释器。
React中的refs是什么？
Front end development engineer
10-10 270
React 的众多优点之一是它抽象了处理真实 DOM 的复杂性。现在，我们无需手动查询元素、绞尽脑汁思考如何为这些元素添加类又或者是添加样式等，也无需为浏览器兼容性而苦恼，只需编写组件并专注于用户体验即可。然而，仍然有一些情况（虽然很少！）我们需要访问实际的 DOM。而当涉及到实际的 DOM 时，最重要的是要理解并学习如何正确使用 ref 以及 ref 周围的一切。
【JavaScript】移动色块案例 实现一个可以拖动并且在拖动过程中会自动改变颜色的色块（JS 事件监听器）
最新发布
m0_66584716的博客
10-11 848
- **移动色块**：用户可以通过鼠标按住并拖动页面上的红色方块（`#blocks`）。当用户按下鼠标左键时，色块开始跟随鼠标的移动而移动；当用户释放鼠标左键时，色块停止移动。 - **显示当前位置**：随着色块的移动，其当前的屏幕坐标（相对于浏览器窗口）会被实时更新，并显示在页面底部左侧的位置显示区域（`#positionDisplay`）中。 - **自动变色**：一旦用户开始拖动色块，系统就会每隔300毫秒随机改变一次色块的颜色。颜色的变化是通过调用 `getRandomColor()` 函数生成一个
Puppeteer自动化：使用JavaScript定制PDF下载
ip16yun的博客
10-08 773
Puppeteer 是一个强大的Node.js库，提供了对无头Chrome或Chromium的控制，可以用于生成网页快照、抓取数据、自动化测试等任务。其中，生成PDF文件是一个常见的需求，本文将通过使用Puppeteer展示如何自动化生成定制的PDF，并使用代理IP、设置user-agent、cookie等技术来增强自动化过程的灵活性与稳定性。为了更好地理解如何定制Puppeteer生成的PDF文件，我们提供一个生成A4纸张格式的网页PDF的实例。用户可以根据需求自定义输出的PDF格式或内容。
JavaScript内置对象详解与DOM编程
JavaScript (JS) 是一种广泛使用的脚本语言，其内置对象为开发者提供了丰富的功能和便利性。本文档详细探讨了JS内置对象的核心特性及其在开发过程中的重要作用。 首先，Window对象是JS中的核心对象，它代表浏览器的...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值