JS:DOM 常用属性

1.childNodes  返回包含被选节点的子节点的 NodeList
                如果选定的节点没有子节点，则该属性返回不包含节点的 NodeList。
                如需循环子节点列表，使用 nextSibling 属性，要比使用父对象的 childNodes 列表效率更高。
            2.firstChild     返回被选节点的第一个子节点,如果选定的节点没有子节点，则该属性返回 NULL。
            3.lastChild     可返回文档的最后一个子节点。
            4.ownerDocument 可返回某元素的根元素。
            5.parentNode     可返回某节点的父节点。如果指定的节点没有父节点则返回 null。
            6.previousSibling 可返回某节点之前紧跟的节点（处于同一树层级）
                        返回节点以节点对象返回。注意：如果没有此节点，那么该属性返回 null。
            7.nextSibling      可返回某个元素之后紧跟的节点（处于同一树层级中）。
                        返回节点以节点对象返回。注意： 如果元素紧跟后面没有节点则返回 null.
            
            //与之对应的查找元素节点
            1.firstElementChild 返回被选节点的第一个子元素节点,如果选定的节点没有子元素节点，则该属性返回 NULL。
            2.lastElementChild  返回被选节点的最后一个子元素节点,如果选定的节点没有子元素节点，则该属性返回 NULL。
            3.previousElementSibling 可返回某节点之前紧跟的元素节点（处于同一树层级）注意：如果没有此元素节点，那么该属性返回 null。
            4.nextElementSibling  可返回某节点之后紧跟的元素节点（处于同一树层级）注意：如果没有此元素节点，那么该属性返回 null。
            5.children  属性返回元素的子元素的集合，是一个 HTMLCollection 对象。只返回元素节点
            6.parentNode     可返回某节点的父节点。如果指定的节点没有父节点则返回 null 。

<div id="box">
			<div class="d1">
				文本
				<span>我是span</span>
				文本
				<p>ppppppppppppppp</p>
			</div>
			<div class="d2">
				文本
				<span>我是span</span>
			</div>
		</div>
		
		<script type="text/javascript">
			var d1 = document.querySelector(".d1");
			var d2 = document.querySelector(".d2");
			
			console.log("childNodes:",d1.childNodes);
			console.log("firstChild:",d1.firstChild);
			console.log("lastChild:",d1.lastChild);
			console.log("ownerDocument:",d1.ownerDocument);
			console.log("ownerDocument:",d2.ownerDocument);
			console.log("previousSibling:",d2.previousSibling);
			console.log("nextSibling:",d1.nextSibling);
			
			console.log("------------------------------------------");
			
			console.log("children:",d1.children);
			console.log("firstElementChild:",d1.firstElementChild);
			console.log("lastElementChild:",d1.lastElementChild);
			console.log("parentNode:",d1.parentNode);
			console.log("previousElementSibling:",d2.previousElementSibling);
			console.log("nextElementSibling:",d1.nextElementSibling);
			
			
			
			
			
		</script>