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>
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>
浙公网安备 33010602011771号