• 节点


    Dom document object model

    1  节点树状图

    document》documentElemt》body》tagname

    2  常用的节点类型

    元素节点(标签)

    文本节点

    属性节点(标签里的属性)、

    3  document有个属性叫nodeType 返回的是数字

    1   代表元素的节点         2  代表属性的节点          3    代表文本的节点

    4  节点的获取

      document getElementById

      document getElementByClassName

      document getElementByTagName

      document querySelector

      document querySelectorAll

    5   元素节点的获取

      元素 attribute   获取元素身上所有属性构成的集合 得到里面的值

      元素 getAttribute(“属性名”) 获取属性值得方法

      元素 setAtteibute(“属性名”“ 属性值”)

      元素 removeAttribute(“属性”)删除属性

    6获取元素的子节点

      元素childNode   这个属性有兼容性标准浏览器会获取到文本节点

    而低版本浏览器不会,所以建议使用children这个属性

    firstChild        获取单个子节点                   
    lastChild        获取最后一个子节点             
    previousSibling        获取上一个兄弟节点   
    nextSibling       获取下一个兄弟节点         
    appendChild       添加节点
    createElement       创建节点元素  

    parentNode       获取父节点

    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.         减少向服务器请求的次数

  • 相关阅读:
    HutchTab
    configbody tcl tk
    initial class tcl tk
    ::dcss
    StatusBar
    read url c#
    new tab addin
    extraDevice
    Android平台开发WIFI function portingWIFI功能移植
    如何设置Android系统中的BT2.1 device到SSP的DEBUG模式
  • 原文地址:https://www.cnblogs.com/yang08/p/10044290.html
Copyright © 2020-2023  润新知