文档对象模型的实例代码-js教程-PHP中文网

文档对象模型的实例代码

零下一度

发布： 2017-06-28 10:22:11

原创

1350人浏览过

<!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>

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>

<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);

Calliper 文档对比神器

文档内容对比神器

查看详情

//改变属性内容,新增一个名字的属性
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)"/>

<input type="button" value="removeChild" onclick="doRemoveChild(this)"/>
</div>
</body>
</html>

以上就是文档对象模型的实例代码的详细内容，更多请关注php中文网其它相关文章！