DOM的一些小总结

最新推荐文章于 2025-08-23 08:00:22 发布

weixin_34148508

最新推荐文章于 2025-08-23 08:00:22 发布

阅读量53

点赞数

CC 4.0 BY-SA版权

文章标签： xhtml

原文链接：http://www.cnblogs.com/xy404/p/3688735.html

HTML DOM的结构:可以把HTML看成一个个的节点。

节点：

HTML DOM对象 -- 方法和属性

一些DOM 对象方法

nodeName 属性

nodeValue 属性

nodeType：节点的类型。

<body>
<div id = "t"><input type = "hidden" id = "sss" value = "aaa"></div>
</body>
<script>
var d = document.createAttribute("good");
document.getElementById("sss").setAttributeNode(d);
alert(document.getElementById("t").innerHTML)
</script>

　　有点懂，但还是有点不明白。

<!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" xml:lang="en">
<head>
	<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
	<title>DOM-1</title>
	<script>
		window.onload = function (){
			var oUl = document.getElementById("ul1");
			//alert(oUl.innerHTML);
			//alert(oUl.parentNode.parentNode.parentNode.nodeName);	//#document
			//alert(oUl.childNodes[0].nodeName);	//#text
			//alert(oUl.children[0].nodeValue);	//null
			//alert(oUl.children[0].innerHTML);	//1111
			//alert(oUl.nodeType);	//1
			//alert(oUl.childNodes[0].nodeType);	//3
			//alert(oUl.parentNode.parentNode.parentNode.nodeType);	//9
			var oLi = document.createElement("li");

			//oid.innerHTML = "li1";
			oLi.innerHTML = "5555";
			//oUl.appendChild(oLi);
			oUl.insertBefore(oLi,oUl.children[2]);
			//oUl.removeChild(oLi);
			
			//
			//alert(oUl.getAttribute("id"));	//ul1
			oUl.setAttribute("class","fff");	//class="fff"

			var d = document.createAttribute("good");
			d.value = "abc";
			document.getElementById("sss").setAttributeNode(d);
			alert(oUl.innerHTML);
		}
	</script>
</head>
<body>
	<ul id="ul1">
		<li>1111</li>
		<li id="sss">2222</li>
		<li>3333</li>
		<li>4444</li>
	</ul>
</body>
</html>

转载于:https://www.cnblogs.com/xy404/p/3688735.html