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

1. 文档对象模型（DOM）

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

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

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

2. 获取对象的方法

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

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

javascript 复制代码

<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对象

javascript 复制代码

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

2. getElementsByClassName

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

javascript 复制代码

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

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

3. getElementsByTagName

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

html 复制代码

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

4. querySelector

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

javascript 复制代码

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

举例：

html 复制代码

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

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

5. querySelectorAll

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

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

javascript 复制代码

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

6. getElementsByName

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

javascript 复制代码

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

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

javascript 复制代码

<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属性

javascript 复制代码

<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属性，作为字符串处理多个类名

javascript 复制代码

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

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

javascript 复制代码

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 |

小练习

网页简易计算器

html 复制代码

<!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>