一、DOM对象控制HTML

    1.方法：

      getElementsByName()  获取name

      getElementsByTagName()  获取元素

      getAttribute()  获取元素属性

      setAttribute()  设置元素属性

      childNodes()  访问子节点

      parentNode()  访问父节点

      createElement()  创建元素节点

      createTextNode()  创建文本节点

      insertBefore()  插入节点

      removeChild()  删除节点

      offsetHeight()  网页尺寸

      scrollHeight()  网页尺寸  

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<body>
		<p name="pn">Hello</p>
		<p name="pn">Hello</p>
		<p name="pn">Hello</p>
		<p name="pn">Hello</p>
		<a id="aid" title="得到了A标签的属性">Hello</a>
		<a id="aid2">aid2</a>
		<ul>
			<li>1</li>
			<li>2</li>
			<li>3</li>
		</ul>
		<div id="div">
			<p id="pid">div的p元素</p>
		</div>
		<script>
			function getName(){
				var count = document.getElementsByTagName("p");
				alert(count.length);
				var p = count[0];
				p.innerHTML = "World";
			}
			
			function getAttr(){
				var anode = document.getElementById("aid");
				var attr = anode.getAttribute("title");
				alert(attr);
			}
			
			function setAttr(){
				var anode = document.getElementById("aid2");
				anode.setAttribute("title","动态设置a的title属性");
				var attr = anode.getAttribute("title");
				alert(attr);
			}
			
			function getChildNode(){
				var childnode = document.getElementsByTagName("ul")[0].childNodes;
				alert(childnode.length);	
				alert(childnode[0].nodeType);
				alert(childnode[1].nodeType);
			}
			
			function getParentNode(){
				var div = document.getElementById("pid");
				alert(div.parentNode.nodeName);
			}
			
			function createNode(){
				var body = document.body;
				var input = document.createElement("input");
				input.type = "button";
				input.value = "按钮";
				body.appendChild(input);
			}
			
			function addNode(){
				var div = document.getElementById("div");
				var node = document.getElementById("pid");
				var newNode = document.createElement("p");
				newNode.innerHTML = "动态添加第一个p元素";
				div.insertBefore(newNode,node);
			}
			
			function removeNode(){
				var div = document.getElementById("div");
				var p = div.removeChild(div.childNodes[1]);
			}
			
			function getSize(){
				var width = document.body.offsetWidth||document.documentElement.offsetWidth;
				var height = document.body.offsetHeight||document.documentElement.offsetHeight;
				alert(width+","+height);
			}
			getSize();
		</script>
	</body>
</html>