JS DOM对象控制HTML元素_js body dom 控制元素-优快云博客

本文介绍了如何使用JavaScript操作DOM元素，包括获取与设置元素属性、创建新的DOM节点并将其添加到文档中。通过实例展示了getAttribute与setAttribute方法的应用，以及如何通过createElement与appendChild方法创建和插入新元素。

<p id="p"></p> //id唯一

<p name="p"></p> //name不唯一 (数组)

<a></a> //tagname (数组)

getAttribute() --获取元素属性

setAttribute() --设置元素属性

<!DOCTYPE html>
<html>
<head>
	<title></title>
	<meta charset="utf-8">
</head>
<body>
	<a id="aid" title="yeah">hi</a>
	<a id="aid2"></a>
	<script type="text/javascript">
		function getAttr(){
			var b = document.getElementById("aid");
			var a = b.getAttribute("title");
			alert(a);
		}
		function setAttr(){
			var c = document.getElementById("aid2");
			var d = c.setAttribute("title","233");
			var e = c.getAttribute("title");
			alert(e);
		}
		setAttr();
	</script>
</body>
</html>

childNodes 访问子节点

parentNodes 访问父节点 nodeName nodeType

<!DOCTYPE html>
<html>
<head>
	<title></title>
	<meta charset="utf-8">
</head>
<body>
	<script type="text/javascript">
		function createNode(){
			var body = document.body;
			var input = document.createElement("input");
			input.type = "button";
			input.value = "按钮";
			body.appendChild(input);
		}
		createNode();
	</script>
</body>
</html>