JavaScript 常用操作与 DOM 属性详解

Table 对象的基础操作

在 JavaScript 中，对于文档中的每一个 <table> 标记，浏览器都会创建一个对应的 Table 对象。理解其核心集合属性有助于快速获取或修改表格数据。

• cells[]：这是一个数组集合，用于获取包含表格中所有单元格的列表。

第1步：修改表格特定单元格内容

目的：获取指定 tbody 中某一行某一列的单元格，并修改其显示文本或 HTML 内容。

1. 入口：通过 document.getElementById 获取目标 tbody 对象。
2. 动作：使用 .rows[rowID].cells[colID] 定位到具体的单元格。
3. 参数：替换单元格内容的 innerText（纯文本）或 innerHTML（含 HTML 代码）。
4. 完成状态：单元格更新为设定的值。

var tbodyObj = document.getElementById('yourTbodyID');
// 修改显示文本
tbodyObj.rows[0].cells[0].innerText = "新文本";
// 修改HTML内容
tbodyObj.rows[0].cells[0].innerHTML = "<b>加粗文本</b>";

DOM 树结构与关键节点

了解 DOM（文档对象模型）的树状结构是编写脚本的基础。可以将 DOM 想象成一个目录层级结构：

• document.documentElement：代表整个节点树的根节点，即 HTML 文档中的 <html> 标签。
• document.body：作为 <html> 的子节点，直接访问页面主体内容区的 <body> 标签。

位置属性：offsetTop 与 offsetLeft

这两个属性常用于获取元素相对于父容器的偏移量，但需注意它们的行为特性：

1. offsetTop：当前对象到其上级层（offsetParent）顶部的距离。该属性为只读，不能赋值。若需设置距离页面顶部的距离，应使用 style.top 属性。
2. offsetLeft：当前对象到其上级层（offsetParent）左边的距离。同样为只读，不可赋值。
3. width/height 差异：offsetWidth 返回的是对象在当前环境下的实际像素宽度；而 style.width 如果设定为百分比，则会永远返回该百分比字符串，不会随页面缩放转化为像素。

Iframe 内部元素的操作

在跨框架（iframe）交互场景中，获取和操作子窗口内的元素是常见问题。以下提供三种典型操作：

第1步：打印指定的 iframe

利用 iframe 窗口的 document 对象调用打印命令。

// 假设 iframe 名为 frameName
var frameDoc = window.frames["frameName"].document;
frameDoc.execCommand('print');

第2步：获取 iframe 对象

通过 window.frames 集合根据名称或索引访问 iframe。

var ifr_window = window.frames["frameName"];

第3步：操作 iframe 内部元素

获取 iframe 后，可直接访问其 DOM 树中的元素。例如，将 id 为 listTable 的元素设置为不显示：

var ifr_window = window.frames["frameName"];
ifr_window.document.getElementById('elementId').style.display = 'none';

或者获取其中 id 为 listTable 的表格对象进行进一步分析：

var listTable = ifr_window.document.getElementById('listTable');

以上就是 JavaScript 常用 DOM 操作与 IFrame 控制技术的详细内容，更多关于 JS 进阶技巧的资料请关注本站其它相关文章！