Java Script基础（七） HTML DOM模型

一、HTML DOM。

　　HTML DOM的特性和方法是专门针对HTML的，HTML中的每个节点都是一个对象，通过访问属性和方法的方式，让一些DOM操作更加简便，在HTML DOM中有专门用来处理白哦个及其元素的属性和方法。

　　HTML DOM参考手册

　　下面以Table为例来讲解HTML DOM动态操作表格。

　　1、Table对象（表格）

　　在HTML DOM中， table对象代表一个HTML表格，TableRow对象代表HTML表格的行，tableCell对象代表HTML表格的单元格。在HTML中可以通过Table、TableRow和TableCell来创建HTML表格。

　　属性：

　　rows[]：获取表格中的所有行。

　　cellls[]：获取表格中的所有单元格。

　　方法：

　　inertRow(index)：用于在表格的指定位置插入一个新行。

　　deleteRow(index)：用于从表格中删除指定位置的行。

　　2、TableRow对象（行）

　　属性：

　　cells[]：返回当前行中的所有单元格。

　　rowIndex：返回当前行的下标。

　　方法：

　　insertCell(index)：在一行中的指定位置插入单元格。

　　deleteCell(index)：删除一行中指定位置的单元格。

　　3、TableCell对象（单元格）

　　属性：

　　cellIndex：返回当前单元格所在的下标

　　innerHTML：返回当前单元格中的HTML标记。

　　align：设置单元格的水平对齐方式。

　　className：设置单元格的class属性。

　　示例：

　　动态生成单元格的行，并为单元格赋值。

<html>
<head> <script type="text/javascript"> function insRow() { var x=document.getElementById('myTable').insertRow(0) var y=x.insertCell(0) var z=x.insertCell(1) y.innerHTML="NEW CELL1" z.innerHTML="NEW CELL2" } </script> </head> <body> <table id="myTable" border="1"> <tr> <td>Row1 cell1</td> <td>Row1 cell2</td> </tr> <tr> <td>Row2 cell1</td> <td>Row2 cell2</td> </tr> <tr> <td>Row3 cell1</td> <td>Row3 cell2</td> </tr> </table> <br /> <input type="button" onclick="insRow()" value="插入行"> </body> </html>

转载于:https://www.cnblogs.com/futao123/p/5068673.html

Java Script基础（七） HTML DOM模型相关推荐

java script基础入门·2
java script基础入门2 方法声明 <script>function arr(a,b) {return a+b;}let sum=arr(11,12);window.documen ...
Java Script基础（一）
一.为什么学习JavaScript 学习JavaScript主要有以下两点原因. 1.客户端表单验证. 2.实现页面交互(网页特效) 二.什么是JavaScript JavaScript是一种描述语言 ...
Java Script基础
JavaScript JavaScript引入方式行内样式内联样式外部样式 JavaScript变量类型 JavaScript条件判断语句 if语句 else if语句 switch语句 Jav ...
JAVA线程两种方法内存,JAVA线程基础回顾及内存模型(一)
线程创建的两种方式继承Thread类 class MyThread extends Thread{ ...... @Override public void run(){ ...... } } My ...
Java Script基础（九）下拉列表对象
Select下拉列表属性: options[]:返回包含下拉列表中的所有选项的一个数组. selectedIndex:设置返回下拉列表中被选项目的索引号. length:返回下拉列表框中选项的数目. ...
JAVA知识基础(七)：封装
1.概述封装(Encapsulation)是指一种将抽象性函式接口的实现细节部分包装.隐藏起来的方法. 封装可以被认为是一个保护屏障,防止该类的代码和数据被外部类定义的代码随机访问. 要访问该类的代 ...
Web前端基础---JavaScript函数事件及其绑定DOM模型BOM模型
Day03 JavaScript JavaScript是一种属于网络的高级脚本语言,被广泛用于Web应用开发,常用来为网页添加各式各样的动态功能,为用户提供更流畅美观的浏览效果.通常JavaScri ...
前端基础学习——JavaScript之BOM模型与DOM模型
前面还有JavaScript基础介绍,有兴趣的朋友可以前往查看前端基础学习--带你夯实JavaScript基础目录一. BOM模型 1.1 BOM模型与DOM模型示意图: 1.2 浏览器窗口中的B ...
Jquery从入门到精通：二、选择器 1、准备篇 1）基础的基础：DOM模型
二.选择器 1.准备篇 (1)基础的基础:DOM模型什么是DOM 文件对象模型(Document Object Model,DOM)是给 HTML 与 XML 文件 ...
JAVA基础七类和对象
文章目录 JAVA基础七类和对象 01 引用 02 继承 03 方法重载 04 构造方法 05 this 06 传参 07 包 08 访问修饰符 09 类属性 10 类方法 11 属性初始化 12 ...

Java Script基础（七） HTML DOM模型

Java Script基础（七） HTML DOM模型

Java Script基础（七） HTML DOM模型相关推荐

最新文章

热门文章