Dom编程

于 2014-07-30 11:46:23 发布
阅读量398 收藏
点赞数
版权声明：本文为博主原创文章，遵循 CC 4.0 BY 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/melinda23096/article/details/38128049
版权

DOM简介：



DHTML ：动态网页



示例：点按钮，变换文字颜色






猜大小游戏：

<!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=UTF-8" />
<title>时间</title>
<script type="text/javascript">
var ran = parseInt(Math.random()*100+1);
function method(){
	var element = document.getElementById("textid");
	var ele = document.getElementById("pid");

	var num = element.value;
	if(num>ran){
		ele.innerHTML = "    大了，继续猜！   ";
	}else if(num<ran){
		ele.innerHTML = "    小了，继续猜！   ";	
	}else
		ele.innerHTML = "    恭喜你，猜中了！  ";
}
</script>

<style type="text/css">
div, p{
	margin:0;
	padding:0;
}
#layout{
	width:350px;
	margin:150px auto;
}
p{
	width:330px;
	margin:20px auto;
}
</style>
</head>

<body>
<div id="layout">
<p id="pid">   猜一个 1-100 之间的整数   </p>
<input type="text" id="textid" />
<input type="button" value="我猜" οnclick="method()"/>
</div>
</body>
</html>

老方法变颜色：

<!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=UTF-8" />
<title>时间</title>
<script type="text/javascript">
var flag = true;
function method(){
	var ele = document.getElementById("divid");
	if(flag){
		ele.className = "red";
		flag = false;
	}else{
		ele.className = "blue";
		flag = true;	
	}
}
</script>

<style type="text/css">
.red{
	background:#F00;
}
.blue{
	background:#09F;
}
</style>
</head>

<body>
<input type="button" value="演示" οnclick="method()" />
<div id="divid">我爱大中国！</div>
</body>
</html>

新方法变颜色：

使用 style 对象：

<!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=UTF-8" />
<title>时间</title>
<script type="text/javascript">
var flag = true;
function method(){
	var ele = document.getElementById("divid");
	if(flag){
		ele.style.backgroundColor = "red";
		flag = false;
	}else{
		ele.style.backgroundColor = "blue";
		flag = true;	
	}
}
</script>
</head>

<body>
<input type="button" value="演示" οnclick="method()" />
<div id="divid">我爱大中国！</div>
</body>
</html>


节点的关系：

通过id可以获取一个节点的。

父节点只有一个，所以查询这个节点的属性，parentNode。

子节点有很多，所以查询集合，childNodes。

兄弟姊妹节点：上一个节点：previousSibling。

                         下一个节点：nextSibling。

<!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=UTF-8" />
<title>时间</title>
<script type="text/javascript">
function method(){
	var div = document.getElementById("divid");
	
	var parent = div.parentNode;
	document.write("parentNode:<br/>");
	print(parent);
	
	var children = div.childNodes;
	document.write("<br/>childNodes:<br/>");
	document.write("children length:"+children.length+"<br/>");
	print(children[0]);
	
	var previous = div.previousSibling;	
	document.write("<br/>previousSibling:<br/>");
	print(previous);

	var next = div.nextSibling;	
	document.write("<br/>nextSibling:<br/>");
	print(next);
	
	var tableNode = div.previousSibling;
	document.write("<br/>td node:<br/>");
	//var tdText = tableNode.childNodes[0].childNodes[0].childNodes[0].childNodes[0]; //实在太疯狂
	var tdNodes = tableNode.getElementsByTagName("td");
	print(tdNodes[0].childNodes[0]);
}

function print(node){
	document.write("nodeName="+node.nodeName+", nodeType="+node.nodeType+", nodeValue="+node.nodeValue+"<br/>");
}
</script>
</head>

<body>
<table border="1px" cellpadding="0"><tr><td>第一个单元格</td><td>第二个单元格</td><td>第三个单元格</td><td>第四个单元格</td></tr></table><div id="divid">我爱大中国！</div><input type="button" value="演示" οnclick="method()" />
</body>
</html>

结果：

parentNode:
nodeName=BODY, nodeType=1, nodeValue=null

childNodes:
children length:1
nodeName=#text, nodeType=3, nodeValue=我爱大中国！

previousSibling:
nodeName=TABLE, nodeType=1, nodeValue=null

nextSibling:
nodeName=INPUT, nodeType=1, nodeValue=null

td node:
nodeName=#text, nodeType=3, nodeValue=第一个单元格


获取节点对象的三种方法：

getElementById 获取对 ID 标签属性为指定值的第一个对象的引用。
getElementsByName 根据 NAME 标签属性的值获取对象的集合。
getElementsByTagName 获取基于指定元素名称的对象集合。


name 属性 只有 表单form 才有，单选框复选框的name值都一样，所以返回的是一个数组。

table对象 只有一种方法：getElementsByTagName。大多容器型标签都具备这个方法。


集合：all

 

用document 来演示all 集合：

这是老师的：


 

自己的：

只有 IE 浏览器能打出 注释 节点。 

<!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=UTF-8" />
<title>演示</title>

<script type="text/javascript">
var info = "";
function method(){
	var nodes = document.all;
	for(var x=0; x<nodes.length; x++){
		info += nodes[x].nodeName+"......."+nodes[x].nodeType+"<br/>";
	}
	document.write(nodes.length+"<br/>"+info);
}
</script>
</head>
<body>
<table>
    <tr>
        <td>第一个单元格</td>
        <td>第二个单元格</td>
        <td>第三个单元格</td>
        <td>第四个单元格</td>
    </tr>
</table>
<div id="divid">我爱大中国！</div>
<input type="button" value="演示" οnclick="method()" />
</body>
</html>

结果：

16
#comment.......8
HTML.......1
HEAD.......1
TITLE.......1
META.......1
SCRIPT.......1
BODY.......1
TABLE.......1
TBODY.......1
TR.......1
TD.......1
TD.......1
TD.......1
TD.......1
DIV.......1
INPUT.......1


 

集合：attributes

老师的能打出全部属性，我的只能打出自己写了的属性。

<!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=UTF-8" />
<title>演示</title>

<script type="text/javascript">
var str = "";
function method(){
	var inputNodes = document.getElementsByTagName("input");
	var attrs = inputNodes[0].attributes;
	for(var x=0; x<attrs.length; x++){
		str += attrs[x].nodeName+"..."+attrs[x].nodeType+"..."+attrs[x].nodeValue+"<br/>";
	}
	document.write(attrs.length+"<br/>"+str);	
}
</script>
</head>
<body>
<table>
    <tr>
        <td>第一个单元格</td>
        <td>第二个单元格</td>
        <td>第三个单元格</td>
        <td>第四个单元格</td>
    </tr>
</table>
<div id="divid">我爱大中国！</div>
<input type="button" value="演示" οnclick="method()" />
</body>
</html>


 

 结果：

3
onclick...2...method()
type...2...button
value...2...演示

 

遍历document树：

<!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=UTF-8" />
<title>演示</title>

<script type="text/javascript">
function method(){
	listNode(document,0);
	document.write(str);
}

function listNode(node,level){
	makeStr(node,level); 
	level++;
	var child = node.childNodes;
	for(var x=0; x<child.length; x++){
		if(child[x].hasChildNodes()){
			listNode(child[x],level);
		}else{
			makeStr(child[x],level);
		}
	}
}

function makeLevel(level){
	var label = "";
	for(var x=0; x<level; x++){
		label += "|---";	
	}
	return label;
}

var str = "";

function makeStr(node,level){
	str += makeLevel(level)+node.nodeName+"..."+node.nodeType+"..."+node.nodeValue+"<br/>";
}
</script>
</head>
<body>
<table>
    <tr>
        <td>第一个单元格</td>
        <td>第二个单元格</td>
        <td>第三个单元格</td>
        <td>第四个单元格</td>
    </tr>
</table>
<div id="divid">我爱大中国！</div>
<input type="button" value="演示" οnclick="method()" />
</body>
</html>

Safari 显示的结果：

#document...9...null
|---html...10...null
|---HTML...1...null
|---|---HEAD...1...null
|---|---|---#text...3... 
|---|---|---META...1...null
|---|---|---#text...3... 
|---|---|---TITLE...1...null
|---|---|---|---#text...3...演示
|---|---|---#text...3... 
|---|---|---SCRIPT...1...null
|---|---|---|---#text...3... function method(){ listNode(document,0); document.write(str); } function listNode(node,level){ makeStr(node,level); level++; var child = node.childNodes; for(var x=0; x<child.length; x++){="" if(child[x].haschildnodes()){="" listnode(child[x],level);="" }else{="" makestr(child[x],level);="" }="" function="" makelevel(level){="" var="" label="" ;="" for(var="" x="0;" x"; } /*var str = ""; function method(){ var inputNodes = document.getElementsByTagName("input"); var attrs = inputNodes[0].attributes; for(var x=0; x"; } document.write(attrs.length+"
"+str); }*/ /*var info = ""; function method(){ var nodes = document.all; for(var x=0; x"; } document.write(nodes.length+"
"+info); }*/ 
|---|---|---#text...3... 
|---|---#text...3... 
|---|---BODY...1...null
|---|---|---#text...3... 
|---|---|---TABLE...1...null
|---|---|---|---#text...3... 
|---|---|---|---TBODY...1...null
|---|---|---|---|---TR...1...null
|---|---|---|---|---|---#text...3... 
|---|---|---|---|---|---TD...1...null
|---|---|---|---|---|---|---#text...3...第一个单元格
|---|---|---|---|---|---#text...3... 
|---|---|---|---|---|---TD...1...null
|---|---|---|---|---|---|---#text...3...第二个单元格
|---|---|---|---|---|---#text...3... 
|---|---|---|---|---|---TD...1...null
|---|---|---|---|---|---|---#text...3...第三个单元格
|---|---|---|---|---|---#text...3... 
|---|---|---|---|---|---TD...1...null
|---|---|---|---|---|---|---#text...3...第四个单元格
|---|---|---|---|---|---#text...3... 
|---|---|---|---|---#text...3... 
|---|---|---#text...3... 
|---|---|---DIV...1...null
|---|---|---|---#text...3...我爱大中国！
|---|---|---#text...3... 
|---|---|---INPUT...1...null
|---|---|---#text...3... 


IE 浏览器显示的结果：

#document...9...null
|---#comment...8...DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"
|---HTML...1...null
|---|---HEAD...1...null
|---|---|---TITLE...1...null
|---|---|---META...1...null
|---|---|---SCRIPT...1...null
|---|---BODY...1...null
|---|---|---TABLE...1...null
|---|---|---|---TBODY...1...null
|---|---|---|---|---TR...1...null
|---|---|---|---|---|---TD...1...null
|---|---|---|---|---|---|---#text...3...第一个单元格
|---|---|---|---|---|---TD...1...null
|---|---|---|---|---|---|---#text...3...第二个单元格
|---|---|---|---|---|---TD...1...null
|---|---|---|---|---|---|---#text...3...第三个单元格
|---|---|---|---|---|---TD...1...null
|---|---|---|---|---|---|---#text...3...第四个单元格
|---|---|---DIV...1...null
|---|---|---|---#text...3...我爱大中国！
|---|---|---INPUT...1...null
|---|---|---#text...3...

总结 节点node 类型：


Lola的笔记
关注
专栏目录
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值