【JavaScript】HTML DOM

HTML DOM 是 HTML 的标准对象模型和编程接口。

通过 HTML DOM，JavaScript 能够访问和改变 HTML 文档的所有元素。

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

HTML DOM模型被结构化为对象树：

image-20220218001111507

通过这个对象模型，JavaScript 获得创建动态 HTML 的所有力量：

  • JavaScript 能改变页面中的所有 HTML 元素
  • JavaScript 能改变页面中的所有 HTML 属性
  • JavaScript 能改变页面中的所有 CSS 样式
  • JavaScript 能删除已有的 HTML 元素和属性
  • JavaScript 能添加新的 HTML 元素和属性
  • JavaScript 能对页面中所有已有的 HTML 事件作出反应
  • JavaScript 能在页面中创建新的 HTML 事件

内容摘抄自w3school，接下来的内容就是一些HTML DOM 的API，方便笔者随时查询。

Document 对象

文档对象代表您的网页。

如果您希望访问 HTML 页面中的任何元素，那么您总是从访问 document 对象开始。

查找 HTML 元素

方法 描述
document.getElementById(id) 通过元素 id 来查找元素
document.getElementsByTagName(name) 通过标签名来查找元素
document.getElementsByClassName(name) 通过类名来查找元素

通过 id 查找 HTML 元素

//<p id="demo"></p>
var myElement = document.getElementById("demo");

如果元素被找到，此方法会以对象返回该元素（在 myElement 中）。

如果未找到元素，myElement 将包含 null。

通过标签名查找 HTML 元素

如果您需要找到拥有相同标签名的所有 HTML 元素，请使用 getElementsByTagName()。

本例查找所有 <p> 元素，返回 HTMLCollection 对象：

var x = document.getElementsByTagName("p");
//x[0]是第一个<p>元素，以此类推。

本例查找 id="main" 的元素，然后查找 "main" 中所有 <p> 元素：

var x = document.getElementById("main");
var y = x.getElementsByTagName("p");

通过类名查找 HTML 元素

如果您需要找到拥有相同类名的所有 HTML 元素，请使用 getElementsByClassName()。

本例返回包含 class="intro" 的所有元素（一般是HTMLCollection 对象，某些（老的）浏览器会返回 NodeList 对象）

var x = document.getElementsByClassName("intro");

通过 CSS 选择器查找 HTML 元素

如果您需要查找匹配指定 CSS 选择器（id、类名、类型、属性、属性值等等）的所有 HTML 元素，请使用 querySelectorAll() 方法。

本例返回 class="intro" 的所有 <p> 元素，返回 NodeList 对象：

var x = document.querySelectorAll("p.intro");

通过 HTML 对象选择器查找 HTML 对象

本例查找 id="frm1" 的 form 元素，在 forms 集合中，然后显示所有元素值：

/*
<form id="frm1" action="/demo/action_page.php">
  First name: <input type="text" name="fname" value="Bill"><br>
  Last name: <input type="text" name="lname" value="Gates"><br><br>
  <input type="submit" value="提交">
</form>
*/
let x = document.forms["frm1"];
let text = "";
for (let i = 0; i < x.length; i++) {
    text += x.elements[i].value + "<br>";
}
document.getElementById("demo").innerHTML = text;

Document 对象集合：

集合 描述
all[] 提供对文档中所有 HTML 元素的访问。
anchors[] 返回对文档中所有 Anchor 对象的引用。
applets 返回对文档中所有 Applet 对象的引用。
forms[] 返回对文档中所有 Form 对象引用。
images[] 返回对文档中所有 Image 对象引用。
links[] 返回对文档中所有 Area 和 Link 对象引用。

HTMLCollection & NodeList

HTMLCollection 对象是HTML 元素列表（集合）。

NodeList 是文档节点的集合。

相同点：

  • 都是类数组的对象列表（集合）
  • 有定义列表（集合）中项目数的 length 属性。
  • 可以通过索引 (0, 1, 2, 3, 4, ...) 像数组那样访问每个项目
  • 都无法使用数组方法，比如 valueOf()、push()、pop() 或 join()。

不同点：

  • 访问 HTMLCollection 项目，可以通过它们的名称、id 或索引号。访问 NodeList 项目，只能通过它们的索引号。
  • 只有 NodeList 对象能包含属性节点和文本节点。

改变 HTML 元素

方法 描述
element.innerHTML = new html content 改变元素的 inner HTML
element.attribute = new value 改变 HTML 元素的属性值
element.setAttribute(attribute, value) 改变 HTML 元素的属性值
element.style.property = new style 改变 HTML 元素的样式

改变 HTML 输出流

在 JavaScript 中，document.write() 可用于直接写入 HTML 输出流：

<!DOCTYPE html>
<html>
<body>

<script>
document.write(Date());
</script>

</body>
</html>

千万不要在文档加载后使用 document.write()。这么做会覆盖文档。

改变 HTML 内容

//<p id="demo">Hello World!</p>
document.getElementById("demo").innerHTML = "hello";

改变属性的值

//<img id="myImage" src="smiley.gif"/>
document.getElementById("myImage").src = "landscape.jpg";

改变 CSS

<p id="demo">Hello World!</p>
document.getElementById("demo").style.color = "blue";

添加和删除元素

方法 描述
document.createElement(element) 创建 HTML 元素
element.removeChild(childElement) 删除 HTML 元素
element.appendChild(childElement) 添加 HTML 元素
element.replaceChild(e1, e2) 用e1替换e2
element.insertBefore(e1, e2) 在e2元素前面添加e1 
<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>

事件

JavaScript 能够在事件发生时执行，比如当用户点击某个 HTML 元素时。

HTML 事件的例子：

  • 当用户点击鼠标时
  • 当网页加载后
  • 当图像加载后
  • 当鼠标移至元素上时
  • 当输入字段被改变时
  • 当 HTML 表单被提交时
  • 当用户敲击按键时

在本例中，当用户点击 <h1> 时，会改变其内容：

<!DOCTYPE html>
<html>
<body>

<h1 onclick="this.innerHTML = 'Hello!'">点击此文本！</h1>

</body>
</html>

onload

当用户进入后及离开页面时，会触发 onload。

onload 事件可用于检测访问者的浏览器类型和浏览器版本，然后基于该信息加载网页的恰当版本。

onunload

当用户进入后及离开页面时，会触发 onunload

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

onmousedown

当鼠标按钮被点击时，onmousedown 事件被触发

onmouseup

然后当鼠标按钮被释放时，onmouseup 事件被触发

onclick

当鼠标点击完成后，onclick 事件被触发。

onmouseover

当用户将鼠标移至 HTML 元素上时触发某个函数：

onmouseout

当用户将鼠标从 HTML 元素上移出时触发某个函数：

onchange

onchange 事件经常与输入字段验证结合使用。

事件监听程序

addEventListener()

addEventListener() 方法为指定元素指定事件处理程序。

语法：

element.addEventListener(event, function, useCapture);

第一个参数是事件的类型（比如 "click" 或 "mousedown"）。

第二个参数是当事件发生时我们需要调用的函数。

第三个参数是布尔值，指定使用事件冒泡还是事件捕获。此参数是可选的。默认值是 false，将使用冒泡传播，如果该值设置为 true，则事件使用捕获传播。

注意：请勿对事件使用 "on" 前缀；请使用 "click" 代替 "onclick"。

添加当用户点击按钮时触发的事件监听器：

document.getElementById("myBtn").addEventListener("click", function(){ alert("Hello World!"); });

addEventListener() 方法允许您向相同元素添加多个事件，同时不覆盖已有事件。

addEventListener() 允许您将事件监听器添加到任何 HTML DOM 对象上，比如 HTML 元素、HTML 对象、window 对象或其他支持事件的对象，比如 xmlHttpRequest 对象。

事件冒泡还是事件捕获？

在 HTML DOM 中有两种事件传播的方法：冒泡和捕获。

事件传播是一种定义当发生事件时元素次序的方法。假如 <div> 元素内有一个 <p>，然后用户点击了这个 <p> 元素，应该首先处理哪个元素“click”事件？

在冒泡中，最内侧元素的事件会首先被处理，然后是更外侧的：首先处理 <p> 元素的点击事件，然后是 <div> 元素的点击事件。

在捕获中，最外侧元素的事件会首先被处理，然后是更内侧的：首先处理 <div> 元素的点击事件，然后是 <p> 元素的点击事件。

removeEventListener()

removeEventListener() 方法会删除已通过 addEventListener() 方法附加的事件处理程序：

element.removeEventListener("mousemove", myFunction);

注释：IE 8、Opera 6.0 及其更早版本不支持 addEventListener() 和 removeEventListener() 方法。不过，对于这些特殊的浏览器版本，您可以使用 attachEvent() 方法向元素添加事件处理程序，并由 detachEvent() 方法删除：

跨浏览器解决方案：

var x = document.getElementById("myBtn");
if (x.addEventListener) {                    // 针对主流浏览器，除了 IE 8 及更正版本
    x.addEventListener("click", myFunction);
} else if (x.attachEvent) {                  // 针对 IE 8 及更早版本
    x.attachEvent("onclick", myFunction);
}

导航

通过 JavaScript，您可以使用以下节点属性在节点之间导航：

  • parentNode
  • childNodes[nodenumber]
  • firstChild
  • lastChild
  • nextSibling
  • previousSibling

有两个特殊属性允许访问完整文档：

  • document.body - 文档的 body
  • document.documentElement - 完整文档
posted @   hzyuan  阅读(138)  评论(0)  编辑  收藏  举报
相关博文：
· 【JavaScript】JS 对象
· 【AJAX】AJAX 的简单应用
· HTML DOM（Document Object Model 文档对象模型）
· JavaScript学习(五) -- HTML DOM
· 系统化学习前端之JavaScript（DOM）
阅读排行：
· DeepSeek 开源周回顾「GitHub 热点速览」
· 记一次.NET内存居高不下排查解决与启示
· 物流快递公司核心技术能力-地址解析分单基础技术分享
· .NET 10首个预览版发布：重大改进与新特性概览！
· .NET10 - 预览版1新功能体验（一）

喜欢请打赏

扫描二维码打赏

支付宝打赏

点击右上角即可分享
微信分享提示
AI FOR CODE 大赛