DOM操作技巧-优快云博客

本文链接：https://blog.youkuaiyun.com/qq_37143499/article/details/54379610

本文介绍了如何使用JavaScript进行DOM操作，包括获取子节点、父节点、文本和元素节点的区别、定位节点等，同时展示了如何创建、追加、插入及删除节点。

获取子节点和父节点

		<script type="text/javascript">
		window.onload=function(){
			var oUl=document.getElementById('ul1');
			var onode=oUl.childNodes.length;
			
			alert(onode);
		}
		</script>

childNodes是数组有长度需要在后面加length

		<script type="text/javascript">
		window.onload=function(){
			var oUl=document.getElementById('ul1');
			alert(oUl.children.length);
		}
		</script>

children可以获取真正的子节点，并兼容包括IE6-8的浏览器

		<script type="text/javascript">
			window.onload=function(){
				var oUl=document.getElementById('ul1');
				var aA=oUl.getElementsByTagName('a');
				for(var i=0;i<aA.length;i++){
					aA[i].onclick=function(){
						this.parentNode.style.display='none';
					};
				}
			}
		</script>

parentNode

分辨文本和元素节点

		<script type="text/javascript">
		window.onload=function(){
			var oUl=document.getElementById('ul1');
			for(var i=0;i<oUl.children.length;i++){
				if(oUl.children[i].nodeType==1){
					oUl.children[i].style.background="red";
				}
			}
		}
		</script>

nodeType==1 元素节点

nodeType==3 文本节点

获取绝对定位的相对定位

		<script type="text/javascript">
		window.onload=function(){
			var oSon=document.getElementById('son');
			alert(oSon.offsetParent);
		}
		</script>

offsetparent定位当前变量的相对定位

firstElementChild（第一个子节点）

lastElementChild（最后一个子节点）

nextElementSibling

previousElementSibling

createElement(标签名) 创建一个节点
appendChild(节点) 追加一个节点
insertBefore(节点, 原有节点) 在已有元素前插入
removeChild(节点) 删除一个节点