<!doctype html public "-//w3c//dtd xhtml 1.0 transitional//en" "www.w3.org/tr/xhtml1/dtd/xhtml1-transitional.dtd">
<html xmlns="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>
