DOM是什么

  • DOM (Document Object Model) 文档对象模型,是 HTML 和 XML 文档的编程接口。

  • HTML DOM 定义了访问和操作 HTML 文档的标准方法,是 W3C(万维网联盟)的标准。

  • DOM 以树结构表达 HTML 文档。

image-20210731170900484

“W3C 文档对象模型 (DOM) 是中立于平台和语言的接口,它允许程序和脚本动态地访问和更新文档的内容、结构和样式。”

W3C DOM 标准被分为 3 个不同的部分:

  • 核心 DOM - 针对任何结构化文档的标准模型
  • XML DOM - 针对 XML 文档的标准模型
  • HTML DOM - 针对 HTML 文档的标准模型

HTML DOM

  • HTML DOM 定义了所有 HTML 元素的对象属性,以及访问它们的方法

  • HTML DOM 是关于如何获取、修改、添加或删除 HTML 元素的标准。

HTML DOM节点

  • 在 HTML DOM 中,所有事物都是节点。DOM 是被视为节点树的 HTML。

    • 整个文档是一个文档节点
    • 每个 HTML 元素是元素节点
    • HTML 元素内的文本是文本节点
    • 每个 HTML 属性是属性节点
    • 注释是注释节点

parent,child,sibling(兄弟),三种节点

image-20210731171635652

HTML DOM方法 & 属性

  • 方法是可以在节点(HTML 元素)上执行的动作(比如添加或修改元素)。

  • 可通过 JavaScript (以及其他编程语言)对 HTML DOM 进行访问。

  • 所有 HTML 元素被定义为对象,而编程接口则是对象方法和对象属性。


一些常用的 HTML DOM 方法:

方法 描述
getElementById() 返回带有指定 ID 的元素。
getElementsByTagName() 返回包含带有指定标签名称的所有元素的节点列表(集合/节点数组)。
getElementsByClassName() 返回包含带有指定类名的所有元素的节点列表。
appendChild() 把新的子节点添加到指定节点。
removeChild() 删除子节点。
replaceChild() 替换子节点。
insertBefore() 在指定的子节点前面插入新的子节点。
createAttribute() 创建属性节点。
createElement() 创建元素节点。
createTextNode() 创建文本节点。
getAttribute() 返回指定的属性值。
setAttribute() 把指定属性设置或修改为指定的值。

HTML DOM 属性是我们可以在节点(HTML 元素)设置和修改的值(比如节点的名称或内容)。

  • 为HTML元素提供各种附加信息的就是HTML属性,它总是以”属性名=属性值”这种名值对的形式出现,而且属性总是在HTML元素的开始标签中进行定义。

一些常用的 HTML DOM 属性:

  • innerHTML - 节点(元素)的文本值
  • parentNode - 节点(元素)的父节点
  • childNodes - 节点(元素)的子节点
  • attributes - 节点(元素)的属性节点

nodeName 属性

nodeName 属性规定节点的名称。

  • nodeName 是只读的
  • 元素节点的 nodeName 与标签名相同
  • 属性节点的 nodeName 与属性名相同
  • 文本节点的 nodeName 始终是 #text
  • 文档节点的 nodeName 始终是 #document

注意: nodeName 始终包含 HTML 元素的大写字母标签名。

nodeValue 属性

nodeValue 属性规定节点的值。

  • 元素节点的 nodeValue 是 undefined 或 null
  • 文本节点的 nodeValue 是文本本身
  • 属性节点的 nodeValue 是属性值

nodeType 属性

nodeType 属性返回节点的类型。nodeType 是只读的。

比较重要的节点类型有:

元素类型 NodeType
元素 1
属性 2
文本 3
注释 8
文档 9

HTML DOM 访问

  • 访问 HTML DOM - 查找 HTML 元素=访问节点。
  • 访问 HTML 元素的方式:
    • 通过使用 getElementById() 方法
    • 通过使用 getElementsByTagName() 方法
    • 通过使用 getElementsByClassName() 方法

HTML DOM 修改

  • 修改 HTML = 改变元素、属性、样式和事件。
  • 具体来说,修改 HTML DOM 意味着许多不同的方面:
    • 改变 HTML 内容
    • 改变 CSS 样式
    • 改变 HTML 属性
    • 创建新的 HTML 元素
    • 删除已有的 HTML 元素
    • 改变事件(处理程序)

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32

//创建HTML内容:
document.getElementById("p1").innerHTML="新文本!";

//改变HTML样式
document.getElementById("p2").style.color="blue";
document.getElementById("p2").style.fontFamily="Arial";
document.getElementById("p2").style.fontSize="larger";

//创建新的HTML元素
//如需向 HTML DOM 添加新元素,首先必须创建该元素(元素节点),然后把它追加到已有的元素上。
var para=document.createElement("p");
var node=document.createTextNode("这是一个新段落。");
para.appendChild(node);
var element=document.getElementById("div1");
element.appendChild(para);

//改变HTML内容
//改变元素内容的最简单的方法是使用 innerHTML 属性。
document.getElementById("p1").innerHTML="新文本!";

//改变HTML样式
document.getElementById("p2").style.color="blue";
document.getElementById("p2").style.fontFamily="Arial";
document.getElementById("p2").style.fontSize="larger";

//使用事件
<input type="button"
onclick="document.body.style.backgroundColor='lavender';"
value="修改背景颜色">


HTML DOM 元素

  • HTML网页实际上就是由许许多多各种各样的HTML元素构成的文本文件,并且任何网页浏览器都可以直接运行HTML文件。所以可以这样说,HTML元素就是构成HTML文件的基本对象,HTML元素可以说是一个统称而已。HTML元素就是通过使用HTML标签进行定义的。
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
//创建新的HTML元素
//向 HTML DOM 添加新元素,先必须创建该元素,然后把它追加到已有的元素上。
//使用createElement()
var para=document.createElement("p");
var node=document.createTextNode("这是一个新段落。");
para.appendChild(node);
var element=document.getElementById("div1");
element.appendChild(para);

//使用insertBefore()
//appendChild() 方法,将新元素作为父元素的最后一个子元素进行添加。不想这样的话可以使用 insertBefore() 方法:
var para=document.createElement("p");
var node=document.createTextNode("这是一个新段落。");
para.appendChild(node);
var element=document.getElementById("div1");
var child=document.getElementById("p1");
element.insertBefore(para,child);


//删除已有HTML元素
var parent=document.getElementById("div1");
var child=document.getElementById("p1");
parent.removeChild(child);

//替换HTML元素
var parent=document.getElementById("div1");
var child=document.getElementById("p1");
var para=document.createElement("p");
var node=document.createTextNode("这是一个新的段落。");
para.appendChild(node);
parent.replaceChild(para,child);


HTML DOM 事件

  • HTML DOM 允许 JavaScript 对 HTML 事件作出反应,即,当事件发生时,可以执行 JavaScript
  • HTML 事件的例子:
    • 当用户点击鼠标时
    • 当网页已加载时
    • 当图片已加载时
    • 当鼠标移动到元素上时
    • 当输入字段被改变时
    • 当 HTML 表单被提交时
    • 当用户触发按键时

向 HTML 元素分配事件,可以使用事件属性

1
<h1 onclick="this.innerHTML='Ooops!'">点击文本!</h1>

HTML DOM 允许使用js向 HTML 元素分配事件

1
document.getElementById("myBtn").onclick=function(){displayDate()};

名为 displayDate 的函数被分配给了 id=myButn” 的 HTML 元素。当按钮被点击时,将执行函数。


onload & onunload 事件

  • 当用户进入或离开页面时,会触发 onload 和 onunload 事件。

  • onload 事件可用于检查访客的浏览器类型和版本,以便基于这些信息来加载不同版本的网页。

  • onload 和 onunload 事件可用于处理 cookies。

1
<body onload="checkCookies()">

onchange 事件

  • onchange 事件常用于输入字段的验证。
1
2
<input type="text" id="fname" onchange="upperCase()">
//当用户改变输入字段的内容时,将调用 upperCase() 函数。

onmouseover 和 onmouseout 事件

  • 用于在鼠标指针移动到或离开元素时触发函数。

onmousedown、onmouseup 以及 onclick 事件

  • 首先当某个鼠标按钮被点击时,触发 onmousedown 事件,
  • 然后,当鼠标按钮被松开时,会触发 onmouseup 事件,
  • 最后,当鼠标点击完成时,触发 onclick 事件。

HTML DOM 导航

  • 通过 HTML DOM,能够使用节点关系在节点树中导航。

  • getElementsByTagName() 方法返回节点列表。节点列表是一个节点数组。

  • length 属性获得节点列表长度

  • 使用三个节点属性:parentNode、firstChild 以及 lastChild ,在文档结构中进行导航。

  • 两个特殊的属性,可以访问全部文档:

    • document.documentElement - 全部文档
    • document.body - 文档的主体
  • 除了 innerHTML 属性,也可以使用 childNodes 和 nodeValue 属性来获取元素的内容。