javascript学习笔记—DOM常用API、属性、方法、函数
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"><HTML> <HEAD> <TITLE>DOM常用属性和方法</TITLE> <META NAME="Generator" CONTENT="EditPlus"> <META NAME="Author" CONTENT=""> <META NAME="Keywords" CONTENT=""> <META NAME="Description" CONTENT=""> </HEAD> <BODY id="bb"> <table id="tab" border=1><thead id="Thead"><tr><th onClick="sortTable('tab',0,'int')" style="cursor:pointer">ID</th><th onClick="sortTable('tab',1)" style="cursor:pointer">姓名</th><th onClick="sortTable('tab',2,'int')" style="cursor:pointer">年龄</th><th onClick="sortTable('tab',3,'date')" style="cursor:pointer">出生日期</th></tr></thead><tbody id="Tbody"><tr id="tr1"><td width=100 id="ID">1</td><td id="name" width="100">张三</td><td id="age" width="100">25</td><td id="date" width="100">1970-9-9</td></tr><tr id="tr2"><td width=100 id="ID">3</td><td id="name" width="100">李四</td><td id="age" width="100">18</td><td id="date" width="100">1980-9-9</td></tr><tr id="tr3"><td width=100 id="ID">2</td><td id="name" width="100">王五</td><td id="age" width="100">19</td><td id="date" width="100">1990-9-9</td></tr><tr id="tr4"><td width=100 id="ID">6</td><td id="name" width="100">续写</td><td id="age" width="100">22</td><td id="date" width="100">1965-9-9</td></tr><tr id="trr" name="rr"><td width=100 id="ID1">5</td><td id="name" width="100">经典</td><td id="age" width="100">30</td><td id="date" width="100">1950-9-9</td></tr></tbody></table><div id="textDiv">测试</div><div id="txt"></div><div id="removeDiv">removeDiv</div><div id="txtDiv">aaa</div><form name="form1"></form><form name="form2"></form><a href="#" name="a1">超链接一</a><a href="#" name="a2">超链接二</a> </BODY> <script type="text/javascript" > //返回指定id的元素节点function $(id){return id ? document.getElementById(id) : id ;} /* */var oHtml = document.documentElement; //得到<html>元素 alert("节点名称："+oHtml.nodeName);alert("节点类型："+oHtml.nodeType);//获取<head> 元素的几种方法，效果一样var oHead = document.head;oHead = oHtml.firstChild;oHead = oHtml.childNodes.item(0);oHead = oHtml.childNodes[0];oHead = oHtml.children.item(0);oHead = oHtml.children[0]; //获取 <body>元素的几种方法，效果一样var oBody = document.body;oBody = oHtml.lastChild;oBody = oHtml.childNodes.item(1);oBody = oHtml.childNodes[1];oBody = oHtml.children.item(1);oBody = oHtml.children[1];alert(oHead.parentNode == oHtml); //head节点的父节点是html节点，返回 true alert(oBody.parentNode == oHtml); //body节点的父节点是html节点，返回 true alert(oBody.previousSibling == oHead); //body节点的上一个兄弟节点是head节点 ，返回 true alert(oHead.nextSibling == oBody);//head节点的下一个兄弟节点是body节点，返回 true alert(oHead.ownerDocument == document); //判断head节点的根元素是否指向Document，返回 true alert(oBody.ownerDocument == document); //判断body节点的根元素是否指向Document，返回 true var tdArray = document.getElementsByTagName("td"); //得到一个td标签的集合for(var i=0;i<tdArray.length;i++){ //遍历集合，输出所有标签的内容alert(tdArray[i].innerHTML); } var node = $("textDiv"); alert(node.innerHTML);//创建一个div元素节点var div = document.createElement("div");alert(div.nodeType); //创建一个文本节点var text = document.createTextNode("创建的文本节点");alert(text.nodeType);var txtNode = $("txt");txtNode.appendChild(text); //将创建的文本节点添加到指定的元素内alert(txtNode.innerHTML); //输出文本节点的内容//为元素设置属性值//div.id = "myID"; div.setAttribute("id","myID"); //效果同上，为创建的div设置id属性alert("div的属性id的值是："+div.getAttribute("id")); //获取div的属性id的值，如果属性不存在，返回null//设置div中的内容div.innerHTML = "<p>续写经典</p>";//将创建的div加入到body中var body = document.getElementsByTagName("body")[0];body.appendChild(div);//通过id查找元素div = $("myID");alert(div.innerHTML); //访问id为“myID”的元素的内容 //获得表格的集合var arr = new Array();arr = document.getElementById("tab").rows; //获得id为“tab”的表格的集合alert("表格的行数为："+arr.length);//删除表格中指定的一行数据document.getElementById("tab").deleteRow(arr.length-1); var han = {//获取子节点的集合（ie，ff通用）getChildNodes:function(node){var arr = [];var nodes = node.childNodes;for(var i in nodes){if(nodes[i].nodeType == 1){ //查找元素节点arr.push(nodes[i]);}}return arr;},//获取第一个元素子节点（ie，ff通用）getFirstElementChild : function(node){return node.firstElementChild ? node.firstElementChild : node.firstChild ;},//获取最后一个元素子节点（ie，ff通用）getLastElementChild : function(node){return node.lastElementChild ? node.lastElementChild : node.lastChild ;},//获取上一个相邻节点（ie，ff通用）getPreviousSibling : function(node){//找到上一个节点就返回节点，没找到就返回nulldo{node = node.previousSibling;}while(node && node.nodeType!=1)return node;},//获取下一个相邻节点 （ie，ff通用）getNextSibling : function(node){//找到下一个节点就返回节点，没找到就返回nulldo{node = node.nextSibling;}while(node && node.nodeType!=1)return node;},//将元素插入到指定的node节点后面insertAfter : function(newNode,targetNode){if(newNode && targetNode){var parent = targetNode.parentNode;var nextNode = this.getNextSibling(targetNode);if(nextNode && parent){parent.insertBefore(newNode,nextNode);}else{parent.appendChild(newNode);}}}};//创建一个div元素节点var newDiv = document.createElement("div");newDiv.innerHTML = "一二三四";var div1 = $("textDiv");//将元素插入到指定节点后面han.insertAfter(newDiv,div1); //创建一个div元素节点var newDiv2 = document.createElement("div");newDiv2.innerHTML = "五六七八";var div2 = $("textDiv");//将元素插入到指定节点前面div2.parentNode.insertBefore(newDiv2,div2);//获取子节点的个数（ie，ff通用）var a2 = han.getChildNodes(Tbody);alert("body子节点长度："+a2.length);//获取首个子节点的内容 （ie，ff通用）var firstNode = han.getFirstElementChild(tab).innerHTML;alert("tab的首个子节点内容是："+firstNode);//获取最后一个子节点的内容 （ie，ff通用）var lastNode = han.getLastElementChild(tab).innerHTML;alert("tab的最后一个子节点内容是："+lastNode);alert("tab的父节点名字是："+tab.parentNode.nodeName); //获取父节点名字alert("tab的父节点类型是："+tab.parentNode.nodeType); //获取父节点类型alert("tab的父节点值是："+tab.parentNode.nodeValue); //获取父节点值var node = document.getElementById("Tbody");var myNextSibling;if(han.getNextSibling(node)){myNextSibling = han.getNextSibling(node);alert("Tbody的下一个相邻的节点名字是："+myNextSibling.nodeName);}else{alert("已经是最后一个节点");}var node1 = document.getElementById("Thead");var myPreviousSibling;if(han.getPreviousSibling(node1)){myPreviousSibling = han.getPreviousSibling(node1);alert("Thead的上一个相邻的节点名字是："+myPreviousSibling.nodeName);}else{alert("已经是第一个节点");} //克隆函数,参数为true时：克隆并包括所有子对象；参数为false时：克隆但不包括所有子对象var cloneNode = textDiv.cloneNode(true);txtDiv.appendChild(cloneNode);//检测是否包含有网页元素( HTML Elements )或 TextNodes 对象。返回boolean类型的值alert(tr3.hasChildNodes());//删除一个子节点，所有子对象将被一起删除var remove = bb.removeChild(removeDiv);//替换一个子对象，被替换时，所有与之相关的属性内容都将被移除var newDIV = document.createElement("div");newDIV.innerHTML = "一生经典";//var replace = bb.replaceChild(newDIV,$("textDiv")); //方法一var replace = $("textDiv").replaceNode(newDIV); //方法二，两种效果一样//forms:当前文档中的所有表单集合alert("<form>表单的个数："+document.forms.length); //获取集合的长度for(var i=0;i<document.forms.length;i++){//遍历集合,输出每一个元素alert(document.forms[i].name);}//links:当前文档中所有超链接元素的集合alert("<a>元素的个数："+document.links.length); //获取集合的长度for(var i=0;i<document.links.length;i++){ //遍历集合，输出每一个元素alert(document.links[i]);} </script></HTML>