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触发的事件 这些事件和浏览器创建的事件 ...
随机推荐
- 查找linux下进程占用CPU过高的原因,以php-fpm为例
很多时候,线上服务器的进程在某时间段内长时间占用CPU过高,为了优化,我们需要找出原因. 1.找出占用CPU最高的10个进程 ps aux | sort -k3nr | head -n 10 或查看占 ...
- window下mongodb的安装和环境搭建
一.下载安装包或者压缩包 1.下载 mongodb官网社区版下载页面 开发者一般使用社区版即可 3.6.3版本仅支持64位版本 2.安装 mongo compass是一个图形界面管理工具,安装过程非常 ...
- jquery.validate 远程验证remote使用详解
目的: 试了一下远程验证,试了好几次,得出小结,可以记录下,提醒以防绕路. ----------------直接贴图,省事明了---------------- 1.引用js 2.demo的html & ...
- 记一次Struts2 内核问题分析解决
问题场景描述 生产环境某个处理耗时比较长的接口,吞吐能力极差.客服反馈此功能长期处于毫无响应状态. 具体表现 系统启动后第一次调用耗时极慢,长时间不响应.紧随之后发起的请求也同时没有响应. 等待第一次 ...
- 团队项目Alpha冲刺阶段之学习总结
线性布局 线性布局是程序中最常见的种布局方式,可以分为水平线性布局和重直线性布局两种,通过Android:orientation属性可以设置线性布局的方向.线性布局的特点是各个子元法彼此连接,中间不留 ...
- c语言相关概念
2019-04-06 a文件 库是预编译的目标文件(object files)的集合,它们可被链接进程序.静态库以后缀为‘.a’的特殊的存档文件(archive file)存储. a文件转so文件:h ...
- HTTP之响应消息Response
一般情况下,服务器接收并处理客户端发过来的请求后会返回一个HTTP的响应消息. HTTP响应也由四个部分组成,分别是:状态行.消息报头.空行和响应正文. 例子 HTTP/1.1 200 OK Date ...
- mercury水星路由wifi连接不上的坑
如题,房东发给我的水星路由,是有些bug的,比方说我的手机会偶尔某天连上了没有网络,但是其他wifi设备和有线就没问题. 这种wifi网络很差甚至没有网络的问题会随机在你的wifi设备上发生,你甚至连 ...
- ActivityThread 源码分析
ActivityThread是Android Framework中一个非常重要的类,它代表一个应用进程的主线程(对于应用进程来说,ActivityThread的main函数确实是由该进程的主线程执行) ...
- sourceInsight4 完美破解
sourceInsight4 完美破解 参考路径: https://blog.csdn.net/zxy020/article/details/75047670 首先确保你在官网下载了原版4.0并安装好 ...