JS它DOM

转载

mob60475703cce6 2015-07-29 20:38:00

文章标签 css样式 css 浏览器兼容元素节点赋值 文章分类 代码人生

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

一、节点查找与操作

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

见导图：

JS它DOM_css

二、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。而以下提供的几种方法，针对于不同的因素。会有不同的结果，仅依据需求使用就可以

JS它DOM_css样式_02