<!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.or ...
<!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>
<title></title>
</head>
<body>
<!--form>
<input type="button" value="按鈕" />
<input type="text" />
<input type="checkbox" />
<textarea rows="3" cols="2"></textarea>
<input type="hidden" />
<select>
<option>A</option>
<option>B</option>
</select>
<input type="password" />
<input type="reset" />
<input type="submit" />
<input type="radio" />
<input type="file" />
</form>
<iframe src="secondPage.htm">
</iframe>
<a href="#">鏈接</a>
<h1 id="h1">Hello World!</h1--><!--元素--><!--屬性--><!--文本-->
<p id="p1">Welcome to<b> DOM </b>World!</p>
<script type="text/javascript">
var nodeStatus = function (node) {
var temp = "";
if (node.nodeName != null) {
temp += "nodeName:" + node.nodeName + "\n";
}
else {
temp += "nodeName:null!\n"; //<br>,\n
}
if (node.nodeType != null) {
temp += "nodeType:" + node.nodeType + "\n";
}
else {
temp += "nodeType:null!\n";
}
if (node.nodeValue != null) {
temp += "nodeValue:" + node.nodeValue + "\n";
}
else {
temp += "nodeValue:null!\n";
}
return temp;
}
var currentElement = document.getElementById('p1');
var msg = nodeStatus(currentElement);
//alert(msg);
var firstChild = currentElement.firstChild;
msg += nodeStatus(firstChild);
//父親的下一個兒子->弟弟
var youngerBrother = firstChild.nextSibling;
msg += nodeStatus(youngerBrother);
//2弟的兒子=p父親的大孫子
var grandSon = youngerBrother.firstChild;
msg += nodeStatus(grandSon);
//孫子的父親
var grandSonParent = grandSon.parentNode;
msg += nodeStatus(grandSonParent);
//孫子的父親的兄長
var grandSonParentElderBrother = grandSonParent.previousSibling
msg += nodeStatus(grandSonParentElderBrother);
//大哥的父親
var parent = grandSonParentElderBrother.parentNode;
msg += nodeStatus(parent);
//父親的小兒子
var lastChild = parent.lastChild;
msg += nodeStatus(lastChild);
//父親的所有兒子
var allChildInfo = "";
var allChild = parent.childNodes;
for (var i = 0; i < allChild.length; i++) {
allChildInfo += nodeStatus(allChild[i]);
}
//alert(msg);
</script>
<ul id="purchases">
<li>Beans</li>
<li>Cheese</li>
<li>Milk</li>
</ul>
<script type="text/javascript">
var oPurchases = document.getElementById('purchases');
var items = document.getElementsByTagName("li");
var info = typeof (oPurchases) + '<br>';
for (var i = 0; i < items.length; i++) {
info += typeof (items[i]) + "<br>";
}
//document.write(info);
</script>
<!--div>
<input type="radio" name="rdGroup" value="A" />A
<input type="radio" name="rdGroup" value="B" />B
<input type="radio" name="rdGroup" value="C" />C
<input type="radio" name="rdGroup" value="D" />D
</div-->
<script type="text/javascript">
var rdItems = document.getElementsByName("rdGroup");
var rdInfo = "";
for (var i = 0; i < rdItems.length; i++) {
rdInfo += nodeStatus(rdItems[i]) + '\n';
}
//alert(rdInfo);
</script>
<p title="pTitle" style="color:Blue;font-size:30px;"
id="pSample">
This is the first Sample!</p>
<script type="text/javascript">
var oSample = document.getElementById('pSample');
var attr = "";
//取得所有屬性內容
attr += "原標題是："
+ oSample.getAttribute("title") + '\n';
attr += "樣式是："
+ "color="
+ oSample.getAttribute("style").color
+ ",fontSize="
+ oSample.getAttribute("style").fontSize + '\n';
//alert(attr);
//改變屬性內容,新增一個名字的屬性
oSample.setAttribute("title", "newTitle");
oSample.setAttribute("name", "pName");
attr += "新標題是："
+ oSample.getAttribute("title") + '\n'
+ "新名字是：" + oSample.getAttribute("name");
//alert(attr);
//刪除屬性
oSample.removeAttribute("name");
attr += "\n現在的名字是："
+ oSample.getAttribute("name");
//alert(attr);
var createElement = function () {
var eleInfo = "";
//段落
var newParagraph =
document.createElement('p');
eleInfo += nodeStatus(newParagraph) + '\n';
//文本內容(兒子)
var newTextNode =
document.createTextNode('我是段落裡面的文字');
eleInfo += nodeStatus(newTextNode) + '\n';
newParagraph.appendChild(newTextNode);
//第一個兒子
eleInfo += nodeStatus(newParagraph.firstChild) + '\n';
document.body.appendChild(newParagraph);
//return eleInfo;
}
//alert(createElement());
//插入一個新元素
var doInsertBefore = function (o) {
var myDiv = document.getElementById('myDiv'); //獲取Div元素
var newInput = document.createElement('input'); //新建input元素
newInput.value = new Date().toLocaleString();
var targetElement = o; //DOM對象
myDiv.insertBefore(newInput, targetElement); //在按鈕前插入一個新的文本框
}
var doRemoveChild = function (o) {
var myDiv = o.parentNode; //parent element 獲取當前對象的父節點
var firstChild = myDiv.firstChild; //父節點的第一個子節點
//alert(firstChild.value);
myDiv.removeChild(firstChild); //移除
}
</script>
<div id="myDiv">
<input type="button" value="insertBefore" onclick="doInsertBefore(this)"/><!--將會插入一個新的DOM元素-->
<!--刪除一個元素-->
<input type="button" value="removeChild" onclick="doRemoveChild(this)"/>
</div>
</body>
</html>
