Dom编程
来源：互联网 发布：10.11.4制作mac安装u盘 编辑：程序博客网 时间：2024/06/06 02:01
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 = " 小了，继续猜！ ";}elseele.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="我猜" onclick="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="演示" onclick="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="演示" onclick="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="演示" onclick="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="演示" onclick="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="演示" onclick="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="演示" onclick="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 类型：
- DOM编程
- DOM编程
- DOM编程
- Dom编程
- DOM编程
- DOM编程
- Dom编程
- DOM编程
- Dom编程
- dom编程
- DOM编程
- DOM编程
- DOM编程
- DOM编程
- DOM编程
- DOM编程
- 【JavaScript DOM编程艺术】- DOM
- 《DOM编程艺术》一、DOM
- MP3到文字转录
- zoj 2672 DP+hash
- c语言思想11
- hdu2011 多项式求和
- sscanf的强大功能
- Dom编程
- 虚拟机设置固定上网地址
- hdu 2647 拓扑排序
- c语言思想12
- Xampp linux,Xampp mac,Xampp mysql,Xampp中文版,Xampp 64位
- 在fvcom_source里 make 出现的问题
- lv655液晶电视东芝
- iOS开发系列之三 - UITextField 用法小结
- Undefined symbols for architecture i386
