代码改变世界

DOM 文档对象模型

2012-03-11 14:45  臭小子1983  阅读(273)  评论(0)  编辑  收藏  举报

一、概念

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>

  　

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

　　outerText：从起始位置到终止位置的内容, 但它去除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没有将一个新元素插入到指定元素之后，需要自定义.

 1 function insertAfter(newChild,target){
 2 
 3     var oParent=target.parentNode;
 4 
 5     if(oParent.lastChild==target){
 6         oParent.appendChild(newChild);
 7     }
 8     else{
 9         oParent.insertBefore(newChild, nextSibling(target));            
10     }      
11 }

 

二十一、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()方法：替换节点.

 1 <div id="box">
 2     <ul id="list">
 3         <li><span>1</span></li>
 4         <li><span>2</span></li>
 5         <li><span>3</span></li>
 6         <li><span>4</span></li>
 7         <li><span>5</span></li>
 8         <li><span>6</span></li>
 9         <li><span>7</span></li>
10     </ul>
11     <div id="ouput"></div>
12 </div>
13 
14 <script>
15     // 替换
16     var oElement = document.createElement("div");
17     var oText = document.createTextNode("aaaaaaaa");
18     oElement.className = "active";
19     oElement.id = "newBox";
20     oElement.appendChild(oText);
21 
22     var oList = document.getElementById("list");
23     var oBox  = document.getElementById("box");
24 
25     replace(oBox, oElement, oList);
26 
27     function replace(pNode, nNode, rNode){
28         pNode.replaceChild(nNode, rNode);
29     }
30 </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。

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

 

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

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

 

二十九、cloneNode：复制节点。

1 var para = document.createElement("p");
2 
3 var message = document.createTextNode("hello world");
4 
5 para.appendChild(message);
6 
7 var newpara = para.cloneNode(true);
8 
9 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：检查一个给定元素是否有子节点。

 1 <div id="box2"></div>
 2 <div id="box3">7891011</div>
 3 
 4 
 5 <script type="text/javascript">
 6     var box = document.getElementById("box");
 7     var box2 = document.getElementById("box2");
 8     if(box2.hasChildNodes()){
 9         alert("box2下有子元素");
10     }
11     else{
12         alert("box2下没有子元素");
13     }
14 </script>