HTML | DOM 引用属性

在 HTML 和 JavaScript 中，我们可以通过引用属性来访问特定的 DOM 元素或 HTML 元素。这些引用属性允许我们以编程方式控制并操作 web 页面中的不同元素。

HTML DOM 引用属性

HTML DOM 引用属性通常用于通过 JavaScript 连接到网页中的不同元素。以下是一些常用的 HTML DOM 引用属性：

• document: 表示整个网页文档。
• window: 表示当前窗口或标签页。
• element.parentNode: 表示元素的父元素。
• element.childNodes: 表示元素的所有子元素。
• element.firstChild: 表示元素的第一个子元素。
• element.lastChild: 表示元素的最后一个子元素。
• element.nextSibling: 表示元素的下一个兄弟元素。
• element.previousSibling: 表示元素的前一个兄弟元素。
• element.firstChild.nodeValue: 表示元素的第一个子元素的值。

HTML 引用属性

HTML 引用属性通常用于在某些 HTML 标记中引用另一个元素，例如在超链接和图像标记中。以下是一些常用的 HTML 引用属性：

• href: 表示超链接的目标 URL。
• src: 表示图像或其他媒体文件的 URL。
• id: 表示元素的唯一标识符。
• class: 表示元素的类名称。
• title: 表示元素的鼠标悬停时显示的文本。
• alt: 表示图像元素的替代文本，当图像无法显示时显示。
• for: 表示 label 元素所描述的表单元素的 id 值。

示例代码

以下是一个示例代码，演示了如何使用 HTML DOM 引用属性来访问和操作 DOM 元素：

// 获取元素
const element = document.getElementById('myElement');

// 访问元素的属性
console.log(element.tagName); // 输出 "DIV"
console.log(element.innerHTML); // 输出元素的 HTML 内容

// 修改元素的属性
element.style.backgroundColor = 'red'; // 设置元素背景色为红色
element.innerHTML = 'Hello World!'; // 将元素的 HTML 内容设置为 "Hello World!"

以下是一个示例代码，演示了如何使用 HTML 属性来引用其他元素：

<!-- 超链接 -->
<a href="https://www.example.com">点击打开 example 网站</a>

<!-- 图像 -->
<img src="https://www.example.com/image.jpg" alt="example 图像">

<!-- 其他元素 -->
<div id="myElement" class="myClass">这是我的元素</div>

<!-- 包含标签 -->
<label for="myInput">名称：</label>
<input type="text" id="myInput">