Web API(3)

节点操作

删除节点

node.remobeChild(child)

node.removeChild()方法是从DOM中删除一个子节点,返回被删除的节点





    
    
    Document



    
  • 第一个孩子
  • 第二个孩子
  • 第三个节点
  • 第四个孩子

Web API(3)_第1张图片

删除留言板功能

思路如下

  • 给li赋值的时候多加一个链接
  • 获取所有的链接,点击链接让链接所在的父元素消失




    
    
    Document
    



    
    

    

    Web API(3)_第2张图片

    克隆节点

    node.cloneNode():当参数为空或者false的情况下 即为浅拷贝,只复制结构不复制内容,当参数为true的时候,复制结构及内容

    
    
    
    
        
        
        Document
        
    
    
    
        

    Web API(3)_第3张图片

    动态创建表格

    • 因为里面的学生是动态,我们需要JS生成表格,这里我们模拟数据,自己定义好数据,我们采用对象的方法存储y
    • 所有的数据都是放在tbody里面的行里面。
    • 因为行很多 我们需要创建多个行(对应多少人)
    • 每个行里面又有很多单元格(对应里面的数据),我们还得继续使用循环创建多个单元格,并且把数据存入里面
    • 最后一列单元格是删除,需要单独创建单元格
    • 最后添加删除操作,点击删除,删除当前行
    
    
    
    
        
        
        Document
        
    
    
    
        
    姓名 学科 成绩 操作

    Web API(3)_第4张图片

    创建动态元素三种方式

    • document.write()
    • element.innerHTML
    • document.creatElement()

    区别

    • document.write是将页面直接写入内容,但是文档流执行完毕后,会导致页面内容全部重绘
    • innerHTML是将内容写入DOM节点,不会导致页面的重绘
    • innerHTML创建多个元素效率更高(不要拼接字符串,采用数组方式拼接),结构稍微复杂
    • creatElement()创建多个元素效率稍低一点点,但是结构更清晰

    总结 :不同浏览器下,innerHTML效率要比creatElement高

    document.write()

    
    
    
        
        
        Document
    
    
        
    
    
    
    

    Web API(3)_第5张图片

    innerHTML()

    
    
    
    
        
        
        Document
    
    
    
        

    你可能感兴趣的:(web-api)