Javascript高级编程学习笔记(45)——DOM 操作表格及DOM动态集合
操作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动态集合的更多相关文章
- Javascript高级编程学习笔记(49)—— DOM2和DOM3(1)DOM变化
DOM变化 我们知道DOM有许多的版本,其中DOM0和DOM2这两个级别以对事件的纳入标准而为人所知 但是呢,这里不讲事件,在后面会有专门和事件有关的部分作为详细讲解 这里就只讲一下DOM2和DOM3 ...
- Javascript高级编程学习笔记(38)—— DOM(4)Text
Text类型 html页面中的纯文本内容就属于Text类型 纯文本内容可以包含转义后的html字符,但不能包括 html 代码 text类型具有以下属性.方法 nodeType:3 nodeName: ...
- Javascript高级编程学习笔记(36)—— DOM(2)Document
Documet类型 了解了基础的Node类型过后,我们来聊聊Node中的Document类型 我们知道所有的节点都继承自Node类型 所以除了Node类型公有的方法和类型之外,Document类型还有 ...
- Javascript高级编程学习笔记(1)—— JS简介
此系列文章,用于记录所学,如有错误欢迎指出. Javascript组成 1.核心(ECMAScript) 2.文档对象模型(DOM) 3.浏览器对象模型(BOM) 1.核心(ECMAScript) E ...
- Javascript高级编程学习笔记(43)—— 动态脚本
动态脚本 大多数情况下,DOM操作都很简洁明了 因为DOM主要就是用来操作页面中的可视节点的 但有些时候我们又希望可以动态的来进行DOM操作 其中的一部分也就是今天我们的内容动态脚本 动态脚本是什么意 ...
- Javascript高级编程学习笔记(59)—— 事件(3)事件对象
事件对象 在触发DOM‘事件时,会产生一个事件对象 event 该对象包含着所有与事件有关的信息 所有浏览器都支持 event 对象但是支持的方式有所不同 DOM事件对象 兼容DOM的浏览器会将eve ...
- Javascript高级编程学习笔记(37)—— DOM(3)Element
Element类型 除了Document类型之外,Element类型应该就是web编程中最常用的类型了 Element类型主要用于表现XML.HTML元素,提供对元素标签名.子节点以及特性的访问 特性 ...
- Javascript高级编程学习笔记(35)—— DOM(1)节点
DOM JS由三部分组成 1.BOM 2.DOM 3.ECMAScript ES和BOM在前面的文章已经介绍过了 今天开始JS组成的最后一部分DOM(文档对象模型) 我们知道,JS中的这三个部分实际上 ...
- Javascript高级编程学习笔记(71)—— 模拟事件(1)DOM事件模拟
事件,指的是网页中某个特定的交互时刻 一般来说事件由浏览器厂商负责提供,一般由用户操作或者其它浏览器功能来触发 但是有一类特殊的事件,那就是由我们开发人员通过JS触发的事件 这些事件和浏览器创建的事件 ...
随机推荐
- 手把手教学在Springboot中搭建使用Guava cache,包教包会,不会我输一包辣条给你
guava cache使用简介 概述 缓存是日常开发中经常应用到的一种技术手段,合理的利用缓存可以极大的改善应用程序的性能. Guava官方对Cache的描述连接 缓存在各种各样的用例中非常有用.例 ...
- 分别用for、while和do-while循环语句以及递归方法计算n!,并输出算式
一.用for循环实现 实验过程: 实验结果: 二.用while循环实现 实验结果: 三.用do while循环实现 实验结果: 四.用递归算法实现 实验结果: 实验心得: 此次实验中必须熟悉for循环 ...
- laravel安装laravel-ide-helper扩展进行代码提示(二)
一.扩展的地址 https://github.com/barryvdh/laravel-ide-helper 二.安装扩展 1.引入库: composer require barryvdh/larav ...
- 让终端走socks5代理
(2017.9.17更新) 方法1: 在终端中直接运行命令 1 export http_proxy=http://proxyAddress:port 这个办法的好处是简单直接,并且影响面很小(只对当前 ...
- windbg排查大内存
现在都是用windbg preview,安装比较麻烦了,还要配置环境变量, 并且每次分析前要先执行 !analyze - v !eeheap -gc !DumpHeap -min 500 000002 ...
- Java匿名内部类访问外部
匿名内部类访问外部局部变量必须是final修饰的,Java 1.8 会默认为其加上final 例子如下: public void send(String topicName, T obj) { Str ...
- the default terminal(gnome-terminal) start up fail
Platform: Ubuntu 16.04 LTS Reason: variable $LANG on system is empty Solution: localectl set-locale ...
- PCL-CMAKELIST书写格式
cmake_minimum_required(VERSION 2.6 FATAL_ERROR)//cmake最小版本 find_package(PCL 1.3 REQUIRED COMPONENTS ...
- NOIP考点
NOIP考点 基础算法 图 树 数论 数据结构 动态规划 搜索 其他算法 省选知识点汇总 图论 数据结构 字符串相关算法及数据结构 数学 计算几何 搜索 动态规划 其他算法 转自:巨佬的博客 加*号是 ...
- python实现简单动画——生命游戏
生命游戏 生命游戏的宇宙是一个无限的,其中细胞的二维正交网格,每个细胞处于两种可能的状态之一,即*活着*或*死亡*(分别是*人口稠密*和*无人居住*).每个细胞与它的八个邻居相互作用,这八个邻居是水平 ...