节点

1.DOM   document object  model

　　节点树状图

　　document>documentElement>body>Tagname

2.常用的节点类型

　　元素节点（标签）

　　文本节点（文本）

　　属性节点（标签里的属性）

       

3.document有个属性叫node type返回的数字

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

4.节点的获取

　　元素节点获取有很多方法

　　　　Document.getElementById()

　　　　Document.getElementsByClassName()

　　　　Document.getElementsByTagName()

　　　　Document.querySelector()

　　　　Document.querySelectorAll()

  属性节点的获取:

   元素.attributes 获取元素身上所有属性构成的集合（数组）

   得到里面的值 元素.attributes[1].value

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

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

         文本节点

        没有获取的方法，没有意思

5.获取元素的子节点

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

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

   标准下 元素.firstElementChild

   非标准下 元素.firstChild

   兼容下写法

         var list=document.getElementById("list")

         var fist=list.firstElementChild||list.firstChild

           console.log(fist)

     获取最后一个子节点

     元素.lastElementChild     元素.lastchild

     获取上一个节点

    元素.previousSibling

    元素.previousElementSibling

     获取下一个节点

  元素.nextSibling

  元素.nextElementSibling

6.获取父节点

元素.parentNode  没有兼容性

--------------------------------------------------------------------------------------

DOM2动态的创建节点

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

2.插入节点的方法　　　父元素.appendChild（新节点）

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

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

　　父元素.insertBefore（新节点，谁的前面）将新节点插入指定的元素前面

4.删除元素节点　　　父元素.removeChild（）

超链接a的属性href分析

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

　　<a href="#s">　　　　　　　　　锚点跳转 跳转到某一个id叫s的位置上

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

拓展：

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

　　字符串拼接

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

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

　　Dom创建

　　　　优点：是一个独立的个体

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

　　Dom回流

　　页面渲染时，我们会对html结构简单是增删查改时，浏览器会对所有的Dom进行重新排列，

这就是Dom回流，严重影响浏览器的性能。