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の違いを参照してください.