HTML文档结点的遍历

            有这么个需求，实现文档字体放缩的功能。思路很简单，遍历文档结点，将所有元素的font-size属性设置成原来的多少倍来达到放大的目的。需要注意的是，有的元素刚开始并没有设置style和font-size属性，那么就需要给它一个默认值。

        从上面可以知道，重点就是文档结点的遍历，刚开始通过chidNodes进行遍历，代码如下：

/*
*改变字体大小
*element  元素
*scale    缩放倍数
*/
function fontChange(element,scale){
	for(var i=0;i2){//使用的是px单位
			var changeSize;
			changeSize=size.substring(0,size.length-2)*scale+size.substring(size.length-2);
			ele.style.fontSize=changeSize;
		fontChange(ele,scale);
		}
	}

设置默认字体的函数setDefaultFontSize代码如下：

/*
     *设置元素默认字体
	*/
	function setDefaultFontSize(node){
		var tagName = node.nodeName.toString();
		switch(tagName){
			case "H1":
				node.style.fontSize = "24px";
				break;
			 case "H2":
			node.style.fontSize = "18px";
				break;
				case "H3":
				node.style.fontSize = "14px";
					break;
				case "H4":
					node.style.fontSize = "12px";
					break;
				case "P":
					node.style.fontSize = "12px";
					break;
				case "SPAN":
					node.style.fontSize = "12px";
					break;
				default:
					break;
		}
	}

这里并没有列出所有的元素，因为我的页面只有上面的元素可能没有设置style或者font-size。

后来测试的时候，发现nodeName里面竟然有"#Text"，也就是说连文本结点也遍历了。不想遍历文本结点而只遍历元素结点怎么办？还好结点有个nodeType属性，当nodeType=1的时候就是元素结点。于是修改代码如下：

/*
*递归改变字体大小
*element  元素
*scale    缩放倍数
*/
function fontChange(element,scale){
	for(var i=0;i2){
			var changeSize;
			changeSize=size.substring(0,size.length-2)*scale+size.substring(size.length-2);
			ele.style.fontSize=changeSize;
	  	}
		fontChange(ele,scale);
		}
	}

这样就好了。

再后来发现可以直接通过chidren来遍历文档，而且children只包含元素结点。代码如下：

/*
*递归改变字体大小
*element  元素
*scale    缩放倍数
*/
function fontChange(element,scale){
	for(var i=0;i2){
				var changeSize;
					changeSize=size.substring(0,size.length-2)*scale+size.substring(size.length-2);
					ele.style.fontSize=changeSize;
				}
			}
			fontChange(ele,scale);
		}
	}

后来一搜才发现childNodes和children的区别，同时也了解了Node和Element的区别：

       Node(节点)是DOM层次结构中的任何类型的对象的通用名称，Node有很多类型，如元素结点，属性结点，文本结点，注释结点等，通过NodeType区分，例如元素结点是1,文本结点是3。Element继承了Node类，也就是说Element是Node多种类型中的一种，即当NodeType为1时Node即为ElementNode，另外Element扩展了Node，Element还拥有id、class、children等属性。也就是说children是Element的属性，childNodes是Node的属性。

       具体可以参考这篇博客：node与element,childNodes与children的区别。