JS它DOM

全栈程序员-用户IM • 2022年1月6日下午5:00 • 未分类

大家好，又见面了，我是全栈君，今天给大家准备了Idea注册码。

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

一、节点查找与操作

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

见导图：

JS它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操作为可读可写，计算样式仅仅供获取，不能进行改动。