操作DOM表格

早些时候,HTML 还是以表格布局为主, 所以DOM操作表格是比较重要的一点

但是现如今 有其它的选择,所以表格的操作也就慢慢地淡出了人们的视线

所以这里也就不过多去详细展开,这里也就做一个简要地记录

我们知道 HTML  中表格由许多元素构成

所以为了方便我们的操作DOM为我们提供了一些属性和方法,以便我们更方便地构建一个表格

<table>元素

有以下方法及属性:

  • caption:保存对<caption>的引用
  • tBodies:<tbody>元素的 HTMLCollection 集合
  • tFoot:对<tfoot> 元素的引用
  • tHead:对<thead>元素的引用
  • rows:表格中所有行元素的 HTMLCollection
  • createTHead():创建<thead>元素并返回引用
  • createTFoot():创建<tfoot>元素并返回引用
  • createCaption():创建<caption>元素返回引用
  • deleteCaption():删除caption
  • deleteRow(n):删除指定行
  • insertRow(n):指定位置插入行

<tr>元素有以下属性及方法:

  • cells: 保存表格中单元格的 HTMLCollection
  • deleteCell(n):删除指定位置的单元格
  • insertCell(n): 向指定位置插入单元格

DOM动态集合

我们知道在DOM操作中一些方法获取的结果是动态的,也就是我们常说的动态方法,比如getElementsByTagName

有一些方法获取的结果又是静态的比如 querySelector

这两类方法的具体区别在于

DOM中提供了三种动态类型,而动态方法返回的也正是动态类型的集合

1.NodeList

2.NamedMap

3.HTMLCollection

以上三种都是动态的集合

也就是说每当文档发生改变时,这些集合也会随之改变,他们始终保持着与当前文档的一致

当我们实践时就需要注意这些动态方法,避免陷入死循环

如下方代码:

var div = document.getElementsByTagName("div");

for(let i = 0; i<div.length ; i++){
document.body.appendChild(document.createElement("div"));
}

由于我们在循环体中不停地向Body插入div所以当每次我们将新创建的 div 插入文档时,div的length就会随之增加,所以会陷入死循环

所以我们在使用动态类型时需要十分的注意

Javascript高级编程学习笔记(45)——DOM 操作表格及DOM动态集合的更多相关文章

  1. Javascript高级编程学习笔记(49)—— DOM2和DOM3(1)DOM变化

    DOM变化 我们知道DOM有许多的版本,其中DOM0和DOM2这两个级别以对事件的纳入标准而为人所知 但是呢,这里不讲事件,在后面会有专门和事件有关的部分作为详细讲解 这里就只讲一下DOM2和DOM3 ...

  2. Javascript高级编程学习笔记(38)—— DOM(4)Text

    Text类型 html页面中的纯文本内容就属于Text类型 纯文本内容可以包含转义后的html字符,但不能包括 html 代码 text类型具有以下属性.方法 nodeType:3 nodeName: ...

  3. Javascript高级编程学习笔记(36)—— DOM(2)Document

    Documet类型 了解了基础的Node类型过后,我们来聊聊Node中的Document类型 我们知道所有的节点都继承自Node类型 所以除了Node类型公有的方法和类型之外,Document类型还有 ...

  4. Javascript高级编程学习笔记(1)—— JS简介

    此系列文章,用于记录所学,如有错误欢迎指出. Javascript组成 1.核心(ECMAScript) 2.文档对象模型(DOM) 3.浏览器对象模型(BOM) 1.核心(ECMAScript) E ...

  5. Javascript高级编程学习笔记(43)—— 动态脚本

    动态脚本 大多数情况下,DOM操作都很简洁明了 因为DOM主要就是用来操作页面中的可视节点的 但有些时候我们又希望可以动态的来进行DOM操作 其中的一部分也就是今天我们的内容动态脚本 动态脚本是什么意 ...

  6. Javascript高级编程学习笔记(59)—— 事件(3)事件对象

    事件对象 在触发DOM‘事件时,会产生一个事件对象 event 该对象包含着所有与事件有关的信息 所有浏览器都支持 event 对象但是支持的方式有所不同 DOM事件对象 兼容DOM的浏览器会将eve ...

  7. Javascript高级编程学习笔记(37)—— DOM(3)Element

    Element类型 除了Document类型之外,Element类型应该就是web编程中最常用的类型了 Element类型主要用于表现XML.HTML元素,提供对元素标签名.子节点以及特性的访问 特性 ...

  8. Javascript高级编程学习笔记(35)—— DOM(1)节点

    DOM JS由三部分组成 1.BOM 2.DOM 3.ECMAScript ES和BOM在前面的文章已经介绍过了 今天开始JS组成的最后一部分DOM(文档对象模型) 我们知道,JS中的这三个部分实际上 ...

  9. Javascript高级编程学习笔记(71)—— 模拟事件(1)DOM事件模拟

    事件,指的是网页中某个特定的交互时刻 一般来说事件由浏览器厂商负责提供,一般由用户操作或者其它浏览器功能来触发 但是有一类特殊的事件,那就是由我们开发人员通过JS触发的事件 这些事件和浏览器创建的事件 ...

随机推荐

  1. 手把手教学在Springboot中搭建使用Guava cache,包教包会,不会我输一包辣条给你

     guava cache使用简介 概述 缓存是日常开发中经常应用到的一种技术手段,合理的利用缓存可以极大的改善应用程序的性能. Guava官方对Cache的描述连接 缓存在各种各样的用例中非常有用.例 ...

  2. 分别用for、while和do-while循环语句以及递归方法计算n!,并输出算式

    一.用for循环实现 实验过程: 实验结果: 二.用while循环实现 实验结果: 三.用do while循环实现 实验结果: 四.用递归算法实现 实验结果: 实验心得: 此次实验中必须熟悉for循环 ...

  3. laravel安装laravel-ide-helper扩展进行代码提示(二)

    一.扩展的地址 https://github.com/barryvdh/laravel-ide-helper 二.安装扩展 1.引入库: composer require barryvdh/larav ...

  4. 让终端走socks5代理

    (2017.9.17更新) 方法1: 在终端中直接运行命令 1 export http_proxy=http://proxyAddress:port 这个办法的好处是简单直接,并且影响面很小(只对当前 ...

  5. windbg排查大内存

    现在都是用windbg preview,安装比较麻烦了,还要配置环境变量, 并且每次分析前要先执行 !analyze - v !eeheap -gc !DumpHeap -min 500 000002 ...

  6. Java匿名内部类访问外部

    匿名内部类访问外部局部变量必须是final修饰的,Java 1.8 会默认为其加上final 例子如下: public void send(String topicName, T obj) { Str ...

  7. the default terminal(gnome-terminal) start up fail

    Platform:  Ubuntu 16.04 LTS Reason: variable $LANG on system is empty Solution: localectl set-locale ...

  8. PCL-CMAKELIST书写格式

    cmake_minimum_required(VERSION 2.6 FATAL_ERROR)//cmake最小版本 find_package(PCL 1.3 REQUIRED COMPONENTS ...

  9. NOIP考点

    NOIP考点 基础算法 图 树 数论 数据结构 动态规划 搜索 其他算法 省选知识点汇总 图论 数据结构 字符串相关算法及数据结构 数学 计算几何 搜索 动态规划 其他算法 转自:巨佬的博客 加*号是 ...

  10. python实现简单动画——生命游戏

    生命游戏 生命游戏的宇宙是一个无限的,其中细胞的二维正交网格,每个细胞处于两种可能的状态之一,即*活着*或*死亡*(分别是*人口稠密*和*无人居住*).每个细胞与它的八个邻居相互作用,这八个邻居是水平 ...