操作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. 查找linux下进程占用CPU过高的原因,以php-fpm为例

    很多时候,线上服务器的进程在某时间段内长时间占用CPU过高,为了优化,我们需要找出原因. 1.找出占用CPU最高的10个进程 ps aux | sort -k3nr | head -n 10 或查看占 ...

  2. window下mongodb的安装和环境搭建

    一.下载安装包或者压缩包 1.下载 mongodb官网社区版下载页面 开发者一般使用社区版即可 3.6.3版本仅支持64位版本 2.安装 mongo compass是一个图形界面管理工具,安装过程非常 ...

  3. jquery.validate 远程验证remote使用详解

    目的: 试了一下远程验证,试了好几次,得出小结,可以记录下,提醒以防绕路. ----------------直接贴图,省事明了---------------- 1.引用js 2.demo的html & ...

  4. 记一次Struts2 内核问题分析解决

    问题场景描述 生产环境某个处理耗时比较长的接口,吞吐能力极差.客服反馈此功能长期处于毫无响应状态. 具体表现 系统启动后第一次调用耗时极慢,长时间不响应.紧随之后发起的请求也同时没有响应. 等待第一次 ...

  5. 团队项目Alpha冲刺阶段之学习总结

    线性布局 线性布局是程序中最常见的种布局方式,可以分为水平线性布局和重直线性布局两种,通过Android:orientation属性可以设置线性布局的方向.线性布局的特点是各个子元法彼此连接,中间不留 ...

  6. c语言相关概念

    2019-04-06 a文件 库是预编译的目标文件(object files)的集合,它们可被链接进程序.静态库以后缀为‘.a’的特殊的存档文件(archive file)存储. a文件转so文件:h ...

  7. HTTP之响应消息Response

    一般情况下,服务器接收并处理客户端发过来的请求后会返回一个HTTP的响应消息. HTTP响应也由四个部分组成,分别是:状态行.消息报头.空行和响应正文. 例子 HTTP/1.1 200 OK Date ...

  8. mercury水星路由wifi连接不上的坑

    如题,房东发给我的水星路由,是有些bug的,比方说我的手机会偶尔某天连上了没有网络,但是其他wifi设备和有线就没问题. 这种wifi网络很差甚至没有网络的问题会随机在你的wifi设备上发生,你甚至连 ...

  9. ActivityThread 源码分析

    ActivityThread是Android Framework中一个非常重要的类,它代表一个应用进程的主线程(对于应用进程来说,ActivityThread的main函数确实是由该进程的主线程执行) ...

  10. sourceInsight4 完美破解

    sourceInsight4 完美破解 参考路径: https://blog.csdn.net/zxy020/article/details/75047670 首先确保你在官网下载了原版4.0并安装好 ...