DOM 文档对象模型

一、概念

1、什么是DOM：

文档对象模型（Document Object Model，DOM）是一种用于HTML和XML文档的编程接口，脚本开发人员可以通过文档对象的属性、方法和事件来掌控、操纵和创建动态的网页元素.

2、什么是BOM：

window对象对应着浏览器窗口本身，这个对象的属性和方法通常被统称为BOM（浏览器对象模型）

3、节点：

元素节点：如div、p、li等

文本节点：节点内只包含文档如：<p>澳际：世界名校新排名</p>

属性节点：节点中带有属性如：<a title="哈哈">哈哈哈</a>

4、进行必要的检查：

if(document.getElementById){

// 浏览器是否支持些方法

}

5、JS对象分为三种类型

　　1、用户定义对象：由程序员创建对象

　　2、内建对象：内建JS语 言里的对象，如Array、Math和Date

　　3、宿主对象：由浏览器提供的对象

6、"javascript:"伪协议

　　<a href="javascript:popUP('http://www.aa.com');"> Example </a>

7、性能考虑：

　　1、尽量减少DOM的操作减少标记

　　2、合并放置脚本，减少HTTP的请求数

　　3、压缩脚本

二、DHTML

　　DHTML(动态HTML)，是HTML、CSS和JavaScript这三种技术相结合中的产物.

三、 getElementById("value")：取对应id所在的位置.

<div id="test"></div>

var nodeId = document.getElementById("test");
nodeId.innerHTML = "哈哈哈";

四、getElementsByTagName('li')： 取文档节点所有li标签，返回一个数组.

通配符 * 号，返回所有元素document.getElementByTagNmae("*").length;

<div id="faq_left">
<li><a target="_blank" href="help/help-1-11.html">“网页更新提醒”功能全揭秘</a></li>
<li><a target="_blank" href="help/help-8-5.html#a4">在工具箱中如何对应用进行管理</a></li>
<li><a target="_blank" href="help/help-1-10.html">皮肤盒子快速入门</a></li>
<li><a target="_blank" href="http://ie.sogou.com/bbs/viewthread.php?tid=159010&extra=page%3D1">搜狗高速浏览器论坛精品贴展示</a></li>
</div>

<script type="text/javascript">
var tag = document.getElementsByTagName("li");
var len = tag.length;
for(var i=0;i<len; i++){
tag[i].innerHTML = "哈哈哈";
}
</script>

五、getElementsByName('name')：取对应name属性值所在的位置 返回一个数组，

如果取redio下的所有，但IE下不能使用

<div id="faq_left">
<input type="radio" name="myradio" /> 第一
<input type="radio" name="myradio" /> 第二
<input type="radio" name="myradio" /> 第三
<input type="radio" name="myradio" /> 第四
</div>
<div id="test"></div>

<script type="text/javascript">
var test = document.getElementById("test");
var typeId = document.getElementById("faq_left");
var typeName = typeId.getElementsByName("myradio");
var len = typeName.length;

for(var i=0; i<len; i++){
if(typeName[i].checked){
test.innerHTML = typeName[i].htmlText;
}
}
</script>

六、getElementsByClassName()：获取节点的class的Name名称，返回一个数组集合

<div id="MATjiaju_index_new_114">
<li class="ta"><a target="_blank" href="http://home.focus.cn/focuszt/sohuehomezt0401/"> E家装龙年巨惠闪亮登场</a></li>
<li class="ta"><a target="_blank" href="http://homemsg.focus.cn/msgview/2000989/232286700.html">今朝装修季 引爆五月天 </a></li>
<li class="tasss"><a target="_blank" href="http://home.focus.cn/news/2012-05-15/272289.html">圣象电商旗舰店特惠大行动 </a></li>
<li class="ta"><a target="_blank" href="http://homemsg.focus.cn/msgview/2000989/232013586.html">爱依瑞斯•耀舞17年千点巅峰惠 </a></li>
<li class="ta"><a target="_blank" href="http://home.focus.cn/news/2012-05-17/272990.html">格莱美墙纸格调艺术馆“网聚盛惠”</a></li>
</div>

<script type="text/javascript">
var typeId = document.getElementById("MATjiaju_index_new_114");

// 自已创建一个getElementsByClassName  兼容IE和标准
// par1 样式名称
// par2 所要寻找ID下的所有标签
function getElementsByClassName(className, parID){
var getClassName;
var clasNameArr = new Array();
if(document.getElementsByClassName){
return parID.getElementsByClassName(className);     // 标准浏览器有此方法所以支持
}
else{
var childs = parID.getElementsByTagName("*");
for(var i=0; i<childs.length; i++){
if(childs[i].className == className){
clasNameArr.push(childs[i]);
}
}
return clasNameArr;
}
}
var len = getElementsByClassName("ta", typeId);
</script>

七、getAttribute("herf")：取出属性的值.

var currentID = document.getElementById("hbTable3").getElementsByTagName("a");

for(var i=0;i<currentID.length;i++){
str = currentID[i].getAttribute("href");
alert(str);
}

八、setAttribute("herf","http://www.qq.com")：改变节点属性的值.

<div id="nav">
<ul>
<li class="sa">开发指南</li>
<li class="sa">参考手册</li>
<li class="sa">静态地图API</li>
<li class="sa">常见问题</li>
</ul>
</div>

<script type="text/javascript">
var nodeClass = document.getElementsByTagName("li");
var len = nodeClass.length;

for(var i=0; i<len; i++){
nodeClass[i].setAttribute("class","lists");
}
</script>

八、removeAttribute()：删除节点属性值

九、childNodes属性：把节点树的任何一个元素的子元素都检索出来. IE支持、FF不支持，所以使用children属性

<div id="topadsblk01">
<ul id="topadsblk01menu">
<li class="on" id="topadsblk01menu_t1">热销</li>
<li id="topadsblk01menu_t2">打折</li>
<li id="topadsblk01menu_t3">旅游</li>
<li id="topadsblk01menu_t4">新盘</li>
</ul>
</div>

var lin = document.getElementById("topadsblk01menu").childNodes;

for(var i=0; i<lin.length; i++){
lin[i].onmouseover = function() {
this.className = "sli";
}

lin[i].onmouseout = function(){
this.className = "";
}
}

　　children属性：来获取元素集合

十、nodeType属性：返回节点的类型，1为元素节点 2属性节点 3文本节点

<div id="topadsblk01">
<ul id="topadsblk01menu">
<li class="on" id="topadsblk01menu_t1">热销</li>
<li id="topadsblk01menu_t2">打折</li>
<li id="topadsblk01menu_t3">旅游</li>
<li id="topadsblk01menu_t4">新盘</li>
</ul>
</div>
<div id="test"></div>

<script type="text/javascript">
var nodeID = document.getElementById("topadsblk01menu").childNodes;     // 返回指定id下的所有儿子目录
alert(nodeID.length);
for(var i=0; i<nodeID.length; i++){
$("#test").append("<p>" + nodeID[i].nodeType + "</p>");
}
</script>

十一、nodeValue属性：

返回值 ：

元素节点：返回1 属性节点：返回2 文本节点：返回3

十二、nodeName：返回节点的名称.

　　注释：nodeName 所包含的 XML 元素的标签名称永远是大写的

　　var node = document.getElementById("topadsblk01menu");

　　alert(node.nodeName); 输出当前节点的名称：ul、li、div.

十三、tagName：当前节点的名称

　　与nodeName基本上同，如果你只支持的话，nodeName是一个更好的选择，但如果是你同样需要支持IE 5.5的话，那tagName却是更好的选择

十四、firstChild属性：返回指定节点的第一个子节点 和 lastChild属性：返回指定节点的最后一个子节点

<div id="topadsblk01">
<ul id="topadsblk01menu">
<li class="on" id="topadsblk01menu_t1">热销</li>
<li id="topadsblk01menu_t2">打折</li>
<li id="topadsblk01menu_t3">旅游</li>
<li id="topadsblk01menu_t4">新盘</li>
</ul>
</div>

<script type="text/javascript">
$(function () {
var parent = document.getElementsByTagName("li");
var child = parent[0].lastChild;
alert(child.nodeValue);
})
</script>

十五、document.write()：将字符串插到文档里.

document.writeln()：插入到文档内并跟一个换行.

十六、innerHTML：将一段HTML代码插到指定的位置.

<p class="c_tx2">为您推荐最热最潮的QQ头像、皮肤、壁纸、炫铃，帮您打造个性QQ，装扮精彩Q生活！</p>
<div id="con"></div>

<script type="text/javascript">
var content = document.getElementsByClassName("c_tx2")[0].innerHTML;        // 获取p节点下的内容
document.getElementById("con").innerHTML = content;         // 将id为con的节点内加入内容
alert(content);
</script>

　　 outerHTML：除了包含innerHTML的全部内容外, 还包含对象标签本身

<p class="c_tx2">为您推荐最热最潮<span style="color:#00ffff">的QQ头像、皮肤、壁纸、炫铃，</span>帮您打造个性QQ，装扮精彩Q生活！</p>
<div id="test"></div>

<script type="text/javascript">
var content = document.getElementsByClassName("c_tx2")[0].innerHTML;        // 获取p节点下的内容
document.getElementById("test").outerHTML = content;        // 输出后将获取的内容替换<div=id="text"></div>
// 返回'为您推荐最热最潮<span style="color:#00ffff">的QQ头像、皮肤、壁纸、炫铃，</span>帮您打造个性QQ，装扮精彩Q生活！'
</script>

　

[b]　　innerText：[/b]从起始位置到终止位置内的内容, 但它去除Html标签，只适用于IE浏览器

[b]　　outerText：[/b]从起始位置到终止位置的内容, 但它去除Html标签，只适用于IE浏览器

　　outerHTML与innerHTML的区别，outerHTML是包括指定元素本身，innerHTML是获取指定元素内的HTML

十七、createElement()方法：创建一个新的元素节点.

<script type="text/javascript">
var newDiv = document.createElement("div");
newDiv.id = "aa";

var nodes = document.getElementsByTagName("body")[0];
nodes.appendChild(newDiv);
</script>

十八、appendChild()方法：把新建的节点插入文档的节点树中.

插入的指定节点.appendChild(“新创的节点”)。

十九、createTextNode()方法：给新节点加和内容.

<script type="text/javascript">
var newDiv = document.createElement("div");
newDiv.id = "aa";

var newContent = document.createTextNode("为最美女教师祈福");
newDiv.appendChild(newContent);

var nodes = document.getElementsByTagName("body")[0];
nodes.appendChild(newDiv);
</script>

二十、insertBefore (要插入的节点，现有的节点)方法：将一个新元素插到一个现有元素的前面.

<script type="text/javascript">
var newContent = document.createElement("div");
newContent.id = "log";
newContent.width = "200px;";
newContent.height = "100px";
newContent.backgroundColor = "#000";

var current = document.getElementById("mydoc");
var parentNodes = document.getElementsByTagName("body")[0];
parentNodes.insertBefore(newContent,current);
// 指定哪个目标节点下    要插入的节点， 现有节点
</script>

　　insertAfter()：DOM没有将一个新元素插入到指定元素之后，需要自定义.

function insertAfter(newChild,target){

var oParent=target.parentNode;

if(oParent.lastChild==target){
oParent.appendChild(newChild);
}
else{
oParent.insertBefore(newChild, nextSibling(target));
}
}

二十一、parentNode属性：获取元素的父节点.

document.getElementById("pi").parentNode.className = "tB03";

二十二、removeChild()方法：删除节点.

<a href="">电子杂志</a>
<a href="">电子杂志</a>
<a href="">电子杂志</a>
<a href="">电子杂志</a>
<input type="button" id="del" value="删除" />

<script type="text/javascript">
$("#del").click(function(){
var getNodes = document.getElementsByTagName("a");
var parNode = document.getElementsByTagName("body")[0];
parNode.removeChild(getNodes[0]);
})
</script>

二十三、replaceChild()方法：替换节点.

<div id="box">
<ul id="list">
<li><span>1</span></li>
<li><span>2</span></li>
<li><span>3</span></li>
<li><span>4</span></li>
<li><span>5</span></li>
<li><span>6</span></li>
<li><span>7</span></li>
</ul>
<div id="ouput"></div>
</div>

<script>
// 替换
var oElement = document.createElement("div");
var oText = document.createTextNode("aaaaaaaa");
oElement.className = "active";
oElement.id = "newBox";
oElement.appendChild(oText);

var oList = document.getElementById("list");
var oBox  = document.getElementById("box");

replace(oBox, oElement, oList);

function replace(pNode, nNode, rNode){
pNode.replaceChild(nNode, rNode);
}
</script>

二十四、className属性：调用样式.

<ul>
<li>南海各方行为宣言</li>
<li>南海各方行为宣言</li>
<li>南海各方行为宣言</li>
<li>南海各方行为宣言</li>
</ul>

<script type="text/javascript">
var nodes = document.getElementsByTagName("li");
var leng = nodes.length;

for(var i=0; i<leng; i++){
nodes[i].className= "l";
}
</script>

二十五、setTimeout(执行函数，时间)函数：经过一段时间内执行函数只执行一次

　　 setInterval("fun()", 1000); 每秒不断重复执行

二十六、clearTimeout()：

二十七、parseInt()函数：把字符串里的数值信息提取出来.

如：top的值为100px; parseInt(top)：值就为100，因为只值字符串的数值.

二十八、nextSibling：当前节点的下一个节点（其后的节点与当前节点同属一个级别）；如果其后没有与其同级的节点，则返回null。

function nextSibling(pNode){
return pNode.nextSibling || pNode.nextElementSibling;　　　　　　// 解决兼容问题
}

previousSibling: 访问DOM树上与当前节点同级别的上一个节点。

function previousSibling(pNode){
return pNode.previousSibling || pNode.previousElementSibling;　　　　　　// 解决兼容问题
}

二十九、cloneNode：复制节点。

var para = document.createElement("p");

var message = document.createTextNode("hello world");

para.appendChild(message);

var newpara = para.cloneNode(true);

document.body.appendChild(newpara);

三十、removeChild()删除节点

var curNode = document.getElementById("art");
var parent = curNode.parentNode;
parent.removeChild(curNode);

三十一、removeNode()删除节点

xxx.removeChild(obj) xxx是所删除节点的父节点
xxx.removeNode(true) xxx是所要删除的节点，火狐不支持

<div id="ss">
　　<ul>
<li>aaaa</li>
<li>bbbb</li>
<li>cccc</li>
<li>dddd</li>
</ul>
</div>

<script type="text/javascript">
var id = document.getElementById("ss");
var node = id.getElementsByTagName("li");

for(var i=0; i<node.length; i++){
node[i].onclick = function(){
alert(this.nodeName);
this.parentNode.removeChild(this);
}
}
</script>

三十二、hasChildNodes：检查一个给定元素是否有子节点。

<div id="box2"></div>
<div id="box3">7891011</div>

<script type="text/javascript">
var box = document.getElementById("box");
var box2 = document.getElementById("box2");
if(box2.hasChildNodes()){
alert("box2下有子元素");
}
else{
alert("box2下没有子元素");
}
</script>