javascript DOM对象的学习实例代码

时间:2020-05-12 人气:1

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> 
<title>DOM对象的学习</title> 
<script language="javascript" type="text/javascript"> 
function searchNode(){ 
/*文本节点*/ 
/*元素节点*/ 
/*属性节点*/ 
var nodes=document.getElementsByTagName("li"); 
alert("节点数"+nodes.length+"第一个节点元素的名称"+nodes[0].tagName+";第四个节点的第一个节点文本"+nodes[3].childNodes[0].nodeValue); 
var nodes2=document.getElementsByTagName("ul"); 
var subnodes=nodes2[1].getElementsByTagName("li"); 
alert("节点数"+subnodes.length+";第一个节点元素的名称"+subnodes[0].tagName+";第一个节点元素的第一个节点文本"+subnodes[0].childNodes[0].nodeValue); 
var nodeID=document.getElementById("liNode"); 
alert("节点的名称"+nodeID.tagName+";第一点节点的第一节点的文本"+nodeID.childNodes[0].nodeValue); 
//遍历元素 
var ulNodes=document.getElementById("ulNode"); 
var DOMString=""; 
if(ulNodes.hasChildNodes()){ 
var subULNodes=ulNodes.childNodes; 
for(var i=0;i<subULNodes.length;i++){ 
DOMString=DOMString+subULNodes[i].childNodes[0].nodeValue+"\n"; 
} 
} 
alert(DOMString);

//节点属性 
var imgTitle=document.getElementsByTagName("img")[0]; 
var titleString=imgTitle.getAttribute("title"); 
var altString=imgTitle.getAttribute("alt"); 
alert(titleString+"\n"+altString); 
var p=document.createElement("p"); 
var text=document.createTextNode("这是第二个节点"); 
p.appendChild(text); 
document.body.appendChild(p); 
//innerHTML的使用 
var inner=document.getElementById("inner"); 
alert(inner.innerHTML); 
inner.innerHTML="<img onerror="javascript:this.src='/skin1/img/error.jpg';" src='images/album.gif'/>"; 
} 
</script> 
</head>

<body onload="searchNode()"> 
<ul id="ulNode"> 
<li>java</li> 
<li>javascript</li> 
<li>CSS</li> 
</ul> 
<ul> 
<li id="liNode">ajax</li> 
<li>c#</li> 
<li>c++</li> 
</ul> 
<img onerror="javascript:this.src='/skin1/img/error.jpg';" src="https://img.qb5200.com/download-x/20200511/25495.gif" title="小屋" alt="个人主页" /> 
<p>这是第一个节点</p> 
<div><p>innerHTML的使用</p></div> 
</body> 
</html>

[Ctrl+A 全选注:如需引入外部Js需刷新才能执行]

加载全部内容