javascript DOM对象的学习实例代码- Javascript

当前位置: 首页 > 图文教程 > 网络编程 > Javascript > javascript DOM对象的学习实例代码

Javascript: Javascript实例教程(12) 隐藏script代码; Javascript实例教程(11) 创建\"后退\"按钮; HTC：浏览器上的舞者; JavaScript 小技巧(第四集); Javascript实例教程(20) 使用HoTMetal(7); 点一下，首页地址添加到收藏夹(javascript); Javascript设计漫天雪花; Javascript实例教程(21) OLE Automation(2); Javascript实例教程(20) 使用HoTMetal(3); Javascript制作闪烁的边框; JavaScript对象与数组参考大全; Javascript实例教程(21) OLE Automation(3); 利用JavaScript制作倒计时牌; Javascript实例教程(5) 利用Javascript创建对象; 利用JAVASCRIPT制作简单动画; Javascript实例教程(15) JS代替CGI; Javascript实例教程(19) 数组; JavaScript[对象.属性]集锦之三; Javascript实例教程(21) OLE Automation(6); JavaScript 小技巧(第一集)

No. « ‹ 9 10 11 12 › »

技术文章搜索

关键字

Javascript 中的 javascript DOM对象的学习实例代码

出处:互联网 整理: 软晨网（RuanChen.com） 发布: 2009-10-12 浏览: 55 ::

收藏到网摘: n/a

jQuery 可以拖动的div实现代码修正版 css 二级菜单实现代码集合修正版

javascript DOM对象的学习实例代码

点击运行可以看到效果:

<!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 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 src="/upload/tech/20091012/20091012095622_3621f1454cacf995530ea53652ddf8fb.gif" title="小屋" alt="个人主页" />
这是第一个节点
<div id="inner">innerHTML的使用</div>
</body>
</html>

[Ctrl+A 全选提示:你可先修改部分代码,再按运行]

jQuery 可以拖动的div实现代码修正版 css 二级菜单实现代码集合修正版

Javascript 中的 javascript DOM对象的学习实例代码

评论 (0) All