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); }; } |