遍历节点树

1,162 阅读2分钟

节点包含元素--> 元素节点 = DOM元素 子元素只有一个父元素,父元素可以有多个子元素

通过parentNode属性返回直系父节点。(parentNode是一个只读属性)

通过childNodes属性以类数组的形式返回所有子节点。(childNodes是一个只读属性)

  • 子节点类型(后面的阿拉伯数子为代表号便于封装)
  1. 元素节点 = 1
  2. 属性节点 = 2
  3. 文本节点 (text) = 3
  4. 注释节点 (comment) = 8
  5. document = 9
  6. DocumentFragment = 11

  • firstChild返回第一个子节点
  • lastChild返回最后一个子节点

文本节点和属性节点是没有子节点的如果使用获取子节点的属性返回的是null

遍历兄弟节点

  • previousSibling 属性返回上一个兄弟节点(只读)
  • nextSibling返回下一个兄弟节点 (只读)

遍历元素节点树属性(兼容性不好,很少用,一般封装上面的属性来达到同样的效果)

  • parentElement属性返回直系父元素节点。(IE9及以下不支持)
  • children属性返回所有子元素节点(IE7及以下不支持){childElementCount = children.length}
  • firstElementChild返回第一个子节点(IE9及以下不支持)
  • lastElementChild返回最后一个子节点(IE9及以下不支持)
  • previousElementSibling返回上一个兄弟元素节点(IE9及以下不支持)
  • nextElementSibling返回下一个兄弟元素节点(IE9及以下不支持)

少用不代表没用,该知道还是要知道哈~

  • nodeName属性:元素节点的nodeName,返回大写字符串(是个只读属性不能写

  • 插入两个方法
  1. toLowerCase()把字母字符串转为小写
  2. toUpperCase()把字母字符串转为大写


  • nodeValue属性: 返回节点的值 (属性、文本、注释可用nodeValue返回字符串,可读可写,而元素节点返回null)

我目前少见的两个方法:

  • getAttribute('属性'):获取元素属性
  • getAttributeNode('属性'):获取元素属性节点
  • getAttributeNode('属性').value:获取元素属性节点值
  • getAttributeNode('属性').NodeValue:获取元素属性节点值
元素常见属性(id、class、type、 value)、除外还有自定义属性 

转关于getAttribute()和setAttribute() www.cnblogs.com/yang-xiansen/p/10298708.html


重点:

  • nodeType:获取节点类型相应的编码,返回Number(当然它是只读的)
  • 元素节点--> 1
  • 用nodeType和childNodes封装一个children属性一样的方法:
<script type="text/javascript">
		var d = document.getElementsByTagName('div')[0];


		function elementChildren(node){
			var arr = [],
				children = node.childNodes;
			for(var i = 0; i < children.length; i++){
				var childItem = children[i];
				if(childItem.nodeType === 1){
					arr.push(childItem);
				}
			}
			return arr;
		}
		console.log(elementChildren(d));
	</script>	

  • hasChildNodes(): 该方法判断某个元素是否有子节点

本篇文章纯属于个人的学习总结,如果文章中出现错误或不严谨的地方,希望大家能够指出,谢谢!