JavaScript DOM操作与iframe交互实用技巧

作者:像素猫

时间:2026-10-25

浏览:506

本文整理JavaScript开发中的常见实用技巧,涵盖DOM节点访问、innerText与innerHTML的区别、offset系列属性(如offsetTop、scrollLeft)的含义与限制,以及iframe内部元素的获取与打印方法。通过具体代码示例,帮助开发者理解节点树结构及表格对象操作,提升前端交互开发的效率与准确性。

文章目录
JS对象之Table表格对象(摘抄)

Table对象集合

Table对象:表示HTML文档中的表,对于文档中每个<table>标记,浏览器都创建一个Table对象.

集合

描述

cells[] 获取包含表格中所有单元格的数组

js 取行中列

DOM节点访问与文本内容设置

代码示例如下:

 
var tbodyObj = document.getElementById(tbodyID);
tbodyObj.rows[rowID].cells[colID].innerText = "abcd";
tbodyObj.rows[rowID].cells[colID].innerHTML = "abcd";
(注:innerHTML用于解析HTML代码,innerText仅返回显示的文本内容)


document.documentElement与document.body。

DOM节点树结构与根节点访问

这涉及DOMDocument对象中的body子节点以及整个节点树的根节点root。



DOM将层次结构中的每个对象称为节点,形成树形结构,类似于目录层级:根目录下包含子目录,子目录下还可包含子目录。



以HTML超文本标记语言为例:整个文档的根节点是<html>,在DOM中可通过document.documentElement访问它,即整个节点树的根节点。而body是子节点,要在脚本中访问body标签,应使用document.body。



对offsetLet,offsetTop,scrollLeft,scrollTop几个方法的理解

Offset系列属性详解

关键字: offsetlet, offsettop, scrollleft, scrolltop


1.offsetTop :


当前对象到其上级层顶部的距离。


该属性只读,不能赋值。若需设置对象到页面顶部的距离,请使用style.top属性。



2.offsetLeft :


当前对象到其上级层左边的距离。


该属性只读,不能赋值。若需设置对象到页面左部的距离,请使用style.left属性。



3.offsetWidth :


当前对象的宽度。


与style.width属性的区别在于:若对象宽度设定为百分比,style.width始终返回该百分比值,而offsetWidth则返回不同页面尺寸下对象的实际像素宽度。



4.offsetHeight :


与style.height属性的区别在于:若高度设定为百分比,style.height返回百分比值,而offsetHeight返回实际像素高度。



js操作iframe的一些知识

iframe内部元素操作与打印

1. 打印iframe


示例:frameName.document.execCommand('print');


2. 获取iframe


示例:var ifr_window = window.frames["frameName"];


3. 获取iframe中的元素


示例1:将iframe中id为elementId的元素设为不显示:


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


ifr_window.elementId.style.display = 'none';


示例2:获取iframe中id为listTable的表格

实用工具推荐

电子包浆

绿化、压缩、噪点和虚拟水印,自由调节做旧程度。

使用 ›
图片压缩

选择画质和输出格式,预览压缩前后的大小。

使用 ›
相关文章