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

news2024/9/20 8:09:53

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>链接元素的URL	getElementById("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>