Dom操作html详细

                <p name='pn'>xxx</p>
		<p name='pn'>xxx</p>
		<p name='pn'>xxx</p>
		<p name='pn'>xxx</p>
		<ul>
			<li id="liID">子节点</li>
			<li>子节点1</li>
			<li id="delete">子节点2</li>
                        <li>前面的子节点将被删除 节点3</li>
		</ul>

		<a id="aid" title="a标签的title">忘记我见过</a>
		<script>
	//ByName
			var nameA = document.getElementsByName('pn');
			document.write("<br/>通过name获取元素" + nameA);
			nameA[0].innerHTML = "Hello";
	//ByTagName
			var nameB = document.getElementsByTagName('p');
			document.write("<br/>通过Tagname获取元素" + nameB);
			nameB[1].innerHTML = "Hello";
	//获取元素属性
			function getAttr() {
				var node = document.getElementById("aid");
				var attr = node.getAttribute('title');
				document.write("<br/>获取元素属性:" + attr);
			}
			getAttr();
	//设置元素的属性
			function setAttr() {
				var node = document.getElementById('aid');
				node.setAttribute('href', 'http://www.baidu.com');
			}
			setAttr();
	//访问子节点
		    function getChildNode(){
		    	  var childNode = document.getElementsByTagName('ul')[0].childNodes;
		    	  document.write("<br/>"+childNode.length);
		    	  //空白也算入了节点
		    	  childNode[1].innerHTML= "第一个子节点增加";

		    }
		    getChildNode();

　　

//访问父节点
			function getParentNode() {
				var node = document.getElementById('liID');
				document.write("<br/>访问父节点:" + node.parentNode.nodeName);
			}
			getParentNode();
//创建节点
			function createNode() {
				var body = document.getElementsByTagName('body')[0];
				var btn = document.createElement("input");
				btn.type = 'button';
				btn.value = "按钮";
				document.write("<br/>");
				body.appendChild(btn);
			}
			createNode();

//添加节点
			function inserNode(){
				var parentNode = document.getElementsByTagName('ul')[0];
				var beforeNode = document.getElementById('liID');
				var newNode = document.createElement('li');
				newNode.innerHTML = "老子是刚加的";
				parentNode.insertBefore(newNode,beforeNode);
			}
			inserNode();

//删除节点
			function removeNode(){
				var parentNode = document.getElementsByTagName('ul')[0];
				var needMoveNode =document.getElementById('delete');
				parentNode.removeChild(needMoveNode);
			}
			removeNode();
//获取元素size
			function getSize(){
				var parentNode = document.getElementsByTagName('ul')[0];
				var width = parentNode.offsetWidth;
				var height =parentNode.offsetHeight;
				document.write("<br/>width"+width+"Height"+height);
			}
			getSize();