前端底层-DOM2

DOM

一、节点树状图

Document>documentElement>body>tagname

二、常用的节点类型

元素节点（标签）

文本节点（文本节点）

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

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

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

 

四、节点的获取

Document.getElementById()   通过id名获取节点

Document.getElementsByClassName()  通过class名获取节点

Document.getElementsByTagName()  直接获取标签

Document.querySelector()

Document.querySelectorAll()

 

1.属性节点的获取

nodeType <--判断节点类型
元素.attributes <--获取元素身上所有属性构成的集合
元素.getAttribute（“class”） <--获取元素身上指定的属性的属性值
元素.setAttribute（“class”.“class”）<--给元素添加一个属性和属性值 可以修改存在的属性
元素.removeAttribute（“class”）<--删除元素中的一个属性

2.获取元素的子节点

元素.childNodes <--获取元素身上的所有子节点 包括文本节点
元素.children <--获取元素身上的所有子节点 不包括文本节点
父元素.firstElementChild <--获取元素里第一个子节点
父元素.lastElementChild <--获取元素里最后一个子节点
元素.parentNode 获取一个元素的父节点 <--可以写多个.parentNode 来获取父级的父级 直到null

3.获取父节点

创建子节点：var span = document.creatElement（“span”） <--创建一个节点赋值给span
元素.appendChild（span） <--在元素里面的最后一个子节点后面添加一个span
父元素.insertBefore（新元素,div.children[0]） <--在父元素的某一个子节点前添加一个新元素
元素.removeChild（元素.children[0]） <--在父元素中删除指定的子节点

元素.innerHTML=“内容”  <-- 给元素添加内容

兼容性

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

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

超链接a的属性href分析

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

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

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

 

 

 

拓展：

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

1）字符串拼接

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

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

2）Dom创建

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

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

 

Dom回流

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

 

提升页面性能优化

1. 多采用雪碧图
2. 阻止超链接的默认行为
3. 减少Dom回流
4. 减少向服务器请求的次数