DOM节点操作知识点简要总结

1、什么是DOM？

   Document Object Model （文档对象模型）DOM是针对文档的一个API接口

   Dom描绘了一个层次化的节点树，允许开发人员添加，移除和修改页面的某一部分

2、DOM树   

① 标签属于节点的一种

② 节点包含了标签，注释，文本，doctype等在内的多种组合

③  在文档中出现的空格，回车，也属于节点

④ nodeType属性，用于表明节点的类型

   标签节点：1→可以用nodeName查看标签名

   文本节点：3→回车是文本节点

   注释节点：8

   文档碎片节点：11

用 tabCon.childNodes查看子节点 【详解】 h2前后一个回车算2个节点 ，nodeType返回3 是文本节点 h2标签属于一个节点

节点关系    

   ① childNodes：所有子节点

   ② children：所有是标签类型的子节点（tab切换应用）

      eg：   var tabCon = document.getElementById('tabCon').getElementsByTagName('div');  

     【改为】  var tabCon = document.getElementById('tabCon').children('div');

   ③ nextSibling：下一个兄弟节点

   ④ previousSibling：上一个兄弟节点

   ⑤ parentNode：父节点

   ⑥ firstChild：第一个子节点

节点操作

   ① 创建文本节点   var newText = document.createTextNode('nihao');

   ② 创建标签节点   var newEle = document.createElement('p');

   ③ appendChild(node); 向childsNodes末尾插入一个节点node

   ④ insertBefore（node，targetNode）;向targetNode之前插入节点node

   ⑤ replaceChild（newNode，oldNode）;   newNode替换节点 oldNode

   ⑥ removeChild（node）; 移除父节点的某个子节点

// 创建文本节点     var newText = document.createTextNode('nihao');   // 创建标签节点     var newEle = document.createElement('p');     newEle.appendChild(newText);     tabCon.appendChild(newEle);

var newText = document.createTextNode('nihao');   //  创建标签节点     var newEle = document.createElement('p');     newEle.appendChild(newText);   // tabCon.appendChild(newEle);   // 父节点.insertBefore（要插入的节点，要把新节点插入到谁的前面）；     body.insertBefore(newEle,tabCon);

body.replaceChild(newEle,tabCon); 如果tabCon不是body的直接子节点，则replaceChild无效，应该用tabCon父级div的ID名对象方法来用

【HTML结构】  tabCon.removeChild(H2); 【运行结果】

查找方法

cloneNode（boolean）；复制一个节点

  true：深复制，复制节点以及整个子节点

  false：浅复制，只复制节点本身

注意： cloneNode（）方法不会复制添加到DOM节点中的JavaScript属性；例如事件处理程序等

节点属性操作

 ①  getAttribute（name）;         获取节点上name属性的值

 ②   setAttribute（name，value） ;   设置节点上name属性的值为value

 ③ removeAttribute（name） ;       删除节点上的name属性

图片预加载

图片预加载 目的是什么?  —— 提升加载速度，用户体验

图片预加载主要针对非ICON文件

通常情况下，使用logo展示给浏览者，之后，当浏览器将图片下载到本地之后，利用src和伪src，进行属性值替换。

【HTML效果】      <div class="con" id="tabCon">           <img src="1.png"  dsrc="2.png" alt="" title="">      </div> 【JS 代码】 window.onload = function(){   var imgSrc = document.getElementById('tabCon').getElementsByTagName('img');   for (var i = 0; i < imgSrc.length; i++) {       var newSrc = imgSrc[i].getAttribute('dsrc');       imgSrc[i].setAttribute('src',newSrc);       console.log(newSrc);   }; }