JavaScript 创建文档对象

迷南。 2021-10-24 06:18 637阅读 0赞

### 创建文档对象 ###

*  为什么要创建文档对象？
 *  怎么创建一个文档对象？
 *  Table 表格操作
 *   *  创建行元素
     *   *  thead的创建
         *  tbody的创建
         *  tfoot的创建
     *  删除行元素
     *   *  thead的删除
         *  tfoot的删除
     *  创建行分组
     *  删除行分组
     *  获取行分组
 *  单元格
 *   *  添加单元格
     *  删除单元格
     *  获取单元格

# 为什么要创建文档对象？ #

顾名思义，文档对象是用于存放一段文档的对象，在内存中临时保存多个子元素的虚拟父对象。在操作DOM Tree时，频繁的操作会影响页面的性能，所以在我们操作DOM Tree时，先创建一个虚拟的父对象，操作虚拟的父对象，然后再将虚拟的对象追加的页面DOM Tree上，追加完成后，内存释放。

# 怎么创建一个文档对象？ #

var frag = document.createDocumentFragment();

创建了虚拟的文档对象后，他会存放在内存中，此时我们可以操作他，譬如在虚拟的文档对象里追加一个div

frag.appendChild(document.createElement('div'));

# Table 表格操作 #

## 创建行元素 ##

var table = docuemnt.createElement('table');

### thead的创建 ###

var head = table.createTHead();

### tbody的创建 ###

var body = table.createTBody();

### tfoot的创建 ###

var foot = table.createTFoot();

我们通过声明变量`head`,`body`,`foot`来接受`thead`,`tbody`,`tfoot`,同时也可以通过变量`head`,`body`,`foot`在里面追加`tr`,`td`等标签

## 删除行元素 ##

### thead的删除 ###

table.deleteTHead()

### tfoot的删除 ###

table.deleteTFoot()

*  **需要注意的是：table无法删除tbody**

## 创建行分组 ##

insertRow() // 表示在末尾追加一行

## 删除行分组 ##

thead.deleteRow(i)
    tbody.deleteRow(i)
    table.deleteRow(i)

*  每一行`tr`都有`tr.rowIndex`，记录了tr在整个表中的下标

## 获取行分组 ##

rows

# 单元格 #

## 添加单元格 ##

inserCell(i)

*  无法添加th

## 删除单元格 ##

deleteCll(i)

## 获取单元格 ##

Cells

发表评论取消回复

表情：

评论列表（有 0 条评论，637人围观）

还没有评论，来说两句吧...

相关阅读

相关 JavaScript文档对象

DOM-Document Object Model,他是W3C国际组织的一套Wed标准。他以树形结构表示文档（HTML、XML等），定义了遍历、j检查和修改各节点的属性和方法。

怼烎@/ 2023年10月07日 19:54/ 0 赞/ 24 阅读

相关 javaScript创建对象

ECMA-262把对象定义为：无序属性的集合，其属性可以包含基本值，对象或者函数。所以js中对象就是一组键值对。面向对象的语言中，都是通过类的来创建任意多个具有相同属性和方

亦凉/ 2022年11月10日 05:44/ 0 赞/ 216 阅读

相关 Javascript对象的创建

一、创建对象的模式虽然使用Object构造函数或者对象字面量可以方便地创建对象，但这种方式的不足是具有同样接口的多个对象需要重复编写很多代码。工厂模式按照特

╰+哭是因爲堅強的太久メ/ 2022年11月10日 03:53/ 0 赞/ 203 阅读

相关 Javascript创建对象

From 《Professional Javascript For Web Developers》 ECMA-262把对象定义为：无序属性的集合，其属性可以包含基本值、对象或

落日映苍穹つ/ 2022年09月25日 06:27/ 0 赞/ 205 阅读

相关 javascript创建类对象

正确样例： var Person=function(name,age){ this.Name=''; this.Age='';

╰+攻爆jí腚メ/ 2022年08月21日 14:58/ 0 赞/ 228 阅读

相关 JavaScript创建对象

<!DOCTYPE html> <html> <body> <script> person=new Object();

小灰灰/ 2022年08月06日 17:19/ 0 赞/ 223 阅读

相关 JavaScript 对象的创建

Object类型是JavaScript中使用最多的一种类型。创建Object[实例][Link 1]的方式有多种，接下来一一列举。 1. Object构造函数

刺骨的言语ヽ痛彻心扉/ 2022年08月06日 12:25/ 0 赞/ 220 阅读

相关 JavaScript 对象创建 (javascript 面向对象特性)

JavaScript 中的所有事物都是对象：字符串、数值、数组、函数... 此外，JavaScript 允许自定义对象。 JavaScript 对象 JavaScript

超、凢脫俗/ 2022年05月17日 02:41/ 0 赞/ 294 阅读

相关 JavaScript 创建文档对象

创建文档对象为什么要创建文档对象？怎么创建一个文档对象？ Table 表格操作创建行元素 thead的创建

迷南。/ 2021年10月24日 06:18/ 0 赞/ 638 阅读

相关 javaScript创建对象

<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8">

待我称王封你为后i/ 2021年09月16日 02:42/ 0 赞/ 391 阅读