Dom 获取、Dom动态创建节点

一、Dom获取

  1、全称:Document     Object     Model  文档对象模型

  2、我们常用的节点类型

    元素(标签)节点、文本节点、属性节点(也就是标签里的属性)、

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

    1:代表元素节点

    2:代表属性节点

    3:代表文本节点

  4、节点的获取

    元素节点的获取方法

      Document.getElementById()

      Document.getElementsByClassName()

      Document.getElementsByTagName()

      Document.querySelector()

      Document.querySelectorAll()

    属性节点的获取方法

      元素 . getAttribute("属性名")    获取属性值的方法

      元素 . attribuites           获取元素身上所有属性构成的集合(数组)

      元素 . attribute [ 索引 ] . value     获取元素里面的值

       元素 . setAttribute("属性名","属性值")  给元素设置属性和属性值

       元素 . remove("属性")        删除元素

    文本节点没有获取的方法,没有意义

  5、获取元素的子节点

    元素 . childNodes  这个属性有兼容性,标准浏览器回获取文本节点,而低版本的浏览器不会,所以建议children属性

    获取单个子节点:具有兼容问题

      获取第一个子节点:

        标准下:元素 . firstElementchild

        非标准下:元素 . firstchild

      获取最后一个子节点:

        标准下:元素 .lastElementchild

        非标准下:元素 . lastchild

      获取上一个兄弟节点:

        标准下:元素 . previousElementsibling

        非标准下:元素 . previoussibling

      获取上一个兄弟节点:

        标准下:元素 . nextElementchild

        非标准下:元素 . nextchild

      解决兼容性问题:

        拿获取第一个子节点为列:

          var    list=document . getElementById("list")

          var   ss=list . firstElementchild ||  list . firstchild

  6、获取父节点

      元素 . parentNode     没有兼容性

二、Dom 动态创建节点

  1、生成节点的方法:

    document . createElement("div")

  2、插入节点的方法:

    父节点 . appendChild("新节点")

  3、在指定的位置插入节点

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

  4、删除节点

    父节点 . removechild()   

 三、拓展

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

  字符串:

    优点:简单,可以处理数据,层次感比较强

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

  Dom创建:

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

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

  Dom回流:

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

  提升页面性能优化:

    1、多采用雪碧图

    2、阻止超链接的默认行为

    3、减少DOM回流

    4、减少向服务器请求次数

上一篇:JavaScript DOM动态创建(声明)Object元素


下一篇:js入门之DOM动态创建数据