zoukankan      html  css  js  c++  java
  • js···DOM2动态创建节点

    1.生成节点的方法  document.createElement(“div”)

    2.插入节点的方法   父元素.appendChild(新节点)

    在父节点中的子节点后面插入新的节点

    3.在指定的位置插入新的节点

    (1) 父元素.insertBefore(新节点,谁的前面)  将新节点插入指定的元素前面

    4,删除元素节点  父元素.removeChild()

     

    案例分析

    仿留言板

     

    兼容性 

    元素没有子节点,ie低版本会读取不到,而标准浏览器会。

    因为标准浏览器会把文本节点当作子节点,而ie6-8不会。

    超链接a的属性href分析

    <a href=””> 点击会刷新页面,相当于向后台发送一次请求。

    <a href=”#s”> 锚点跳转 跳转到某一个ids的位置上

    <a href=”javascript:;”> 取消刷新页面的功能

     

    拓展

    字符串拼接和Dom创建都是渲染的方式

    字符串拼接

    优点 简单,层次感强,可以处理大量数据

    缺点:字符串拼接会影响到原有子元素的事件

     

    Dom创建

    优点:是一个独立的个体,不会影响到原有的元素

    缺点:处理数据量过大会比较麻烦,会造成DOM回流。

    Dom回流

    页面渲染时,我们对html结构简单的增删查改时,浏览器会对所有的dom进行重新排列,这就是Dom回流,严重影响浏览器的性能。

     

    补充

    提升页面性能优化

    1. 多采用雪碧图
    2. 阻止超链接的默认行为
    3. 减少Dom回流
    4. 减少向服务器请求的次数
  • 相关阅读:
    【LeetCode-树】找树左下角的值
    【LeetCode-贪心】合并区间
    MongoDB3.6版本新增特性
    MongoDB initial sync过程
    MongoDB3.4版本新增特性
    保险配置原则
    MongoDB批量操作时字段为null时没有入库
    Kafka消费者没有收到通知的分析
    Git分支的管理
    NoSQLBooster如何MongoDB的部分文档从一个集合拷贝到另外一个集合中
  • 原文地址:https://www.cnblogs.com/lxlym/p/10054708.html
Copyright © 2011-2022 走看看