今天我们学习一下javascript的dom元素,即文档对象模型,
dom分为元素节点,文本节点和属性节点.
比如:<a name="link" href="http://baidu.com">百度</a>,在这个元素中,<a>是元素节点,name=”link"和href="http://baidu.com"是属性节点,
百度是文本节点.
那么如何使用dom更好的为我们的网页服务呢?下面通过几个例子加简单说明一下.
1.documnet.getElementByTagName("name");
<html>
<head>
<title>DomTest1</title>
<script language="javascript">
function test(){
var liElements=document.getElementsByTagName("li");
var ulElements=document.getElementsByTagName("ul");
var ulElements2=ulElements[1].getElementsByTagName("li");
alert(liElements.length+"-"+liElements[3].tagName+"-"+liElements[5].childNodes[0].nodeValue);
alert(ulElements2.length+"-"+ulElements2[1].tagName+"-"+ulElements2[2].childNodes[0].nodeValue);
}
</script>
</head>
<body οnlοad="test()">
<ul>客户端语言
<li>html</li>
<li>css</li>
<li>javascript</li>
</ul>
<ul>服务器语言
<li>java</li>
<li>c</li>
<li>asp</li>
</ul>
</body>
</html>
结果依次弹出窗口6-li-asp和3-li-asp.
2.document.getElementById("id");
<html>
<head>
<title>DomTest1</title>
<script language="javascript">
function test(){
var i=document.getElementById("js");
alert(i.tagName+"-"+i.childNodes[0].nodeValue);
}
</script>
</head>
<body οnlοad="test()">
<ul>客户端语言
<li>html</li>
<li>css</li>
<li id="js">javascript</li>
</ul>
<ul>服务器语言
<li>java</li>
<li>c</li>
<li>asp</li>
</ul>
</body>
</html>
结果弹出窗口Li-javascript.
3.元素的父子关系.
<html>
<head>
<title>DomTest3</title>
<script language="javascript">
function test(){
var ul=document.getElementById("ul");
var string="";
if(ul.hasChildNodes()){
var children=ul.childNodes;
for(var i=0;i<children.length;i++){
string+=children[i].nodeName+"\n";
}
}
alert(string);
}
</script>
</head>
<body οnlοad="test()">
<ul id="ul">
<li>html</li>
<li>css</li>
<li>javascript</li>
</ul>
</body>
</html>
结果窗口输出Li Li Li.
4.元素的属性节点.
<html>
<head>
<title>DomTest3</title>
<script language="javascript">
function test(){
var link=document.getElementById("link");
alert(link.getAttribute("title"));
}
</script>
</head>
<body>
<input type="button" value="点我" id="link" onClick="test()" title="Ilucky"></input>
</body>
</html>
结果点击页面上的button弹出Ilucky.
5.创建新节点.
<html>
<head>
<title>DomTest5</title>
<script language="javascript">
function test(){
var p=document.createElement("p");
var text=document.createTextNode("I am 26!");
p.appendChild(text);
document.body.appendChild(p);
}
</script>
</head>
<body>
<body οnlοad="test()">
<p>I am Ilucky!</p>
</body>
</body>
</html>
结果页面显示I am Ilucky! I am 26!.
6.innerHtml属性表示某个标记之间的所有内容,包括代码本身,并且该属性不仅支持读取,还支持写.
<html>
<head>
<title>DomTest5</title>
<script language="javascript">
function test(){
var div=document.getElementById("div");
alert(div.innerHTML);
div.innerHTML="<h1>chage</h1>";
}
</script>
</head>
<body>
<body οnlοad="test()">
<div id="div">
<span>hello</span>
<p>enter</p>
</div>
</body>
</body>
</html>
结果页面显示hello和enter并且弹出窗口<span>hello</span><p>enter</p>,关闭窗口,页面显示change.
请继续关注我的博客,欢迎交流......