DOM(1)
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<title>Index</title>
</head>
<body>
<div id="d-0-0">
<div id="d-1-1">
<div id="d-1-1-1"></div>
<div id="d-1-1-2"></div>
</div>
<div id="d-1-2"></div>
<div id="d-1-3"></div>
</div>
<script type="text/javascript">
var d = document.getElementById('d-1-1')
var d2= document.getElementsByTagName('div')
console.log(
d.childNodes[0]
)
console.log( d.childNodes.item(1)
)
console.log(
d.childNodes.length
)
//*************nodelist转换为数组*************
function convertToArrary(nodes){
var array = null;
try{
array = Array.prototype.slice.call(nodes,0) //针对非IE浏览器
}catch(ex){
array = new Array();
for(var i=0,len=nodes.length;i<len;i++){
array.push(nodes[i]);
}
}
console.log(array)
return array;
}
convertToArrary(d2)
console.log(d.firstChild)
/**************node类型 常用操作**************
firstChild //第1个
parentNode //父节点
nextSibling //下1个
previousSibling //上1个
lastChild //最后1个
childNodes //所有子节点
d.childNodes.item(1) = d.childNodes[0]
hasChildNodes() //节点包含1个或者多个节点情况下返回true
ownerDocument //可返回某元素的根元素
//*************插入节点方法： appendChild / insertBefore / replaceChild*************
//操作节点： appendChild()
//新增节点，用于向childeNodes列表的末尾添加一个节点。添加后,childNodes的新增节点，
父节点以及以前的最后一个子节点的关系指针都会相应得到更新
//更新完成后，appendChild() 返回新增的节点。
var pElement = document.createElement("p");
s = d.appendChild(pElement);
console.log(s==pElement);
/*
returnedNode = someNode.insertBefore(newNode,null) 插入后成为最后1个节点
alert(newNode == someNode.lastChild)
*/
/*
returnedNode = someNode.insertBefore(newNode,someNode.firstChild) 插入后成为第1个节点
alert(returnedNode == newNode)
alert(newNode == someNode.firstChild)
*/
/*************替换 移除节点： replaceChild / removeChild *************
//替换第1个子节点
var returnedNode = someNode.replaceChild(newNode,someNode.firstChild);
//替换最后1个子节点
returnedNode = someNode.replaceChild(newNode,someNode.lastChild);
//移除第1个子节点
var returnedNode = someNode.removeChild(someNode.firstChild);
//移除最后1个子节点
returnedNode = someNode.removeChild(someNode.lastChild)
//克隆
cloneNode(true) 深度复制 也就是复制节点以及其整个子节点树
cloneNode(false) 浅复制，只复制节点本身
//mormalize() 处理文档树中的文本节点
*/
/************Document 类型**************/
nodeValue //null
nodeType //9
nodeName //#document
parentNode //null
var html = document.documentElement //html
var html = document.childNodes[0]
var html = document.firstChild
var body = document.body
//取得完整的URL
document.URL
//取得域名
document.domain
//取得来源的页面
document.referrer
==========================================================
/*************** document类型 查找元素 ***************/
var c = document.forms; //这是一个 HTMLCollection 对象
var address = c.namedItem("address"); //查找 <form name="address">
var payment = c["payment"]; //更简单的语法：查找 <form name="payment">
var login = c.login; //这样也是有效的：查找 <form name="login">
对HTMLCollection而言,我们可以向方括号中传入数值或字符串形成的索引值。在后台，对数值索引的元素提供了便利。
images['myImage'] = images.namedItem('myItem')
images[0].src = images.item(0).src
/*************** 查找元素 ***************/
==========================================================
/************************** Element类型 **********************/
nodeValue //null
nodeType //1
nodeName //标签名
parentNode //element或者document
/**************取得特性 getAttribute / 对象.属性***************/
div.id // 总结在下方
div.className
div.title
div.dir
div.lang
div.getAttribute('id')
div.getAttribute('class')
div.getAttribute('data-url') //underfined IE除外
/**************设置特性 setAttribute / 对象.属性***************/
div.setAttribute('id','someOtherId')
div.setAttribute('class','ft')
div.setAttribute('data-url','www.163.com')
div.myColor = 'red'
div.setAttribute('myColor','green') //null IE除外
********* DOM添加一个自定义属性，该属性不会自动成为元素的特性。
********* 自定义属性在IE中会被当做元素的特性。
/**************移除 removeAttribute
IE6及以前版本不支持
***************/
div.removeAttribute()
/************* NamedNodeMap 对象参考手册 针对单个元素
attributes / nodeName / nodeValue / getNamedItem / setNamedItem ****************/
var div = document.getElementById('d-0-0')
var div2 = div.attributes.getNamedItem('id').nodeValue
/***简写方式***/
var div2 = div.attributes['id'].nodeValue
console.log(div2)
遍历出所有属性 方法 attributes[i].nodeName attributes[i].nodeValue
/*****************总结：设置特性方法：************/
div.id = 'nameId' //推荐
div.getAttribute('id')
div.setAttribute('id','someOtherId')
div.attributes.getNamedItem('id') 等于 div.attributes['id']
div.attributes[0]
/****************创建元素******************/
var div = document.createElement('div');
div.id = 'myNewDiv';
div.className = 'box';
由于新元素尚未被添加到文档树中，因此设置这些特性不会影响浏览器的显示。
document.body.appendChild(div)
/*******仅IE支持：******/
var div = document.createElement('<div id=\"myNewDiv\" class=\"box\"></div>')
创建元素的BUG：IE7及更早的版本
1、不能设置动态创建的iframe元素的name特性
2、不能通过表单的reset()方法重设动态创建的input元素
3、动态创建的type特性值为"reset"的button元素重设不了表单;
4、动态创建一批name相同的单选按钮彼此毫无关系
/*******IE7及以下浏览器使用：******/
上述问题都可以通过在createElement()中指定完整的HTML标签来解决
if(client.browser.ie && client.browser.ie <= 7){
var iframe = document.createElement('<iframe name=\"myFrame\"></iframe>')
var input = document.createElement('<input type=\"checkbox\"></input>')
var button = document.createElement('<button type=\"reset\"></button>')
var radio1 = document.createElement('<input type=\"radio\" name=\"choice\" value=\"1\"></button>')
var radio2 = document.createElement('<input type=\"radio\" name=\"choice\" value=\"2\"></button>')
}
/*******IE7及以下浏览器使用：******/
==========================================================
/************ TEXT节点 ***********/
nodeValue //文本
nodeType //3
nodeName //#text
parentNode //element
data 设置或返回元素或属性的文本
textNode.appendData(string) //将text添加到节点的末尾
textNode.deleteData(start,length)
start 必需。规定从何处开始删除数据。开始值以 0 开始
length 必需。规定删除多少个字符。
insertData() 向节点中插入数据
replaceData() 替换节点中的数据
splitText() 把一个 Text 节点分割成两个。
substringData() 方法从文本节点中获取数据。
data 设置或返回元素或属性的文本
length 返回元素或属性的文本长度
1、创建文本节点
var textNode = document.createTextNode("Hello world");
element.appendChild(textNode)
======================================================
normalize() 方法 //normalize() IE6会导致崩溃
合并相邻的 Text 节点并删除空的 Text 节点。
element 2个文本节点
element.childNodes.length //2
element.normalize();
element.childNodes.length //1
======================================================
分割文本节点
splitText(9)
==========================================================
/************** comment类型 *********************/
nodeValue //注释内容
nodeType //8
nodeName //#comment
parentNode //Element或Document
data //设置或返回元素或属性的文本
//创建注释节点
var comment = document.createComment('A comment ');
==========================================================
/************** CDATASection 类型 *********************/
基于XML文档
nodeValue //CDATA区域的内容
nodeType //4
nodeName //#cdata-section
parentNode //Element或Document
==========================================================
/************** DocumentType 类型 *********************/
firefox safari opear 支持
nodeValue //null
nodeType //10
nodeName //doctype的名称
parentNode //Document
==========================================================
/************** Attr 类型 *********************/
nodeValue //特性的值
nodeType //11
nodeName //特性的名称
parentNode //null
getAttribute()
setAttribute()
removeAttribute()
Attr对象属性 : name value specified
specified 是一个布尔值，用以区别特性是在代码指定的，还是默认的。
==========================================================
呈现模式
document.compatMoe == 'CSS1Compat' //标准模式 strict mode
document.compatMoe == 'BackCompat' //混杂模式 quirks mode
//IE新属性
document.documentMode
===========================================================
滚动
scrollIntoView(alignWithTop) //滚动浏览器窗口或容器元素 *所有浏览器都实现了这个方法
scrollIntoViewIfNeeded(alignWithCenter) //只在当前元素在适口中不可见的情况下，才滚动浏览器窗口或容器元素，最终让当前元素可见。如果当前元素在视口中可见，这方法什么也不做。如果可选的alignCenter参数设置为true，则表示尽量将元素显示在视口中部(垂直方向). safari和chrome实现了这方法。
scrollByLines(lineCount) //safari和chrome实现了这方法。
scrollByPages(pageCount) //safari和chrome实现了这方法。
scrollIntoView和scrollIntoViewIfNeeded作用是元素的窗口，而scrollByLines和scrollByPages影响的是元素自身。
document.body.scrollByLines(5) //将页面主题滚动5行
document.forms[0].scrollIntoView() //确保当前元素可见
document.images[0].scrollIntoViewIfNeeded() //确保只在当前元素不可见的情况下使其可见
document.body.scrollByPages(-1) //将页面主体往回滚动1页
======================children========================
children属性与childNodes是相同的。
var childCount = element.children.length;
var firstChild = element.children[0];
除了Firefox之外，其他浏览器都支持children集合。
IE中的children集合会包含注释节点。
=======================================================
//来确定某个给定的节点是不是另一个节点的后代。
contains //IE支持
compareDocumentPoistion() //Firefox
=======================================================
innerText //永远只会生成当前节点的一个子文本节点 ********火狐不支持******
textContent //火狐 safari opera chrome支持
innerHTML //IE和Opera 常常把所有标签转换为大写
而Safari、Chrome和firefox 则以文档中指定的形式返回HTML--包括空格和缩进
innerHTML也有一些限制。首先，在多数浏览器中，通过innerHTML插入的<script>标签元素不会被执行。
IE是唯一支持这种操作的浏览器。条件是必须指定defer特性。
插入隐藏input为首选
div.innerHTML='<input type="hidden"><script defer>alert(1)</script>'
插入style做法： //查找资料 P237页 高级javascript第2版
//针对Opear 火狐 IE
div.innerHTML="_<style type=\"text/css\">body{.....}</style>"
div.removeChild(div.firstChild);
//针对safari 和 chrome
document.getElementsByTagName('head')[0].appendChild('div.firstChild')
不是所有元素都有innerHTML属性。不支持innerHTML的元素有
<col>
<colgroup>
<framest>
<head>
<html>
<style>
<table>
<tbody>
<tfoot>
<title>
<tr>
=======================================================
outerText属性 //IE safari opera chrome 支持
读取信息与innerText一样。
div.outerText = 'hello world!'; 相当于
var text = document.createTextNode('hello world!');
div.parentNode.replaceChild(text,div)
=======================================================
outerHTML属性 //IE safari opera chrome 支持
=======================================================
使用innerTEXT innerHTML outerText outerHTML 替换子节点可能会导致浏览器的内存问题,尤其是在IE中。
=======================================================
JavaScript添加动态脚本
JavaScript编写动态脚本,也就是说利用JavaScript来动态的添加一段<script>代码，可以利用如下几种方式实现（主要考虑到浏览器的兼容差异）：
（1）设置url，此方法适用于所有浏览器
var scriptEle=document.createElement("script");
scriptEle.type="text/javascript";
scriptEle.src=".....";
document.body.appendChild(scriptEle);
（2）以子节点的方式，//此方法适用于非IE以外的其他主流浏览器 *****IE不支持
var scriptEle=document.createElement("script");
scriptEle.type="text/javascript";
scriptEle.appendChild(document.createTextNode("function sayHi(){alert('hi');}"););
document.body.appendChild(scriptEle);
（3）IE浏览器的实现方式(此方法适用于IE，Firefox，Opera和safari3.0之后的版本)
IE浏览器里将<script>视为一个特殊的元素，不允许DOM直接访问他的子节点，但是可以通过text属性来设置
JavaScript代码
var scriptEle=document.createElement("script");
scriptEle.type="text/javascript";
scriptEle.text="function sayHi(){alert('hi');}";
document.body.appendChild(scriptEle);
//Safari3.0之前的版本不能正确的支持text属性
【注意事项】由于Safari3.0之前的版本
不能正确的支持text属性，但是允许使用文本节点来指定代码，也就是上面的第二种方法。
（4）兼容所有浏览器的动态脚本方法如下（如果使用url建议采用第（1）种）：
function loadScript(code){
var scriptEle=document.createElement("script");
scriptEle.type="text/javascript";
try{
scriptEle.appendChild(document.createTextNode(code)); //IE不支持
}catch(ex){
scriptEle.text="function sayHi(){alert('hi');}"; //Safari3.0之前的版本不支持
}
document.body.appendChild(scriptEle);
}
=======================================================
JavaScript插入动态样式
我们以下面这个典型的<link>元素为例：
<link rel="stylesheet" type="text/css" href="style.css">
-----------------------------------------------------------
使用DOM代码可以很容易的动态创建出这个元素：
var link = document.createElement("link");
link.rel = "stylesheet";
link.type = "text/css";
link.href = "style.css";
var head = document.getElementsByTagName("head")[0];
head.appendChild(link);
function loadStyles(url) {
var link = document.createElement("link");
link.rel = "stylesheet";
link.type = "text/css";
link.href = url;
var head = document.getElementsByTagName("head")[0];
head.appendChild(link);
}
loadStyles("style.css")
---------------------------------------
<style>
body { background-color: red; }
</style>
按照相同的逻辑，下列DOM代码应该是有效的：
//代码可以在Firefox、Safrai、Chrome和Opera中运行，在****IE****中则会报错。
var style = document.createElement("style");
style.type = "text/css";
style.appendChild(document.createTextNode("body{background-color:red;}")); //IE不支持
var head = document.getElementsByTagName("head")[0];
head.appendChild(style);
var style = document.createElement("style");
style.type = "text/css";
try {
style.appendChild(document.createTextNode("body{background-color:red}"));
} catch (ex) {
style.styleSheet.cssText = "body{background-color:red}";
}
var head = document.getElementsByTagName("head")[0];
head.appendChild(style);
--------------------------------------------------------------------
function loadStyleString(css) {
var style = document.createElement("style");
style.type = "text/css";
try {
style.appendChild(document.createTextNode(css));
} catch (ex) {
style.styleSheet.cssText = css;
}
var head = document.getElementsByTagName("head")[0];
head.appendChild(style);
}
loadStyleString("body{background-color:red}");
============================================================
nodeList NamedNodeMap HTMLCollection
============================================================
框架和内嵌框架分别用HTMLFrameElement和HTMLIFrameElement表示，它们在DOM2级忠都有了一个新属性，
包括所有属性和方法。Opera,Firefox和Chrome支持这个属性。
IE8之前不支持框架中的contentDocument属性，但支持一个contentWidow的属性，该属性返回框架的window对象。
var iframe = document.getElementById('myIframe');
var iframeDoc = document.contentDocument || document.contentWindow.document;
所有浏览器都支持contentWindow
=============================================================
JavaScript访问元素样式
//包含着通过HTML的style特性指定的所有样式信息，但不包含与外部样式表或嵌入样式标经层叠而来的样式。
var myDiv = document.getElementById("myDiv");
myDiv.style.backgroundColor = "red";
myDiv.style.width = "100px";
myDiv.style.height = "200px";
myDiv.style.border = "5px solid black";
alert(myDiv.style.backgroundColor);
alert(myDiv.style.width);
alert(myDiv.style.height);
CSSFloat //DOM
styleFloat //IE
“DOM2级样式”规范规定样式对象上相应的属性名应该是CSSFloat；Firefox、Safari、Opera和Chrom都支持这个属性，
而IE支持的则是styleFloat。
*************** DOM样式属性 //IE只支持cssText ****************
//================以下只能获取到style元素中的样式 不能获取到CSS样式表里样式===================
cssText：访问style特性中的css代码。 //获取元素style中属性
cssText：返回整条规则对应的文本。由于浏览器对样式表的内部处理方式不同，返回的文本可能会与样式表中实际的文本不一样；Safari始终都会将文本转换成全部小写。
myDiv.style.cssText = 'width:25px'
alert(myDiv.style.cssText)
---------------------------------------------------------------------------------------
length： 应用给元素的css属性数量。
item(index)：返回给定位置的CSS属性的名称。
for(var i=0;len=myDiv.style.length;i<len;i++){
var prop = myDiv.style[i] ==== //myDiv.style.item(i) //返回所有属性名
var value = myDiv.style.getPropertyValue(prop);
alert(prop) 取得myDiv中样式属性的值
var value = myDiv.style.getPropertyCSSValue(prop)
//safarie3 chrome 支持
//getPropertyCSSValue
//getPropertyCSSValue返回2个属性:cssText和cssValueType
//其中cssText的值与getPropertyValue()返回的值相同。
//cssValueType属性则是一个数值常量，表示值的类型：0表示继承的值，1表示基本值，2表示值列表，3表示自定义值
myDiv.style.removeProperty('border')
//removeProperty(propertyName)：从样式中删除给定属性。
}
parentRule：表示css信息的CSSRule对象。
parentRule：如果当前规则是导入的规则，这个属性引用的就是导入规则；否则这个值是null。//IE不支持这个属性。
getPropertyCSSValue(propertyName)：返回包含给定属性值的CSSValue对象，
含两个属性cssText和cssValueType。 //safarie3 chrome 支持
getPropertyValue(propertyName)：返回给定属性的字符串值 //IE不支持这个属性。
removeProperty(propertyName)：从样式中删除给定属性。 //IE不支持这个属性。
getProperytPriority(propertyName)：如果给定的属性使用了!important设置，则返回“important”，否则返回空字符串。
setProperty(propertyName, value, priority)：将给定属性设置为相应的值，并加上优先权标志（“important”或者一个空字符串）。
style：一个CSSStyleDeclaration对象，可以通过它设置和取得规则中特定的样式值。
type：表示规则类型的常量值。对于样式规则，这个值是1。//IE不支持这个属性。
parentStyleSheet：当前规则所属的样式表。//IE不支持这个属性。
selectorText：返回当前规则的寻泽扶文本。//IE不支持这个属性。
一个 HTMLElement 的 style 属性是一个可读可写的 CSS2Properties 对象，就好像 CSSRule 对象的 style 属性一样。
不过，Window.getComputedStyle() 的返回值是一个 CSS2Properties 对象，其属性是只读的。
========================================================================================
//================ 计算后的样式是只读的 以下能获取到CSS样式表里样式==================
var computedStyle = document.defaultView.getComputedStyle(myDiv, null); //DOM IE不支持 如果不需要伪元素信息，第二个参数可以是null。
var computedStyle = myDiv.currentStyle; //IE
“DOM2级样式”增强了document.defaultView，提供了getComputedStyle()方法。
这个方法接受两个参数：要取得计算样式的元素和一个伪元素字符串（例如“:after”）。
如果不需要伪元素信息，第二个参数可以是null。
getComputerStyle()方法返回一个CSSStyleDeclaration对象，其中包含当前元素的所有计算的样式。以下面的HTML页面为例：
<style>
#myDiv {
background-color:blue;
width:100px;
height:200px;
}
</style>
<div id ="myDiv" style="background-color:red; border:1px solid black"></div>
<script>
var myDiv = document.getElementById("myDiv");
var computedStyle = document.defaultView.getComputedStyle(myDiv, null);
alert(computedStyle.backgroundColor); //"red"
alert(computedStyle.width); //"100px"
alert(computedStyle.height); //"200px"
alert(computedStyle.border); //在某些浏览器中是“1px solid black”
computedStyle.border 不会在所有浏览器中都返回值，
但computedStyle.borderLeftWidth则会返回值。
</script>
需要注意的是，即使有些浏览器支持这种功能，但表示值的方式可能会有所区别。
例如，Firefox和Safari会返回将所有颜色转换成RGB格式。
因此，即使getComputedStyle()方法时，最好多在几种浏览器中测试一下。
IE不支持getComputedStyle()方法，但它有一种类似的概念。
在IE中，每个具有style属性的元素还有一个currentStyle属性。
这个属性是CSSStyleDeclaration的实例，包含当前元素全部计算后的样式。
取得这些样式的方法差不多，如下：
<script type="text/javascript">
var myDiv = document.getElementById("myDiv");
var computedStyle = myDiv.currentStyle;
alert(computedStyle.backgroundColor); //"red"
alert(computedStyle.width); //"100px"
alert(computedStyle.height); //"200px"
alert(computedStyle.border); //undefined
与DOM版本的方式一样，IE也没有返回border样式，因为这是一个综合属性。
====================================================================
操作样式表 StyleSheets
var supportsDOM2StyleSheets = document.implementation.hasFeature('StyleSheets','2.0')
CSSStyleSheet继承自StyleSheet，后者可以作为一个基础接口来定义非CSS样式表。从StyleSheet接口继承而来的属性如下。
disabled：表示样式表是否被禁用的布尔值。这个属性是可读/写的，将这个值设置为true可以禁用样式表。
href：如果样式表是通过<link>包含的，则是样式表的URL；否则，是null。
media：当前样式表支持的所有媒体类型的集合。与所有DOM集合一样，这个集合也有一个length属性和一个item()方法。也可以使用方括号语法取得结合中特定的项。如果集合是空列表项，表示样式表适用于所有媒体。在IE中，media是一个反映<link>和<style>元素media特性的字符串。
ownerNode：指向拥有当前样式表的节点的指针，样式表可能是在HTML中通过<link>或<style>引入的。
如果当前样式表是其它样式表通过@import导入的，则这个属性值为null。 //IE不支持这个属性。
parentStyleSheet：在当前样式表是通过@import导入的情况下，这个属性是一个指向导入它的样式表的指针。
title：ownerNode中的title属性的值。
type：表示样式表类型的字符串。对CSS样式表而言，这个字符串是“type/css”。
--------------------------------------------------------------------------
除了disabled属性之外，其它属性都是只读的。在支持以上所有这些属性的基础上，CSSStyleSheet类型还支持下列属性和方法：
cssRules：样式表中包含的样式规则的集合。//IE不支持这个属性，但有一个类似的rules属性。
ownerRule：如果样式表是通过@import导入的，这个属性就是一个指针，指向表示导入的规则；否则，值为null。//IE不支持这个属性。
deleteRule(index)：删除cssRules集合中指定的位置的规则。//IE不支持这个方法，但支持一个类似的removeRule()方法。
insertRule(rule,index)：向cssRules集合中指定的位置插入rule字符串。//IE不支持这个方法，但支持一个类似的addRule()方法。
-----------------------------------------------------------------------------------
获取样式表对象
方法一：
应用于文档的所有样式表是通过document.styleSheets集合来表示。
通过这个集合的length属性可以获知文档中样式表的数量，而通过方括号语法或itme()方法可以访问每一个样式表。来看一个例子：
var sheet = null;
for (var i = 0, len = document.styleSheets.length; i < len; i++) {
sheet = document.styleSheets[i];
alert(sheet.href);
}
同浏览器的document.styleSheets返回的样式表也不同。
所有浏览器都会包含<style>元素和rel特性被设置为“stylesheet”的<link>元素引入的样式表。
IE和Opera也包含rel特性被设置为“alternate stylesheet”的<link>元素引入的样式表。
方法二：
也可以直接通过<link>或<style>元素取得CSSStyleSheet对象。
DOM规定了一个包含CSSStyleSheet对象的属性，名叫sheet；
//除了IE，其它浏览器都支持这个属性。IE支持的是styleSheet属性。
想要在不同的浏览器中都能取得样式表对象可以使用下列代码：
function getStyleSheet(element) {
return element.sheet || element.styleSheet; //dom:sheet IE:styleSheet
}
var link = document.getElementsByTagName("link")[0];
var sheet = getStyleSheet(link);
alert(sheet.href);
这里的getStylesheet()返回的样式表对象与document.styleSheets集合中的样式表对象相同。
==================================================================================
CSSRule对象表示样式表中的每一个规则。实际上，CSSRule是一个供其它多种类型继承的基类型，其中最常见的就是CSSStyleRule类型，表示样式信息。CSSStyleRule对象包含下列属性：
cssText：返回整条规则对应的文本。由于浏览器对样式表的内部处理方式不同，
返回的文本可能会与样式表中实际的文本不一样；Safari始终都会将文本转换成全部小写。//IE不支持这个属性。
parentRule：如果当前规则是导入的规则，这个属性引用的就是导入规则；否则这个值是null。//IE不支持这个属性。
parentStyleSheet：当前规则所属的样式表。//IE不支持这个属性。
selectorText：返回当前规则的寻泽扶文本。
style：一个CSSStyleDeclaration对象，可以通过它设置和取得规则中特定的样式值。
type：表示规则类型的常量值。对于样式规则，这个值是1。//IE不支持这个属性。
其中最常用的属性是
csstext、
selectorText和
style。
cssText属性style.cssText属性类似，
但并不相同。前者包含选择符文本和围绕样式信息的花括号，后者只包含样式信息。
此外，cssText是只读的，而style.cssText也可以被重写。
----------------------------------------------------------------------------------
大多数情况下，仅使用style属性就可以满足所有操作样式规则的需求了。这个对象就像每个元素上的style属性一样，我们可以通过它读取和修改该规则中的样式信息。以下面的CSS规则为例：
div.box {
width: 100px;
height: 200px;
background-color: blue;
}
假设这条规则位于页面中的第一个样式表中，而且这个样式表中只有这一条样式规则，那么通过下列代码可以取得这条规则的各种信息：
var sheet = document.styleSheets[0];
var rules = sheet.cssRules || sheet.rules; //取得规则列表
var rule = rules[0]; //取得第一条规则
alert(rule.selectorText); //"div.box";
alert(rule.style.cssText); //完整的CSS代码
alert(rule.style.backgroundColor); //"blue"
alert(rule.style.width); //"100px"
alert(rule.style.height); //"200px"
</script>
</script>
</body>
</html>
