JavaScript第九講文檔對象
目錄
一、DOM概述
二、DOM對象節點屬性
例題1：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>訪問指定節點</title>
</head>
<body id="body" class="class">
<h1 > 一號標題</h1>
<b>加粗內容</b>
<script type="text/javascript">
window.onload=function(){
//元素節點
var box=document.getElementById("body");
alert("節點名稱:"+box.nodeName+'\n'+"節點類型:"+box.nodeType+'\n'+"節點值:"+box.nodeValue);
//屬性節點
}
</script>
</body>
</html>
例題2：
<!DOCTYPE html>
<html >
<head>
<meta charset="utf-8">
<title>通過相應按鈕查找文檔的各個節點名稱、類型和節點值</title>
</head>
<body>
<h3>三號標題</h3>
<b>加粗內容</b><br />
節點名稱：<input type="text" id="name1" /><br />
節點類型：<input type="text" id="name2" /><br />
節點的值：<input type="text" id="name3" /><br />
<input type="button" value="父節點" onclick="father()" />
<input type="button" value="第一個子節點" onclick="firstNode()" />
<input type="button" value="最後一個子節點" onclick="lastNode()"/>
<input type="button" value="前一個兄弟節點" onclick="firstbrother()"/>
<input type="button" value="最後一個兄弟節點" onclick="lastbrother()"/>
<input type="button" value="返回根節點" onclick="last()" />
<script type="text/javascript">
var n1 = document.getElementById("name1");
var n2 = document.getElementById("name2");
var n3 = document.getElementById("name3");
var box = document.body;
function father() {
n1.value = box.parentNode.nodeName;
n2.value = box.parentNode.nodeType;
n3.value = box.parentNode.nodeValue;
}
function firstNode() {
n1.value = box.firstChild.nodeName;
n2.value = box.firstChild.nodeType;
n3.value = box.firstChild.nodeValue;
}
function lastNode() {
n1.value = box.lastChild.nodeName;
n2.value = box.lastChild.nodeType;
n3.value = box.lastChild.nodeValue;
}
function firstbrother() {
n1.value = box.previousSibling.nodeName;
n2.value = box.previousSibling.nodeType;
n3.value = box.previousSibling.nodeValue;
}
function lastbrother() {
n1.value = box.nextSibling.nodeName;
n2.value = box.nextSibling.nodeType;
n3.value = box.nextSibling.nodeValue;
}
function last() {
n1.value = box.lastElementChild.nodeName;
n2.value = box.lastElementChild.nodeType;
n3.value = box.lastElementChild.nodeValue;
}
</script>
</body>
</html>
三、節點
實例3：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>自動創建新節點</title>
</head>
<body>
<script type="text/javascript">
window.onload=function(){
var h=document.createElement("b");
var t=document.createTextNode("創建新節點！");
h.appendChild(t);
document.body.appendChild(h);
}
</script>
</body>
</html>
實例4：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>自動創建新節點</title>
</head>
<body>
<script type="text/javascript">
window.onload=function(){
var arr=["一","二","三","四","五","六"];
for(var i=0;i<arr.length;i++){
var h=document.createElement("p");
var t=document.createTextNode("第"+arr[i]+"個節點");
h.appendChild(t);
document.body.appendChild(h);
}
}
</script>
</body>
</html>
例題5：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>自動創建新節點</title>
</head>
<body>
<script type="text/javascript">
window.onload=function(){
var arr=["一","二","三","四","五","六"];
var frag = document.createDocumentFragment();
for(var i=0;i<arr.length;i++){
var h=document.createElement("b");
var t=document.createTextNode("第"+arr[i]+"個節點");
h.appendChild(t);
frag.appendChild(h);
}
document.body.appendChild(frag);
}
</script>
</body>
</html>
例題6：
<!DOCTYPE html>
<html>
<head>
<title> 插入節點</title>
<script language="javascript">
<!--
function crNode(str)
{
var newP=document.createElement("p");
var newTxt=document.createTextNode(str);
newP.appendChild(newTxt);
return newP;
}
function insetNode(nodeId,str)
{
var node=document.getElementById(nodeId);
var newNode=crNode(str);
if(node.parentNode) //判斷是否擁有父節點
node.parentNode.insertBefore(newNode,node);
}
-->
</script>
</head>
<body>
<h2 id="h">在上面插入節點</h2>
<form id="frm" name="frm">
輸入文本：<input type="text" name="txt" />
<input type="button" value="前插入" onclick="insetNode('h',document.frm.txt.value);" />
</form>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<script type="text/javascript">
function Add(bl)
{
var sel=document.getElementById("di");
var newSelect=sel.cloneNode(bl);
var b=document.createElement("br");
form.appendChild(newSelect);
form.appendChild(b);
}
</script>
<form id="form">
<div id="di">JavaScript</div>
<input type="button" value="複製" onclick="Add(true)" />
</form>
</body>
</html>
例題7：
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>複製節點</title>
<script language="javascript">
<!--
function AddRow(bl)
{
var sel=document.getElementById("sexType");
var newSelect=sel.cloneNode(bl);
var b=document.createElement("br");
di.appendChild(newSelect);
di.appendChild(b);
}
-->
</script>
</head>
<body>
<form>
<select name="sexType" id="sexType">
<option value="%">請選擇性別</option>
<option value="0">男</option>
<option value="1">女</option>
</select>
<div id="di"></div>
<input type="button" value="複製" onClick="AddRow(false)"/>
<input type="button" value="深度複製" onClick="AddRow(true)"/>
</form>
</body>
</html>
例題8：
<!DOCTYPE html>
<html>
<head>
<title> 刪除節點</title>
<script language="javascript">
<!--
function delNode()
{
var deleteN=document.getElementById('di');
if(deleteN.hasChildNodes())
{
deleteN.removeChild(deleteN.lastChild);
}
}
-->
</script>
</head>
<body>
<h1>刪除節點</h1>
<div id="di">
<p>第一行文本</p>
<p>第二行文本</p>
<p>第三行文本</p>
</div>
<form>
<input type="button" value="刪除" onclick="delNode();" />
</form>
</body>
</html>
實例9：
<!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>替換節點</title>
<script language="javascript">
<!--
function repN(str,bj)
{
var rep=document.getElementById('b1');
if(rep)
{ var newNode=document.createElement(bj);
newNode.id="b1";
var newText=document.createTextNode(str);
newNode.appendChild(newText);
rep.parentNode.replaceChild(newNode,rep);
}
}
-->
</script>
</head>
<body>
<b id="b1">可以替換文本內容</b>
<br />
輸入標記：<input id="bj" type="text" size="15" /><br />
輸入文本：<input id="txt" type="text" size="15" /><br />
<input type="button" value="替換" onclick="repN(txt.value, bj.value)" />
</body>
</html>
四、獲取文檔中的指定元素
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title></title>
</head>
<body>
<input type="text" name="txt" value="體育">
<input type="text" name="txt" value="藝術">
<input type="text" name="txt" value="舞蹈">
<script type="text/javaScript">
alert(document.getElementsByName("txt")[0].value);
</script>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<!-- <input type="button" value="提交" οnclick="change()" /> -->
<script type="text/javascript">
function change() {
var i = Math.floor(Math.random()*3); //取整並*3
var src = "";
switch (i) {
case 0:
src = "img/0.jpg";
break;
case 1:
src = "img/1.jpg";
break;
case 2:
src = "img/2.jpg";
break;
}
document.body.background = src;
setTimeout("change()", 3000);
}
window.onload=change();
</script>
</body>
</html>
實例11：
五、與DHTML相對應的DOM
實例12：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<div id="time"></div>
<div id="greet"></div>
<script type="text/javascript">
function ShowTime(){
var strgreet="";
var datetime=new Date();//獲取當前時間
var hour=datetime.getHours();//獲取小時
var minu=datetime.getMinutes();//獲取分鐘
var seco=datetime.getSeconds();//獲取秒鐘
strtime=hour+":"+minu+":"+seco+"";//組合當前時間
if(hour>=0&&hour<8)//判斷是否爲早上
strgreet="早上好";
if(hour>=8&&hour<11)//判斷是否爲上午
strgreet="上午好";
if(hour>=11&&hour<13)//判斷是否爲中午
strgreet="中午好";
if(hour>=13&&hour<17)//判斷是否爲下午
strgreet="下午好";
if(hour>=17&&hour<24)//判斷是否爲晚上
strgreet="晚上好";
window.setTimeout("ShowTime()",1000);//每隔1秒重新獲取一次時間
document.getElementById("time").innerHTML="現在是：<b>"+strtime+"</b>";
document.getElementById("greet").innerText="<b>"+strgreet+"</b>";
}
window.onload=ShowTime();
</script>
</body>
</html>
