目录
阅读以下文章前具备的基础知识：HTML+CSS+JavaScript 掌握基本编程思想，还怕什么代码？
DHTML
DHTML：动态的 HTML，包含 HTML，CSS，JavaScript，DOM。
- HTML：负责提供标签，对数据进行标记封装。
- CSS：负责提供样式属性，对数据进行样式的定义。
- DOM：全称 document object model 文档 对象 模型，负责将标记文档和标签等内容解析成对象，并在对象中定义属性和行为。
- JavaScript：负责的是页面的行为。动态效果的体现，需要程序设计语言来完成。
这 4 项技术结合起来就是 DHTML。
DOM 概述
DOM：全称 document object model 文档 对象 模型
何为 DOM？：通过 JavaScript，可以重构整个 HTML 文档。可以添加、移除、改变或重排页面上的项目，也就是增删改查。
- 文档：标记型文档（HTML，XML）。
- 对象：将文档或者文档中的标签等内容都封装到了对象中。
- 模型：只要是标记型文档都通用。
由来：
为了实现动态效果。需要对页面中的标签进行操作，操作所需的属性和行为都可以定义到标签对象中。
只要找到了要操作的标签，就可以调用该标签对象的属性和方法。来完成对该标签的操作。
所以就需要有一个可以将标签解析成对象的技术，这个技术就是 DOM。
DOM 树
到底如何解析？：从标记型文档开始，逐一解析，将标记型文档封装成 Document 对象。接着将解析到的标签按照层次关系封装成对象。以及属性和文本全都变成对象。
Document 下解析的结构可称为：元素，节点，对象。专业术语为（节点）。
最后在内存中形成了一个具有层次关系的 DOM 树。通过树中的节点对象的方法就可以对这些节点进行操作。
可以实现最基本的节点操作：增删改查。
BOM
BOM：全称 Browser Object Model，浏览器 对象 模型。
浏览器也被封装成了对象。
- window 对象：浏览器窗口对象，document、location、history、navigator、screnen、 是 window 对象下的属性（对象）。
- history：可以操作历史记录的对象。
- location：可以操作地址栏的对象。
- document：可以操作文档数据的对象。
演示 location 对象：打开新的超链接
<!DOCTYPE html>
<html>
<head>
<title>BOM Location Demo</title>
</head>
<body>
<!-- 定义脚本，跳转方法 -->
<script type="text/JavaScript">
function openLink() {
window.location.href = "https://www.baidu.com";
// window 对象可以不用写
// wocation.href = "https://www.baidu.com";
}
</script>
<!-- 按钮 -->
<button onClick="openLink()">打开百度</button>
</body>
</html>DOM 获取节点的方法（主要知识）
DOM 的编程思想：其实就是不断的对 DOM 树中的节点进行操作。
而操作节点的前提：就是必须先获取节点。
获取 HTML 文档中的节点对象：document。方法如下：
| document.getElementById(String) | 返回对拥有指定 id 的第一个对象的引用。 |
| document.getElementsByClassName(String) | 返回文档中所有指定类名的元素集合（数组），作为 NodeList 对象。 |
| document.getElementsByTagName(String) | 返回带有指定标签名的对象集合（数组）。 |
| document.getElementsByName(String) | 返回带有指定名称的对象集合（数组）。 |
演示：
<!DOCTYPE html>
<html>
<head>
<title>DOM Demo</title>
</head>
<body>
<script type="text/JavaScript">
// ID
function getIdNode() {
var idNode = document.getElementById("myId");
alert(idNode.innerHTML); // innerHTML 属性的意思是标签中的 HTML 文档内容
}
// ClassName
function getClassNameNodes() {
var classNodes = document.getElementsByClassName("clas"); //返回的是集合（数组）
for (var index = 0; index < classNodes.length; index++) {
alert(classNodes[index].innerHTML);
}
}
// TagName
function getTagNameNodes() {
// 根据表达式运算的优先级，得到标签集合后直接拿第一个标签
var tableNode = document.getElementsByTagName("table")[0];
var divNode = tableNode.getElementsByTagName("div")[0];
alert(divNode.innerHTML);
}
// Name
function getNameNodes() {
var NameNodes = document.getElementsByName("nameTag");
for (var index = 0; index < NameNodes.length; index++) {
alert(NameNodes[index].value);
}
}
</script>
<!-- getElementById() -->
<div id="myId">My ID in text</div>
<button onClick="getIdNode()">获取 ID 节点</button>
<hr/>
<!-- getElementsByClassName() -->
<div class="clas">My Class index 0 DIV text</div>
<div class="clas">My Class index 1 DIV text</div>
<button onClick="getClassNameNodes()">获取 ClassName 节点</button>
<hr/>
<!-- getElementsByTagName() -->
<table>
<tbody>
<tr>
<td>
<div>My table tag in DIV</div>
</td>
</tr>
</tbody>
</table>
<button onClick="getTagNameNodes()">获取 TagName 节点</button>
<hr/>
<!-- getElementsByName() -->
<!-- 并不是所有标签都有 name 属性，常见的标签在表单中有 -->
<input style="width: 200px" type="text" name="nameTag" value="My Name node index 0 input"/><br/>
<input style="width: 200px" type="text" name="nameTag" value="My Name node index 1 input"/><br/>
<button onClick="getNameNodes()">获取 Name 节点</button>
</body>
</html>增删改查方法操作
1. 查询 DOM 方法
例子如上个例子，document 对象中的方法：
- document.getElementById(String)：返回指定 ID 的第一个节点。
- document.getElementsByClassName(String)：返回指定包含此 类名 的节点集合。
- document.getElementsByTagName(String)：返回指定包含此 标签名 的节点集合。
- document.getElementsByName(String)：返回指定包含此 属性名 的节点集合。
2. 删除 DOM 方法
删除节点的思想：获取要删除的子节点对象，以及子节点的父节点对象，通过父节点调用 removeChild(子节点对象) 方法进行删除。
<!DOCTYPE html>
<html>
<head>
<title>DOM Demo</title>
</head>
<body>
<script type="text/JavaScript">
function removeNode() {
// 获取父节点和子节点
var childNode = document.getElementsByTagName("p")[0];
var parentNode = document.getElementsByTagName("div")[0];
// 通过父节点删除子节点
parentNode.removeChild(childNode);
}
</script>
<div>
<p><font color="green" size="24px">求你删除我哦，这样我才变得有意义</font></p>
</div>
<hr/>
<button onClick="removeNode()">删除节点</button>
</body>
</html>3. 增加 DOM 方法
增加节点的思想：通过 document 的创建节点对象的方法，然后找到要添加新节点的节点，调用 appendChild(新节点) 方法就可以添加新节点。
常用方法：
| document.createElement(String)，String为要创建的标签名 | 创建元素节点 |
document.createAttribute(String)，String为要创建的属性名， 然后通过返回的 属性对象.value = 为属性赋值。 |
创建一个属性节点 |
| document.createTextNode(String) | 创建文本节点 |
| 标签节点.setAttributeNode(属性对象) | 设置属性节点 |
| 标签节点.appendChild(标签节点对象) | 添加标签节点 |
<!DOCTYPE html>
<html>
<head>
<title>DOM Demo</title>
</head>
<body>
<script type="text/JavaScript">
function addNode() {
// 创建元素
var p = document.createElement("p");
var font = document.createElement("font");
// 创建属性，并设置值
var textColor = document.createAttribute("color");
var textSize = document.createAttribute("size");
textColor.value = "red";
textSize.value = "24px";
// 创建文本节点
var textNode = document.createTextNode("节点将改变 DOM 世界");
// 设置元素属性
font.setAttributeNode(textColor);
font.setAttributeNode(textSize);
// 添加节点
font.appendChild(textNode);
p.appendChild(font);
var div = document.getElementsByTagName("div")[0];
div.appendChild(p);
}
</script>
<div>
<p><font size="26px">Hello HTML DOM</font></p>
</div>
<hr/>
<button onClick="addNode()">添加节点</button>
</body>
</html>4. 修改 DOM 方法
修改 DOM 思想：找到要修改的节点，通过属性名进行赋值即可。
4.1 修改 DOM 内容
标签的 innerHTML 属性，在标签中表示尖括号 <></> 内部的所有 HTML 文档字符串。
<!DOCTYPE html>
<html>
<head>
<title>DOM Demo</title>
</head>
<body>
<script type="text/JavaScript">
function modifyInnerHTML() {
// 获取文本框输入的内容
var text = document.getElementsByName("textBox")[0].value;
// 修改文本
var font = document.getElementsByTagName("font")[0];
font.innerHTML = text;
}
</script>
<div>
<p><font size="26px" color="red">Hello HTML DOM</font></p>
</div>
<hr/>
输入内容：<input type="text" name="textBox"/>
<button onClick="modifyInnerHTML()">修改节点内容</button>
</body>
</html>4.2 修改属性值
下面是直接调用标签的属性进行赋值的，当然也可以创建属性，进行设置值。
<!DOCTYPE html>
<html>
<head>
<title>DOM Demo</title>
</head>
<body>
<script type="text/JavaScript">
function modifyAttribute() {
// 获取文本框输入的颜色和大小
var color = document.getElementsByName("textBox")[0].value;
var size = document.getElementsByName("textBox")[1].value;
// 修改属性
var font = document.getElementsByTagName("font")[0];
font.color = color;
font.size = size + "px";
}
</script>
<div>
<p><font size="1px" color="red">输入颜色单词（如：blue、green、orange、black），或ARGB颜色代码（如：#FF0000、#00FF00、#0000FF）<br/>大小仅可填数字</font></p>
</div>
<hr/>
Color：<input type="text" name="textBox"/><br/>
Size：<input type="text" name="textBox"/><br/>
<button onClick="modifyAttribute()">修改节点属性值</button>
</body>
</html>4.3 修改 DOM Css样式
修改CSS样式：无非就是通过标签中的 style 属性对象，通过 style 对象再调用它的属性进行赋值即可。
<!DOCTYPE html>
<html>
<head>
<title>DOM Demo</title>
</head>
<body>
<script type="text/JavaScript">
function modifyCSS() {
// 获取文本框输入的颜色和大小
var color = document.getElementsByName("textBox")[0].value;
var size = document.getElementsByName("textBox")[1].value;
// 修改属性
var font = document.getElementsByTagName("font")[0];
font.style.color = color;
font.style.fontSize = size + "px";
}
</script>
<div>
<p><font>输入颜色单词（如：blue、green、orange、black），或ARGB颜色代码（如：#FF0000、#00FF00、#0000FF）<br/>大小仅可填数字</font></p>
</div>
<hr/>
Color：<input type="text" name="textBox"/><br/>
Size：<input type="text" name="textBox"/><br/>
<button onClick="modifyCSS()">修改节点样式属性值</button>
</body>
</html>API 文档手册网站
本文含有隐藏内容，请 开通VIP 后查看