js_ex_dom

JavaScript 和 HTML 文档对象模型 (DOM) 示例

本节列举了 JavaScript 如何通过 DOM（文档对象模型）与 HTML 元素进行交互和操作的示例。

锚点 (<a>) 元素

链接元素的常见任务：

• 获取链接的 href (URL)。
• 获取或设置 hreflang 属性（链接资源的语言）。
• 访问链接的 id。
• 确定 rel 属性（与当前文档的关系）。
• 查找或更改 target 属性（在哪里打开链接）。
• 检查 type 属性（链接资源的 MIME 类型）。

这些通常通过选择元素（例如，使用 document.getElementById 或 document.querySelector）然后访问其属性（例如，linkElement.href）来完成。

区域 (<area>) 元素（在图像映射中）

与图像映射中的可点击区域进行交互：

• 获取区域的 alt 文本。
• 获取定义区域的 coords (坐标)。
• 查找区域的 shape（例如，‘rect’、‘circle’）。
• 访问区域的 href (URL)。
• 解析 href 的组成部分：protocol、hostname、port、pathname、search (查询字符串)、hash。
• 获取或设置区域链接的 target 属性。

基础 (<base>) 元素

管理相对链接的基础 URL：

• 获取 href 属性以查找页面上所有相对 URL 的基础 URL。
• 获取 target 属性以查找页面上所有链接的默认目标。

IFrame (<iframe>) 元素

操作嵌入式内联框架：

• 访问 contentDocument 或 contentWindow 与 iframe 的内容进行交互（受同源策略约束）。
• 更改 iframe 元素本身（而非其内容）的 style.backgroundColor（在有访问权限的情况下）。
• 获取或设置 iframe 的 height 和 width 属性。
• 获取 iframe 的 name 属性。
• 获取或更改 iframe 的 src (源 URL) 属性，从而加载新内容。

现代实践中，也可能使用 postMessage 进行跨域 iframe 通信。

图像 (<img>) 元素

处理图像：

• 获取或设置图像的 alt 文本。
• 获取图像的 height 和 width（实际或指定的）。
• 实现动态图像加载，例如点击时显示高清版本。
• 获取或更改图像的 src (源 URL)。
• 根据用户交互动态更改图像（例如，切换灯泡图像）。
• 如果图像是图像映射的一部分，则访问 usemap 属性。

表格 (<table>、<tr>、<td> 等) 元素

操作 HTML 表格：

• 改变表格外观，例如 table.style.borderWidth 或用于 border-spacing 和 padding 的 CSS 类。
• 获取或设置表格单元格（<td> 或 <th>）的 innerHTML 或 textContent。
• 使用 table.createCaption() 创建并添加一个 <caption> 元素到表格。
• 使用 table.insertRow() 和 table.deleteRow() 添加或删除行。
• 使用 row.insertCell() 和 row.deleteCell() 在行内添加或删除单元格。
• 修改现有表格单元格的内容。

现代应用程序可能使用 JavaScript 框架或库进行复杂的表格操作和数据绑定，但理解核心 DOM 方法至关重要。