首页 > 代码库 > JS之DOM

JS之DOM

2024-07-30 13:47:57   212人阅读

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页面中的一切都是建立在这些元素的基础之上的。


JS之DOM


联系
我们