DOM学习笔记

学习笔记
Word count: 2.5k   |   Reading time≈ 10 min

HTML DOM简介

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

HTML DOM 定义了访问和操作 HTML 文档的标准方法。

DOM 以树结构表达 HTML 文档。

当网页被加载时，浏览器会创建页面的文档对象模型（Document Object Model）。

HTML DOM 树形结构：

DOM HTML tree

通过 HTML DOM，可访问 JavaScript HTML 文档的所有元素。

JavaScript 能够改变页面中的所有 HTML 元素

JavaScript 能够改变页面中的所有 HTML 属性

JavaScript 能够改变页面中的所有 CSS 样式

JavaScript 能够对页面中的所有事件做出反应

查找HTML元素

通过 JavaScript，您需要操作 HTML 元素

ID查找：document.getElementById(“id”)

标签名查找：document.getElementsByTagName(“tagname”)

类名查找：document.getElementsByClassName(“classname”)

用标签名或类名查找可能会找到很多个HTML DOM元素，它们会组成一个数组，DOM最上面的元素作为数组的第一个值。

比如：

document.getElementsByTagName(“p”)[0] 它会得到第一个p标签元素

DOM HTML

HTML DOM 允许 JavaScript 改变 HTML 元素的内容。

改变HTML输出流

document.write()直接向HTML输出流写内容

注意：不要在文档(DOM)加载完后使用document.write()，会覆盖文档。

改变HTML内容

使用innerHTML属性

比如：document.getElementById(“demo”).innerHTML=hello world!

改变HTML属性

语法：

1
document.getElementById("id").attribute=属性值

比如：document.getElementsByTagName(“img”)[0].src=”xxx.jpg”

DOM CSS

HTML DOM 允许 JavaScript 改变 HTML 元素的样式。

改变HTML样式

语法：

1
document.getElementById("id").style.property=样式值

比如：document.getElementsByTagName(“p”)[0].style.color=”green”

DOM事件

HTML DOM 使 JavaScript 有能力对 HTML 事件做出反应。

对事件做出反应

我们可以在事件发生时执行 JavaScript，比如当用户在 HTML 元素上点击时。

点击某个元素时执行代码：

1
onclick=JavaScript

HTML 事件的例子：

用户点击鼠标时

网页完成加载时

图像完成加载时

鼠标移动到元素上时

输入字段被改变时

提交HTML表单时

用户触发按键

感觉最常用的应该是点击鼠标和触发按键吧，还没做过项目没实际开发过(如果有错当我没说=。=)

HTML事件属性

如需向 HTML 元素分配 事件，您可以使用事件属性。

在button元素上加onclick事件属性：

1
<button onclick=document.getElementById("demo").innerHTML="xxx">点击</button>

其他事件属性还有

onload页面完成加载时

onload 事件可用于检测访问者的浏览器类型和浏览器版本，并基于这些信息来加载网页的正确版本。

onunloady页面退出时

onload 和 onunload 事件可用于处理 cookie。

onchange内容改变时

onchange 事件常结合对输入字段的验证来使用。

onmouseover鼠标移至元素

onmouseout鼠标移出元素

onmousedown点击鼠标

onmouseup释放鼠标

onclick成鼠标点击

onmousedown, onmouseup 以及 onclick 构成了鼠标点击事件的所有部分。

使用HTML DOM来分配事件

HTML DOM 允许您使用 JavaScript 来向 HTML 元素分配事件：

1
2
3
<script>
	document.getElementById("id").onclick=JavaScript
</script>

DOM EventListener

addEventListener() 方法

addEventListener() 方法用于向指定元素添加事件句柄。

addEventListener() 方法添加的事件句柄不会覆盖已存在的事件句柄。

可以向一个元素添加多个事件句柄。

可以向同个元素添加多个同类型的事件句柄，如：两个 “click” 事件。

可以向任何 DOM 对象添加事件监听，不仅仅是 HTML 元素。如： window 对象。

可以使用 removeEventListener() 方法来移除事件的监听。

1
document.getElementById("myBtn").addEventListener("click", displayDate);

语法

1
element.addEventListener(event, function, useCapture);

第一个参数是事件的类型 (如 “click” 或 “mousedown”).

第二个参数是事件触发后调用的函数。

第三个参数是个布尔值用于描述事件是冒泡还是捕获。该参数是可选的。

向元素添加事件句柄

1
2
3
element.addEventListener("click", function(){ 
	alert("Hello World!"); 
});

可以使用函数名，来引用外部函数:

1
2
3
4
5
element.addEventListener("click", myFunction);

function myFunction() {
    alert ("Hello World!");
}

向同一元素添加多个事件句柄

addEventListener() 方法允许向同一个元素添加多个事件，且不会覆盖已存在的事件：

1
2
element.addEventListener("click", myFunction);
element.addEventListener("click", mySecondFunction);

同个元素添加不同类型的事件：

1
2
3
element.addEventListener("mouseover", myFunction);
element.addEventListener("click", mySecondFunction);
element.addEventListener("mouseout", myThirdFunction);

向Window对象添加事件句柄

addEventListener() 方法允许你在 HTML DOM 对象添加事件监听， HTML DOM 对象如： HTML 元素, HTML 文档, window 对象。或者其他支持的事件对象如: xmlHttpRequest 对象。

重置窗口大小时添加事件监听：

1
2
3
window.addEventListener("resize", function(){
    document.getElementById("demo").innerHTML = sometext;
});

事件冒泡或事件捕获

事件传递有两种方式：冒泡与捕获。

事件传递定义了元素事件触发的顺序。 如果你将

元素插入到

元素中，用户点击

元素, 哪个元素的 “click” 事件先被触发呢？

在 冒泡 中，内部元素的事件会先被触发，然后再触发外部元素，即：

元素的点击事件先触发，然后会触发

元素的点击事件。

在 捕获 中，外部元素的事件会先被触发，然后才会触发内部元素的事件，即：

元素的点击事件先触发 ，然后再触发

元素的点击事件。

addEventListener() 方法可以指定 “useCapture” 参数来设置传递类型：

1
addEventListener(event, function, useCapture);

默认值为 false, 即冒泡传递，当值为 true 时, 事件使用捕获传递。

removeEventListener() 方法

removeEventListener() 方法移除由 addEventListener() 方法添加的事件句柄:

1
2
3
4
5
6
7
8
9
<script>
document.getElementById("myDIV").addEventListener("mousemove", myFunction);
function myFunction() {
    document.getElementById("demo").innerHTML = Math.random();
}
function removeHandler() {
    document.getElementById("myDIV").removeEventListener("mousemove", myFunction);
}
</script>

DOM元素

创建新的HTML元素(节点)

要创建新的 HTML 元素 (节点)需要先创建一个元素，然后在已存在的元素中添加它。

1
2
3
4
5
6
7
8
9
10
11
12
13
<div id="div1">
<p id="p1">这是一个段落。</p>
<p id="p2">这是另外一个段落。</p>
</div>
 
<script>
var para = document.createElement("p");
var node = document.createTextNode("这是一个新的段落。");
para.appendChild(node);
 
var element = document.getElementById("div1");
element.appendChild(para);
</script>

创建元素：document.createElement(“tagname”)

创建文本节点：document.createTextNode(“xxxxxx”)

appendChild()

添加新元素到尾部：appendChild(子元素)

insertBefore()

添加新元素到开始位置：insertBefore(子元素，插入在哪个元素前面)

1
2
3
4
5
6
7
8
9
10
11
12
13
14
<div id="div1">
<p id="p1">这是一个段落。</p>
<p id="p2">这是另外一个段落。</p>
</div>
 
<script>
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);
</script>

移除已存在的元素

要移除一个元素，你需要知道该元素的父元素。

1
2
3
4
5
6
7
8
9
10
<div id="div1">
<p id="p1">这是一个段落。</p>
<p id="p2">这是另外一个段落。</p>
</div>
 
<script>
var parent = document.getElementById("div1");
var child = document.getElementById("p1");
parent.removeChild(child);
</script>

替换HTML元素

可以使用 replaceChild() 方法来替换 HTML DOM 中的元素。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
<div id="div1">
<p id="p1">这是一个段落。</p>
<p id="p2">这是另外一个段落。</p>
</div>
 
<script>
var para = document.createElement("p");
var node = document.createTextNode("这是一个新的段落。");
para.appendChild(node);
 
var parent = document.getElementById("div1");
var child = document.getElementById("p1");
parent.replaceChild(para, child);
</script>

HTML Collection对象

getElementsByTagName()和getElementsByClassName()这两个方法查找多个DOM元素，返回HTMLCollection对象。

HTMLCollection 对象类似包含 HTML 元素的一个数组，它不是数组，但可以用索引来获取元素

比如：document.getElementByTagName(“p”)[0]

HTMLCollection 对象的 length 属性定义了集合中元素的数量。

比如：document.getElementByTagName(“p”).length

length属性常用于遍历数组来循环：

1
2
3
4
5
var myCollection = document.getElementsByTagName("p");
var i;
for (i = 0; i < myCollection.length; i++) {
    myCollection[i].style.backgroundColor = "red";
}

NodeList对象

NodeList对象是一个从文档中获取的节点列表 (集合) 。

NodeList对象类似HTMLCollection对象。

所有浏览器的childNodes属性返回的是 NodeList 对象。

大部分浏览器的querySelectorAll()返回 NodeList 对象。

以下代码选取了文档中所有的

节点：

1
var myNodeList = document.querySelectorAll("p");

它也能用索引来访问元素

1
y = myNodeList[1];

NodeList 对象 length 属性定义了节点列表中元素的数量。

1
2
var myNodelist = document.querySelectorAll("p");
document.getElementById("demo").innerHTML = myNodelist.length;

HTMLCollection 与 NodeList 的区别

querySelectorAll()和getElementsByTagName()两者的主要区别就是返回值。前者返回的是NodeList集合，后者返回的是HTMLCollection集合。其前者是一个静态集合，后者是一个动态集合。

其中动态集合和静态集合的最大区别在于：动态集合指的就是元素集合会随着DOM树元素的增加而增加，减少而减少；静态集合则不会受DOM树元素变化的影响。

使用getElementsByTagName方法我们得到的结果就像是一个对象的索引，而通过querySelectorAll方法我们得到的是一个对象的克隆；所以当这个对象数据量非常大的时候，显然克隆这个对象所需要花费的时间是很长的。

参考资料

https://www.runoob.com/js/js-htmldom.html

https://juejin.cn/post/6844903473155145736

https://my.oschina.net/u/3996925/blog/2990342

https://www.w3cplus.com/javascript/querySelectorAll-vs-getElementsByTagName.html

  • Copyright： Copyright is owned by the author. For commercial reprints, please contact the author for authorization. For non-commercial reprints, please indicate the source.

扫一扫，分享到微信

微信分享二维码
  • Copyrights © 2020-2021 Blog of Tianze

请我喝杯咖啡吧~

支付宝
微信