JS它DOM

DOM：document object model。文档对象模型。它主要由许多节点。而基于JS对象的一切视角，DOM核心是节点对象和操作方法的属性。从下面三方面来介绍DOM。

一、节点查找与操作

这部分表面看起来有些碎，但细细挖掘还是有非常大规律可循的。

见导图：

二、DOM之CSS样式

对于这部分的内容，涉及到的也是CSS样式的获取和操作。

获取：

1.行内：

	var box=document.getElementById('box');
	alert(box.style.width);

2.rule获取

	var sheet=document.styleSheets[0];
		var rule=(sheet.cssRules|| sheet.rules)[0];
		alert(rule.style.width);

3.计算获取  

	var style = window.getComputedStyle ?
	window.getComputedStyle(box, null) : null || box.currentStyle;//考虑各浏览器兼容  
	style.width;
       style.height

操作：实现跨浏览器兼容操作

1.插入

functioninsertRule(sheet,selectorText,cssText,position){
    if(sheet.insertRule){
      sheet.insertRule(selectorText+'{'+cssText+'}',position);                                                                     }else if(sheet.addRule){                                                                                                              sheet.addRule(selectorText,cssText,position);
}

2.删除

function deleteRule(sheet,position){

 if (sheet.deleteRule){ //假设这样的方式存在
    sheet.deleteRule(position); //非IE
}else if(sheet.removeRule){
	sheet.removeRule(position);
}

3.改动：通过赋值，来改动CSS样式

		window.onload=function(){
			//跨浏览器兼容rules
			var sheet=document.styleSheets[0];
			var rules=sheet.cssRules || sheet.rules;
			var rule1=rules[0];
			rule1.style.color='green'; //这样的能够在链接CSS样式中改动详细的属性
			var box=document.getElementById('box');
			box.style.color='blue'; //这样的方法改动的是行内样式
		}

小结：针对于CSS样式不管是属性获取还是对它操作。都能够分为三种情况行内，rule，和计算。而这三种仅仅有行内和rule操作为可读可写，计算样式仅仅供获取，不能进行改动。

三、元素尺寸和位置

通过上述CSS样式的方式，我们也是能够获取DOM中各个元素的尺寸和位置的，但有一个弊端：当元素中存在pading,margin这些样式设计时，这些方法便不能获得一些元素真正的大小和位置。

JS中提供了专门儿用于获取元素尺寸和大小的方法。

实际大小：针对于元素的实际大小。主要与四个因素有关，padding。margin，border，scroll。而以下提供的几种方法，针对于不同的因素。会有不同的结果，仅依据需求使用就可以

周边大小：

小结：DOM是JS学习的一个核心内容。当中涉及到的元素节点的属性和基本操作也是前台页面中最重要的组成，通过这些，才干使JS中基于对象的思想发挥作用。能够说，B/S UI页面中的一切都是建立在这些元素的基础之上的。

版权声明：本文博客原创文章，博客，未经同意，不得转载。