（web前端学习笔记）HTML DOM基础
HTML DOM基础
- 一、DOM简介
-
- 1.什么是DOM
- 2.什么是HTML DOM
- 二、HTML DOM 节点
-
- 1.DOM节点
- 2.HTML DOM 节点树
- 3.节点父、子和同胞
- 三、HTML DOM 对象
-
- 1.HTML DOM 对象分类
- 2.HTML DOM 常用方法
- 3.HTML DOM 常用属性
- 4.HTML DOM 访问与修改
-
- 4.1 访问
- 4.2 修改
- 四、HTML DOM 事件
-
- 1.HTML 事件属性
-
- 1.1 onclick事件：鼠标点击事件
- 1.2 onload 和 onunload 事件
-
- 1.2.1 onload事件：页面加载完成之后触发：
- 1.2.2 onunload事件：用户退出页面时触发
- 1.3 onchange 事件
- 1.4 onmouseover 和 onmouseout 事件
- 五、HTML DOM 导航
-
- 1.HTML DOM 节点列表
- 2.HTML DOM 节点列表长度
- 3.导航节点关系
一、DOM简介
1.什么是DOM
DOM（Document Object Model）：文档对象模型
是一种W3C（万维网联盟）定义的访问 HTML 和 XML 文档的标准。
官方解释：W3C 文档对象模型 （DOM） 是中立于平台和语言的接口，它允许程序和脚本动态地访问和更新文档的内容、结构和样式。
W3C DOM 标准被分为 3 个不同的部分：
- 核心 DOM - 针对任何结构化文档的标准模型
- XML DOM - 针对 XML 文档的标准模型
- HTML DOM - 针对 HTML 文档的标准模型
2.什么是HTML DOM
HTML DOM 是：
- HTML 的标准对象模型
- HTML 的标准编程接口
- W3C 标准
HTML DOM 定义了访问和操作 HTML 文档的标准。
HTML DOM 定义了所有 HTML 元素的对象和属性，以及访问它们的方法。
HTML DOM关于如何获取、修改、添加或删除 HTML 元素的标准。
HTML DOM是联合HTML、CSS、JavaScript静态网页三剑客使用的。
二、HTML DOM 节点
在 HTML DOM 中，所有事物都是节点。DOM 是被视为节点树的 HTML。
1.DOM节点
根据 W3C 的 HTML DOM 标准，HTML 文档中的所有内容都是节点：
- 整个文档是一个文档节点
- 每个 HTML 元素是元素节点
- HTML 元素内的文本是文本节点
- 每个 HTML 属性是属性节点
- 注释是注释节点
2.HTML DOM 节点树
HTML DOM 将 HTML 文档视作树结构。这种结构被称为节点树：
HTML DOM Tree 实例：
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-GsMOOxCd-1588150685057)(HTML DOM.assets/ct_htmltree.gif)]
通过 HTML DOM，树中的所有节点均可通过 JavaScript 进行访问。所有 HTML 元素（节点）均可被修改，也可以创建或删除节点。
3.节点父、子和同胞
节点树中的节点彼此拥有层级关系。
父（parent）、子（child）和同胞（sibling）等术语用于描述这些关系。父节点拥有子节点。同级的子节点被称为同胞（兄弟或姐妹）。
- 在节点树中，顶端节点被称为根（root）
- 每个节点都有父节点、除了根（它没有父节点）
- 一个节点可拥有任意数量的子
- 同胞是拥有相同父节点的节点
可通过节点的 innerHTML 属性来访问文本节点的值。
三、HTML DOM 对象
浏览器在解析 HTML 文档时，会把每个标签抽象成代码里的对象，按照层次分明的结构(HTML DOM Tree)进行组织，这就是 HTML DOM。
浏览器解析完 HTML，就要开始解析 HTML 里的 JavaScript代码。程序员可以通过 JavaScript 代码实现一些动态的网页效果。
可通过 JavaScript （以及其他编程语言）对 HTML DOM 进行访问。
DOM 里的对象，正好就是 JavaScript 语言里的对象。JavaScript 可以通过DOM方法访问 DOM 树上的节点对象。
1.HTML DOM 对象分类
1.Document 对象：（document：文档）
每个载入浏览器的 HTML 文档都会成为 Document 对象（一个HTML文档就是一个Document对象），Document 对象使我们可以从脚本中对 HTML 页面中的所有元素进行访问。
注：Document 对象是 Window 对象的一部分，可通过 window.document 属性对其进行访问。
2.Element 对象：（element：元素）
在 HTML DOM 中，Element 对象表示 HTML 元素（一个HTML元素就是一个Element 对象）。Element 对象可以拥有类型为元素节点、文本节点、注释节点的子节点。
NodeList 对象表示节点列表，比如 HTML 元素的子节点集合。（NodeList ：节点列表）
3.Attribute 对象：（attribute：属性）
在 HTML DOM 中，Attr 对象表示 HTML 属性（一个HTML属性就是一个Attr对象）。
HTML 属性始终属于 HTML 元素。
4.Event 对象：（event：事件）
Event 对象代表事件的状态，比如事件在其中发生的元素、键盘按键的状态、鼠标的位置、鼠标按钮的状态。
事件通常与函数结合使用，函数不会在事件发生前被执行！
2.HTML DOM 常用方法
方法是我们可以在节点（HTML 元素）上执行的动作。
Document 对象方法：
| 方法 | 描述 |
|---|---|
| close() | 关闭用 document.open() 方法打开的输出流，并显示选定的数据。 |
| getElementById() | 返回对拥有指定 id 的第一个对象的引用。 |
| getElementsByName() | 返回带有指定名称的对象集合。 |
| getElementsByTagName() | 返回带有指定标签名的对象集合。 |
| open() | 打开一个流，以收集来自任何 document.write() 或 document.writeln() 方法的输出。 |
| write() | 向文档写 HTML 表达式 或 JavaScript 代码。 |
| writeln() | 等同于 write() 方法，不同的是在每个表达式之后写一个换行符。 |
常用方法
| 方法 | 描述 |
|---|---|
| getElementById() | 返回带有指定 ID 的元素。 |
| getElementsByTagName() | 返回包含带有指定标签名称的所有元素的节点列表（集合/节点数组）。 |
| getElementsByClassName() | 返回包含带有指定类名的所有元素的节点列表。 |
| appendChild() | 把新的子节点添加到指定节点。 |
| removeChild() | 删除子节点。 |
| replaceChild() | 替换子节点。 |
| insertBefore() | 在指定的子节点前面插入新的子节点。 |
| createAttribute() | 创建属性节点。 |
| createElement() | 创建元素节点。 |
| createTextNode() | 创建文本节点。 |
| getAttribute() | 返回指定的属性值。 |
| setAttribute() | 把指定属性设置或修改为指定的值。 |
3.HTML DOM 常用属性
属性是节点（HTML 元素）的值，您能够获取或设置。
（1）innerHTML属性
获取元素内容的最简单方法是使用 innerHTML 属性。
innerHTML 属性对于获取或替换 HTML 元素的内容很有用。
举例：获取 id=“intro” 的 < p> 元素的内容
<html>
<body>
<p id="intro">Hello World!p>
<script>
var txt=document.getElementById("intro").innerHTML;
document.write(txt);
script>
body>
html>
（2）nodeName 属性
nodeName 属性规定节点的名称。
- nodeName 是只读的
- 元素节点的 nodeName 与标签名相同
- 属性节点的 nodeName 与属性名相同
- 文本节点的 nodeName 始终是 #text
- 文档节点的 nodeName 始终是 #document
nodeName 始终包含 HTML 元素的大写字母标签名。
（3）nodeValue 属性
nodeValue 属性规定节点的值。
- 元素节点的 nodeValue 是 undefined 或 null
- 文本节点的 nodeValue 是文本本身
- 属性节点的 nodeValue 是属性值
（4）nodeType 属性
nodeType 属性返回节点的类型。nodeType 是只读的。
比较重要的节点类型有：
| 元素类型 | NodeType |
|---|---|
| 元素 | 1 |
| 属性 | 2 |
| 文本 | 3 |
| 注释 | 8 |
| 文档 | 9 |
4.HTML DOM 访问与修改
4.1 访问
访问 HTML DOM == 查找 HTML 元素。
您能够以不同的方式来访问 HTML 元素：
- 通过使用 getElementById() ：返回带有指定 ID 的元素
- 通过使用 getElementsByTagName() ：返回带有指定标签名的所有元素
- 通过使用 getElementsByClassName() ：韩慧带有相同类名的所有 HTML 元素的一个列表
4.2 修改
修改 HTML == 改变元素、属性、样式和事件。
1.改变元素内容：使用 innerHTML 属性
<html>
<body>
<p id="p1">Hello World!p>
<script>
document.getElementById("p1").innerHTML="New text!";
script>
body>
html>
2.向 HTML DOM 添加新元素：首先必须创建该元素（元素节点），然后把它追加到已有的元素上
两个方法：appendChild()、insertBefore()
<div id="d1">
<p id="p1">This is a paragraph.p>
<p id="p2">This is another paragraph.p>
div>
<script>
var para=document.createElement("p");
var node=document.createTextNode("This is new.");
para.appendChild(node);
var element=document.getElementById("d1");
element.appendChild(para);
script>
例子解释:
这段代码创建了一个新的 < p> 元素：
var para=document.createElement("p");
如需向 < p> 元素添加文本，您首先必须创建文本节点。这段代码创建文本节点：
var node=document.createTextNode("This is a new paragraph.");
然后您必须向 < p> 元素追加文本节点：
para.appendChild(node);
最后，您必须向已有元素追加这个新元素。
这段代码查找到一个已有的元素：
var element=document.getElementById("div1");
这段代码向这个已存在的元素追加新元素：
element.appendChild(para);
appendChild() 方法是将新元素作为父元素的最后一个子元素进行添加
insertBefore() 方法是将在您指定的已有子节点之前插入新的子节点
<div id="div1">
<p id="p1">This is a paragraph.p>
<p id="p2">This is another paragraph.p>
div>
<script>
var para=document.createElement("p");
var node=document.createTextNode("This is new.");
para.appendChild(node);
var element=document.getElementById("div1");
var child=document.getElementById("p1");
element.insertBefore(para,child);
script>
3.删除 HTML 元素：必须先找到该元素的父元素
方法：removeChild()
<div id="div1">
<p id="p1">This is a paragraph.p>
<p id="p2">This is another paragraph.p>
div>
<script>
var parent=document.getElementById("div1");
var child=document.getElementById("p1");
parent.removeChild(child);
script>
方式二：parentNode属性:找到其父节点
var child=document.getElementById("p1");
child.parentNode.removeChild(child);
3.替换 HTML 元素
方法： replaceChild()
<div id="div1">
<p id="p1">This is a paragraph.p>
<p id="p2">This is another paragraph.p>
div>
<script>
var para=document.createElement("p");
var node=document.createTextNode("This is new.");
para.appendChild(node);
var parent=document.getElementById("div1");
var child=document.getElementById("p1");
parent.replaceChild(para,child);
script>
四、HTML DOM 事件
HTML DOM 允许 JavaScript 对 HTML 事件作出反应。
HTML 事件的例子：
- 当用户点击鼠标时
- 当网页已加载时
- 当图片已加载时
- 当鼠标移动到元素上时
- 当输入字段被改变时
- 当 HTML 表单被提交时
- 当用户触发按键时
1.HTML 事件属性
如需向 HTML 元素分配事件，您可以使用事件属性。
1.1 onclick事件：鼠标点击事件
1.在HTML中：
语法：< element οnclick=“SomeJavaScriptCode”>
举例：
向 button 元素分配一个 onclick 事件：
<button id="myBtn" onclick="displayDate()">试一试button>
当点击按钮时，会执行名为 displayDate 的函数。
2.在JavaScript中：
语法：object.οnclick=function(){Some JavaScriptCode}；
注：HTML DOM 允许使用 JavaScript 向 HTML 元素分配事件：
举例：为 button 元素分配 onclick 事件：
<script>
document.getElementById("myBtn").onclick=function(){
displayDate()};
script>
onclick 属性可以使用与所有 HTML 元素
除了 ：< base>, < bdo>, < br>, < head>, < html>, < iframe>, < meta>, < param>, < script>, < style>, 和 < title>.
1.2 onload 和 onunload 事件
1.2.1 onload事件：页面加载完成之后触发：
onload 通常用于 < body> 元素，在页面完全载入后(包括图片、css文件等等。)执行脚本代码。
1.在 HTML中
语法：< body οnlοad=“SomeJavaScriptCode”>
举例：
body>
2.在JavaScript中
语法：window.οnlοad=function(){ SomeJavaScriptCode};
举例：
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Titletitle>
<script type="text/javascript">
window.onload = function () {
alert("页面加载完成了2");
}
script>
head>
<body>
body>
html>
注：
以下 HTML 标签支持 onload :
< body>, < frame>, < frameset>, < iframe>, < img>, < input type=“image”>, < link>, < script>, < style>
1.2.2 onunload事件：用户退出页面时触发
onunload 发生于当用户离开页面时发生的事件(通过点击一个连接，提交表单，关闭浏览器窗口等等。)
（与onload用法相同）
1.HTML 中:
语法：< body οnunlοad=“SomeJavaScriptCode”>
2.JavaScript 中:
语法：window.οnunlοad=function(){ SomeJavaScriptCode};
注：
以下 HTML 标签支持 onunload :
< body>, < frameset>
1.3 onchange 事件
onchange 事件会在域的内容改变时发生。
onchange事件在内容改变（两次内容有可能还是相等的）且失去焦点时触发。
onchange 事件也可用于单选框与复选框改变后触发的事件。
1.HTML 中:
语法：< element οnchange=“SomeJavaScriptCode”>
2.JavaScript 中:
语法：object.οnchange=function(){ SomeJavaScriptCode}；
举例：如何使用 onchange。当用户改变输入字段的内容时，将调用 upperCase() 函数。
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Titletitle>
<script>
function myFunction()
{
var x=document.getElementById("fname");
x.value=x.value.toUpperCase();
}
script>
head>
<body>
请输入你的英文名：<input type="text" id="fname" onchange="myFunction()">
<p>当你离开输入框时，被触发的函数会把你输入的文本转换为大写字母。p>
body>
html>
等同于：
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Titletitle>
<body>
请输入你的英文名：<input type="text" id="fname">
<p>当你离开输入框时，被触发的函数会把你输入的文本转换为大写字母。p>
<script>
var fname = document.getElementById("fname");
fname.onchange = function () {
this.value = this.value.toUpperCase();
}
script>
head>
body>
html>
注：支持 onchange 事件的 HTML 标签：
onchange 属性可以使用于： < input>, < select>, 和 < textarea>。
1.4 onmouseover 和 onmouseout 事件
onmouseover 和 onmouseout 事件可用于在鼠标指针移动到或离开元素时触发函数。
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Titletitle>
<body>
<div
onmouseover="mOver(this)"
onmouseout="mOut(this)"
style="background-color:#D94A38;width:200px;height:50px;padding-top:25px;text-align:center;">
Mouse Over Me
div>
<script>
function mOver(obj)
{
obj.innerHTML="谢谢你"
}
function mOut(obj)
{
obj.innerHTML="把鼠标指针移动到上面"
}
script>
body>
html>
1.5 onmousedown、onmouseup 以及 onclick 事件
这三个事件是鼠标点击的全部过程。首先当某个鼠标按钮被点击时，触发 onmousedown 事件，然后，当鼠标按钮被松开时，会触发 onmouseup 事件，最后，当鼠标点击完成时，触发 onclick 事件。
实例：
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Titletitle>
<body>
<div
onmousedown="mDown(this)"
onmouseup="mUp(this)"
style="background-color:#D94A38;width:200px;height:50px;padding-top:25px;text-align:center;">
点击这里
div>
<script>
function mDown(obj)
{
obj.style.backgroundColor="#1ec5e5";
obj.innerHTML="松开鼠标"
}
function mUp(obj)
{
obj.style.backgroundColor="#D94A38";
obj.innerHTML="谢谢你"
}
script>
body>
html>
五、HTML DOM 导航
1.HTML DOM 节点列表
getElementsByTagName() 方法返回节点列表。节点列表是一个节点数组。
举例：
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Titletitle>
<body>
<p>Hello World!p>
<p>DOM 很有用！p>
<script>
x=document.getElementsByTagName("p");
document.write("第二段的 innerHTML 是: " + x[1].innerHTML);
script>
body>
html>
结果：
Hello World!
DOM 很有用！
第二段的 innerHTML 是: DOM 很有用！
2.HTML DOM 节点列表长度
length 属性定义节点列表中节点的数量。
使用 length 属性来循环节点列表
举例：
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Titletitle>
<body>
<p>Hello World!p>
<p>DOM 很有用！p>
<p>本例演示 <b>lengthb> 属性。p>
<script>
x=document.getElementsByTagName("p");
for (i=0;i<x.length;i++)
{
document.write(x[i].innerHTML);
document.write("
");
}
script>
body>
html>
结果：
Hello World!
DOM 很有用！
本例演示 length 属性。
Hello World!
DOM 很有用！
本例演示 length 属性。
3.导航节点关系
使用三个节点属性：parentNode、firstChild 以及 lastChild ，在文档结构中进行导航。
<body>
<p>Hello World!p>
<div>
<p>DOM 很有用!p>
<p>本例演示节点关系。p>
div>
body>
- 首个 < p> 元素是 < body> 元素的首个子元素（firstChild）
- < div> 元素是 < body> 元素的最后一个子元素（lastChild）
- < body> 元素是首个 < p> 元素和 < div> 元素的父节点（parentNode）
另外firstChild 属性还可以可用于访问元素的文本：
firstChild.nodeValue
举例：
<body>
<p id="intro">Hello World!p>
<script>
x=document.getElementById("intro");
//方式一：innerHTML
// document.write(x.innerHTML);.//Hello World!
//方式二：firstChild.nodeValue
// document.write(x.firstChild.nodeValue);//Hello World!
document.write(x.firstChild.nodeType);//3 文本
document.write(x.nodeType);//1 元素
script>
body>
childNodes 和 nodeValue:
除了 innerHTML 属性，您也可以使用 childNodes 和 nodeValue 属性来获取元素的内容。
举例：
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Titletitle>
<body>
<p id="intro">Hello World!p>
<script>
txt=document.getElementById("intro").childNodes[0].nodeValue;
document.write(txt);
script>
body>
html>
注：若需要更详细的学习该技术，推荐去w3school网进行进一步学习。
网址：https://www.w3school.com.cn/