JS章节③ (上) DOM应用

1.DOM基础

• 什么是DOM :
  document ,节点! 其实说的都是一个东西, CSS时管叫标签, JS时管叫元素,DOM时,管叫节点;
• 浏览器支持情况
  IE:10% Chrome:60% FF:99% 支持
• DOM节点
  childNodes:子节点
nodeType:节点的类型
• nodeType == 3 -> 文本节点
• nodeType == 1 -> 元素节点

childNodes 和 nodeType配合使用

    
    
    




    

    

    

    

    


abcdefg //文本节点
abcdefg //元素节点

• 获取子节点
  children:他只包括元素,不包含文本,兼容所有浏览器
  故上面的例子可以这样写,简单粗暴!!!

for (var i=0;i

parentNode:父节点
例子：点击链接，隐藏整个li
parentNode示例:

    
    
    



    
11111隐藏
    
22222隐藏
    
33333隐藏
    
44444隐藏

parentNode应用

• offsetParent
  例子：获取元素在页面上的实际位置
  主要用作定位时,获取元素的实际父节点.

示例一:给第二个div2设置绝对定位,给div2的父节点div1什么也不设置,那么div2的offsetParent为body.

示例二:给第二个div2设置绝对定位,给div2的父节点div1设置相对定位,那么div2的offsetParent为div1.

2.DOM节点(2)

• 首尾子节点
• 有兼容性问题
• firstChild、firstElementChild
• lastChild 、lastElementChild

    //IE6-8
    //oUl.firstChild.style.background='red';
    //高级浏览器
    //oUl.firstElementChild.style.background='red';

使用示例

    
1
    
2
    
3

• 兄弟节点 (使用同上)
• 有兼容性问题
• nextSibling、nextElementSibling
• previousSibling、previousElementSibling

3.操纵元素属性

• 元素属性操作
  第一种：oDiv.style.display='block';
  第二种：oDiv.style['display']='block';
  第三种：Dom方式: oDiv2.setAttribute('display','none');

• DOM方式操作元素属性
  获取：getAttribute(名称)
  设置：setAttribute(名称, 值)
  删除：removeAttribute(名称)

4.用className选择元素

• 如何用className选择元素
• 选出所有元素
• 通过className条件筛选
  初级用法

• 封装成函数
  高级用法

5.创建、插入和删除元素

• 创建DOM元素
  createElement(标签名) 创建一个节点 appendChild(节点) 追加一个节点

注意:appendChild(节点) 有两个作用:

(一)如果这个元素是通过createElement(标签名)创建出来的,那么它可以直接添加到新的父级;
(二).如果这个元素有父级, 那么1.先把元素从原有父级上删除;2.再添加到新的父级.

例子：为ul插入li

创建DOM元素,并添加

• 插入元素
  insertBefore(节点, 原有节点) 在已有元素前插入 例子：倒序插入li

插入DOM:一直插入到第一个位置

• 删除DOM元素
  removeChild(节点) 删除一个节点 例子：删除li

    
    
    



    
asfasd 删除
    
5645 删除
    
ghdfjgj 删除
    
mvbnmvnb 删除

删除DOM元素

6.文档碎片

使用文档碎片在某些情况下可以提高页面效率。
javascript操作dom是一个很耗性能的过程，在某些情况下，不得不进行dom循环操作，我们每次对dom的操作都会触发"重排"，这严重影响到能耗，一般通常采取的做法是尽可能的减少dom操作来减少"重排"。
面对循环操作dom的过程，我们选择使用文档碎片（creatDocumentFragment），将需要添加到dom中的内容一次性添加到文档碎片中，然后将文档碎片添加到dom树，这样就可以有效的减少操作dom的次数。

• 文档碎片可以提高DOM操作性能(理论上)
• 文档碎片原理
• document.createDocumentFragment()