zoukankan      html  css  js  c++  java
  • 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就会随之增加,所以会陷入死循环

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

  • 相关阅读:
    Erlang 督程 启动和结束子进程
    cocos2d-x 3.0 内存管理机制
    c语言基本数据类型
    4星|《剑桥中国经济史:古代到19世纪》:经济学视角看中国古代史
    孟晚舟三种结局;共享单车大败局;失业潮不会来:4星|《财经》2018年第30期
    2018左其盛差评榜,罕见的差书榜
    2018左其盛好书榜,没见过更好的榜单
    罗振宇时间的朋友2018跨年演讲中最重要的35句话
    中国土地制度与房价走势相关9本书
    2星|水木然《世界在变软》:肤浅的朋友圈鸡汤文
  • 原文地址:https://www.cnblogs.com/lhyxq/p/10325721.html
Copyright © 2011-2022 走看看