JavaWeb 速通DOM
【摘要】 JavaWeb——JS内容补充 DOM的原理和使用。
目录
一、DOM快速入门
1.基本介绍 :
(1) DOM全称是Document Object Model，文档<--->对象模型，就是把文档中的标签，属性，文本等转换成为对象来管理。
(2) 文档会被映射为一棵由多个对象组成的有层次结构的树来进行管理，这就是DOM机制。
(3) DOM也可分为HTML DOM, CSS DOM, 以及XML DOM。
最重点的是html DOM；当网页被加载时，浏览器会创建页面的文档对象模型(Document Object Model)。html dom树如下图所示 ：
2.Document :
1° 简介
(1) document 管理了所有的 HTML 文档内容
(2) document 是一种有层级关系的树结构的文档。
(3) 在dom中,所有的标签都对象化。只要得到标签对应的dom对象，就可以通过dom对象的属性和方法来控制标签的展现方式。（注意文档本身是静态的,没有变化, 通过程序改变的只是在浏览器内存中的元素.）
(4) 通过 document 可以访问所有的标签对象
2° 常见方法表
查找 HTML 元素 :
| 方法 | 描述 |
|---|---|
| document.getElementById(id) | 通过元素 id 来查找元素 |
| document.getElementsByTagName(name) | 通过标签名来查找元素 |
| document.getElementsByClassName(name) | 通过类名来查找元素 |
改变 HTML 元素 :
| 方法 | 描述 |
|---|---|
| element.innerHTML = new html content | 改变元素的 inner HTML |
| element.attribute = new value | 改变 HTML 元素的属性值 |
| element.setAttribute(attribute, value) | 改变 HTML 元素的属性值 |
| element.style.property = new style | 改变 HTML 元素的样式 |
添加和删除元素 :
| 方法 | 描述 |
|---|---|
| document.createElement(element) | 创建 HTML 元素 |
| document.removeChild(element) | 删除 HTML 元素 |
| document.appendChild(element) | 添加 HTML 元素 |
| document.replaceChild(element) | 替换 HTML 元素 |
| document.write(text) | 写入 HTML 输出流 |
添加事件处理程序 :
| 方法 | 描述 |
|---|---|
| document.getElementById(id).onclick = function(){code} | 向 onclick 事件添加事件处理程序 |
二、DOM应用实例
1.弹出窗口案例 :
代码演示 :
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>first application</title>
<script type="text/javascript">
//Dynamic register
window.onload = function () {
var button_1 = document.getElementById("button_1");
button_1.onclick = function () {
//获取button_1dom对象对应的标签，所包含的文本内容
alert(button_1.innerText); //innerText，强调文本
alert(button_1.innerHTML); //innerHTML，强调标签
}
}
</script>
</head>
<body>
<button id="button_1"><span>Cyan_RA9</span></button>
<p>点击按钮来获取它的值</p>
</body>
</html>
运行效果（如下GIF图）：
2.多选框案例 :
代码演示 :
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Second application</title>
</head>
<script type="text/javascript">
function selectAll() {
//获取到fruit这组复选框
var fruits = document.getElementsByName("fruit"); //fruits是一个NodeList，即是一个集合。
for (var i = 0; i < fruits.length; ++i) {
fruits[i].checked = true;
}
}
function selectNone() {
var fruits = document.getElementsByName("fruit");
for (var i = 0; i < fruits.length; ++i) {
fruits[i].checked = false;
}
}
function selectReverse() {
var fruits = document.getElementsByName("fruit");
for (var i = 0; i < fruits.length; ++i) {
fruits[i].checked = !fruits[i].checked;
}
}
</script>
<body>
<span>你喜欢吃的水果：</span> <br/>
<input type="checkbox" name="fruit" value="grape"/>Grape
<input type="checkbox" name="fruit" value="watermelon"/>Watermelon
<input type="checkbox" name="fruit" value="strawberry"/>Strawberry
<input type="checkbox" name="fruit" value="blueberry"/>Blueberry <br/><br/>
<button onclick="selectAll()">全选</button>
<button onclick="selectNone()">全不选</button>
<button onclick="selectReverse()">反选</button>
</body>
</html>运行效果 : (如下GIF图)
3.图片切换案例 :
代码演示 ：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Third application</title>
<script type="text/javascript">
function changeImages() {
//getElementsByTagName方法可以通过标签名来获取对应的dom对象。
var images = document.getElementsByTagName("img");
var input1 = document.getElementById("input1");
if (input1.value == "点击将蓝色矢车菊切换为粉色") {
for (var i = 0; i < images.length; ++i) {
images[i].src = "../../../cornflower/" + (i+4) + ".jpg";
}
input1.value = "点击将粉色矢车菊切换为蓝色";
} else if (input1.value == "点击将粉色矢车菊切换为蓝色") {
for (var i = 0; i < images.length; ++i) {
images[i].src = "../../../cornflower/" + (i+1) + ".jpg";
}
input1.value = "点击将蓝色矢车菊切换为粉色";
}
}
</script>
</head>
<body>
<img src="../../../cornflower/1.jpg" height="100px"/>
<img src="../../../cornflower/2.jpg" height="100px"/>
<img src="../../../cornflower/3.jpg" height="100px"/> <br/>
<input type="button" value="点击将蓝色矢车菊切换为粉色" id="input1" onclick="changeImages()"/>
</body>
</html>运行效果（如下GIF图所示）:
4.动态增加图片案例 :
代码演示 ：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Fourth application</title>
<script type="text/javascript">
/*
Δ注意：创建新的图片不是修改，而是增加！
因此，此处要要用documentDOM对象的createElement方法。
*/
var addCornFlower = function () {
//在浏览器内存中"创建"<img/>元素
var img = document.createElement("img");
img.src = "../../../cornflower/4.jpg";
img.width = "100";
//利用appendChild方法"添加"HTML元素 (将创建的img元素挂载到dom树上)
document.body.appendChild(img);
}
</script>
</head>
<body>
<input type="button" value="点击添加一朵矢车菊" onclick="addCornFlower()"/>
</body>
</html>
运行效果 :（如下GIF图）
三、DOM节点
1.html dom说明 :
在HTML DOM（文档对象模型）中，每个部分都是节点，即一切都可看作是Node。
1) 文档本身是文档节点
2) 所有 HTML元素是元素节点
3) 所有 HTML属性是属性节点
4) HTML 元素内的文本是文本节点
5) 注释是注释节点若想查看具体的Element的属性和方法，可以查看——
。
2.节点常用属性和方法 :
1° 常用属性
1. childNodes 属性，获取当前节点的所有子节点2. firstChild 属性，获取当前节点的第一个子节点3. lastChild 属性，获取当前节点的最后一个子节点4. parentNode 属性，获取当前节点的父节点5. nextSibling 属性，获取当前节点的下一个节点 (后一个)6. previousSibling 属性，获取当前节点的上一个节点 (前一个)7. className 用于获取或设置标签的class属性值8. innerHTML 属性，表示获取/设置起始标签和结束标签中的内容9. innerText 属性，表示获取/设置起始标签和结束标签中的文本
2° 常用方法
1° getElementsByTagName(tagName)方法，获取指定标签名的dom对象；通过具体的元素节点调用该方法，可获取当前节点的指定标签名的孩子节点，返回HTMLCollection类型。
2° appendChild(ChildNode ) 方法，可以添加一个子节点（将指定节点挂载到dom树上），ChildNode 是要添加的孩子节点。3° getElementById(id)方法，通过id来获取指定节点，返回HTMLXxxElement类型。
4° getElementsByName(name)方法，通过name属性值来获取指定节点，可用于获取一组复选框（同一name值），返回NodeList类型。
3.获取节点 :
1° 代码演示：
界面如下 :
通过id获取对应按钮的dom对象，然后通过dom对象.onclick = function() {} 来给dom对象绑定点击事件，通过编写代码，实现不同按钮的功能。
代码如下 :
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>methods to get Nodes</title>
<style type="text/css">
body {
width: 800px;
margin-left: auto;
margin-right: auto;
}
button {
width: 220px;
height: 30px;
margin-bottom: 10px;
text-align: left;
}
#btnList {
float:left;
}
#total{
width: 450px;
float:left;
}
ul{
list-style-type: none;
margin: 0px;
padding: 0px;
}
.inner li{ /* 后代选择器，表示是.inner中的li标签 */
border: 1px darkblue dashed;
padding: 5px;
margin: 5px;
float:left; //让无序列表的元素依次排在一块儿
}
.inner{
width:400px;
border:2px cornflowerblue solid;
/*border-width: 2px;*/
margin-bottom: 10px;
padding: 10px;
float: left;
}
</style>
<script type="text/javascript">
//动态绑定事件
window.onload = function () {
//1.查找 id=java 节点
var btn_1 = document.getElementById("btn_1");
btn_1.onclick = function () {
var java = document.getElementById("java");
alert("java节点的文本内容 = " + java.innerText);
}
//2.查找所有 option 节点
var btn_2 = document.getElementById("btn_2");
btn_2.onclick = function () {
var options = document.getElementsByTagName("option");
alert("options = " + options); //HTMLCollection
for (var i = 1; i < options.length; ++i) {
alert("innerText = " + options[i].innerText)
}
}
//3.查找 name=fruit 的节点
var btn_3 = document.getElementById("btn_3");
btn_3.onclick = function () {
var fruits = document.getElementsByName("fruit");
alert("fruits = " + fruits); //NodeList
for (var i = 0; i < fruits.length; ++i) {
if (fruits[i].checked) {
alert("fruits[" + i + "] = " + fruits[i].value);
}
}
}
//4.查找 id=language 下所有 li 节点
var btn_4 = document.getElementById("btn_4");
btn_4.onclick = function () {
//此处缩小了dom对象的范围！
var lis = document.getElementById("language").getElementsByTagName("li");
alert("lis = " + lis); //HTMLCollection
for (var i = 0; i < lis.length; ++i) {
alert("lis[" + i + "] = " + lis[i].innerText);
}
}
//5.查找 id=sel_1 的所有子节点
/* PS：
(1)下拉框的所有子节点————认为<br/>换行也是一个子节点(文本类型)。
(2)可以通过childNodes属性来获取当前节点的所有子节点。
(3)可以通过selected属性来对获取到的节点进行过滤。
*/
var btn_5 = document.getElementById("btn_5");
btn_5.onclick = function () {
var sel_1 = document.getElementById("sel_1");
alert("sel_1 = " + sel_1); //object HTMLSelectElement
var childNodes = sel_1.childNodes;
alert("childNodes = " + childNodes); //NodeList
alert("childNodes' length = " + childNodes.length);
for (var i = 0; i < childNodes.length; ++i) {
if (childNodes[i].selected) {
alert(childNodes[i].innerText); //Text | HEMLOptionElement
}
}
//方式二：
/*
由于sel_1是HTMLSelectElement，本身具有集合的特性，
浏览器在解析时会想当然地认为<select>下有<option>元素，因此可直接通过下标来访问。
*/
for (var i = 0; i < sel_1.length; ++i) {
alert("sel_1[" + i + "] = " + sel_1[i].innerText);
}
}
//6.查找 id=sel_1 的第一个子节点
//PS : firstChild属性是按照childNodes属性得到的第一个字节点。
var btn_6 = document.getElementById("btn_6");
btn_6.onclick = function () {
var firstChild = document.getElementById("sel_1").firstChild;
alert("sel_1's firstChild = " + firstChild.innerText);
alert("sel_1's firstChild = " + sel_1[0].innerText);
}
//7.查找 id=java 的父节点
var btn_7 = document.getElementById("btn_7");
btn_7.onclick = function () {
var java = document.getElementById("java");
alert("java = " + java); //HTMLLIElement
var javaParent = java.parentNode;
alert("javaParent = " + javaParent); //HTMLUListElement
for (var i = 0; i < javaParent.childNodes.length; ++i) {
alert(javaParent.childNodes[i].innerText);
}
}
//8.查找 id=moderate 的前后兄弟节点
var btn_8 = document.getElementById("btn_8");
btn_8.onclick = function () {
var moderate = document.getElementById("moderate");
alert("moderate = " + moderate); //object HTMLOptionElement
alert("moderate = " + moderate.innerText);
alert(moderate.previousSibling.previousSibling.innerText);
alert(moderate.nextSibling.nextSibling.innerText);
}
//9.读取 id=moderate 的 value 属性值
var btn_9 = document.getElementById("btn_9");
btn_9.onclick = function () {
var moderate = document.getElementById("moderate");
alert(moderate.value);
}
//10.设置 #person 的文本域
var btn_10 = document.getElementById("btn_10");
btn_10.onclick = function () {
var person = document.getElementById("person");
person.innerText = "My name's Cyan, nice to meet you!";
}
}
</script>
</head>
<body>
<div id="total">
<div class="inner">
<p>
The FRUIT you relish:
</p>
<input type="checkbox" name="fruit" value="grape" checked="checked">Grape
<input type="checkbox" name="fruit" value="strawberry">Strawberry
<input type="checkbox" name="fruit" value="blueberry">blueberry <br/>
<hr/>
<p>
What about your health state?
</p>
<select id="sel_1">
<option>--健康状况--</option>
<option>牛逼</option>
<option id="moderate" value="good">害⭐</option>
<option>飞舞</option>
</select>
<hr/>
<p>
The processing language you master:
</p>
<ul id="language">
<li id="java">Java</li>
<li>C</li>
<li>C++</li>
<li>Python</li>
</ul> <br/><br/>
<hr/>
<p>
Self-introduce.
</p>
<textarea name="person" id="person">个人介绍</textarea>
</div>
</div>
<div id="btnList">
<div>
<button id="btn_1">查找 id=java 节点</button>
</div>
<div>
<button id="btn_2">查找所有 option 节点</button>
</div>
<div>
<button id="btn_3">查找 name=fruit 的节点</button>
</div>
<div>
<button id="btn_4">查找 id=language 下所有 li 节点</button>
</div>
<div>
<button id="btn_5">查找 id=sel_1 的所有子节点</button>
</div>
<div>
<button id="btn_6">查找 id=sel_1 的第一个子节点</button>
</div>
<div>
<button id="btn_7">查找 id=java 的父节点</button>
</div>
<div>
<button id="btn_8">查找 id=moderate 的前后兄弟节点</button>
</div>
<div>
<button id="btn_9">读取 id=moderate 的 value 属性值</button>
</div>
<div>
<button id="btn_10">设置 #person 的文本域</button>
</div>
</div>
</body>
</html>2° 运行结果：（如下GIF图）
PS : GIF演示时间较长（2mins）
四、DOM总结
重点要掌握——
①DOM的机制 : 将文档映射成由一个个具有层次关系的节点组成的树；html文档本身被映射为文档节点，而html文档内的元素和属性，以及元素内的文本，均可被映射为dom对象，而dom对象就是树上的一个节点（or 结点）。获取某个dom对象后，可以通过事件绑定（事件注册）来控制该对象的展现方式，而有了dom机制的加持，可以通过某一个节点（某一个dom对象）来获取其他的节点，便于控制和管理。（html dom树的演示图要熟记）
②DOM常用的属性和方法：像是getElementById，getElementsByTagName等等，要熟练运用。
③DOM本身并不是当前的主流工具，但是DOM机制是Vue的底层支撑，原理要清楚。
System.out.println("END---------------------------------------------------------------------");
【版权声明】本文为华为云社区用户转载文章，如果您发现本社区中有涉嫌抄袭的内容，欢迎发送邮件进行举报，并提供相关证据，一经查实，本社区将立刻删除涉嫌侵权内容，举报邮箱：
cloudbbs@huaweicloud.com
- 点赞
- 收藏
- 关注作者
评论（0）