javascript学习笔记—DOM常用API、属性、方法、函数

时间：2022-09-16 23:01:04
<!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){
//找到上一个节点就返回节点，没找到就返回null
do{
node = node.previousSibling;
}while(node && node.nodeType!=1)
return node;
},
//获取下一个相邻节点 （ie，ff通用）
getNextSibling : function(node){
//找到下一个节点就返回节点，没找到就返回null
do{
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>

标签：

相关文章