DOM总结

DOM总结

一．DOM类型

DOM基础课程中，我们了解了DOM的节点并且了解怎样查询和操作节点，而本身这些不同的节点，又有着不同的类型。

DOM类型
类型名 说明
Node 表示所有类型值的统一接口，IE不支持

Document    表示文档类型  

Element 表示元素节点类型  

Text    表示文本节点类型  

Comment 表示文档中的注释类型  

CDATASection    表示CDATA区域类型  

DocumentType    表示文档声明类型  

DocumentFragment    表示文档片段类型  

Attr    表示属性节点类型

Node类型

Node接口是DOM1级就定义了，Node接口定义了12个数值常量以表示每个节点的类型值。除了IE之外，所有浏览器都可以访问这个类型。

Node的常量

常量名 说明 nodeType值

ELEMENT_NODE    元素  1  

ATTRIBUTE_NODE  属性  2  

TEXT_NODE   文本  3  

CDATA_SECTION_NODE  CDATA   4  

ENTITY_REFERENCE_NODE   实体参考    5  

ENTITY_NODE 实体  6  

PROCESSING_INSTRUCETION_NODE    处理指令    7  

COMMENT_NODE    注释  8  

DOCUMENT_NODE   文档根 9  

DOCUMENT_TYPE_NODE  doctype 10  

DOCUMENT_FRAGMENT_NODE  文档片段    11  

NOTATION_NODE   符号  12

虽然这里介绍了12种节点对象的属性，用的多的其实也就几个而已。
alert(Node.ELEMENT_NODE); //1，元素节点类型值
alert(Node.TEXT_NODE); //2，文本节点类型值

我们建议使用Node类型的属性来代替1,2这些阿拉伯数字，有可能大家会觉得这样岂不是很繁琐吗？
并且还有一个问题就是IE不支持Node类型。

如果只有两个属性的话，用1，2来代替会特别方便，但如果属性特别多的情况下，
1、2、3、4、5、6、7、8、9、10、11、12，你根本就分不清哪个数字代表的是哪个节点。
当然，如果你只用1，2两个节点，那就另当别论了。
IE不支持，我们可以模拟一个类，让IE也支持。

if (typeof Node == 'undefined') {               //IE返回
    window.Node = {
        ELEMENT_NODE : 1,
        TEXT_NODE : 3
    };
}

Document类型

Document类型表示文档，或文档的根节点，而这个节点是隐藏的，没有具体的元素标签。
>
document; //document
document.nodeType; //9，类型值
document.childNodes[0]; //DocumentType，第一个子节点对象
document.childNodes[0].nodeType; //非IE为10，IE为8
document.childNodes[1]; //HTMLHtmlElement
document.childNodes[1].nodeName; //HTML

如果想直接得到标签的元素节点对象HTMLHtmlElement，不必使用childNodes属性这么麻烦，
可以使用documentElement即可。

document.documentElement;                   //HTMLHtmlElement

Element类型

Element类型用于表现HTML中的元素节点。在DOM基础那章，
我们已经可以对元素节点进行查找、创建等操作，元素节点的nodeType为nodeName为元素的标签名。
元素节点对象在非IE浏览器可以返回它具体元素节点的对象类型。
Text类型

Text类型用于表现文本节点类型，文本不包含HTML，或包含转义后的HTML。文本节点的nodeType为3。

在同时创建两个同一级别的文本节点的时候，会产生分离的两个节点。

var box = document.createElement('div');
var text = document.createTextNode('Mr.');
var text2 = document.createTextNode(Lee!);
box.appendChild(text);
box.appendChild(text2);
document.body.appendChild(box);
alert(box.childNodes.length);                   //2，两个文本节点

PS：把两个同邻的文本节点合并在一起使用normalize()即可。
box.normalize();                            //合并成一个节点

PS：有合并就有分离，通过splitText(num)即可实现节点分离。
box.firstChild.splitText(3);                    //分离一个节点

除了上面的两种方法外，Text还提供了一些别的DOM操作的方法如下：

var box = document.getElementById('box');
box.firstChild.deleteData(0,2);             //删除从0位置的2个字符
box.firstChild.insertData(0,'Hello.');          //从0位置添加指定字符
box.firstChild.replaceData(0,2,'Miss');         //从0位置替换掉2个指定字符
box.firstChild.substringData(0,2);              //从0位置获取2个字符，直接输出
alert(box.firstChild.nodeValue);                //输出结果

Comment类型

Comment类型表示文档中的注释。nodeType是8，nodeName是#comment，nodeValue是注释的内容。
>
var box = document.getElementById(‘box’);
alert(box.firstChild); //Comment

>
PS：在IE中，注释节点可以使用！当作元素来访问。
var comment = document.getElementsByTagName(‘!’);
alert(comment.length);

6.Attr类型
Attr类型表示文档元素中的属性。nodeType为11，nodeName为属性名，nodeValue为属性值。DOM基础篇已经详细介绍过，略。

DOM扩展

呈现模式
>
从IE6开始开始区分标准模式和混杂模式(怪异模式)，主要是看文档的声明。IE为document对象添加了一个名为compatMode属性，这个属性可以识别IE浏览器的文档处于什么模式如果是标准模式，则返回CSS1Compat，如果是混杂模式则返回BackCompat。
>
if (document.compatMode == ‘CSS1Compat’) {
alert(document.documentElement.clientWidth);
} else {
alert(document.body.clientWidth);
}

PS：后来Firefox、Opera和Chrome都实现了这个属性。从IE8后，又引入documentMode新属性，因为IE8有3种呈现模式分别为标准模式8，仿真模式7，混杂模式5。所以如果想测试IE8的标准模式，就判断document.documentMode > 7 即可。

2.滚动
DOM提供了一些滚动页面的方法，如下：
>
document.getElementById(‘box’).scrollIntoView(); //设置指定可见

3.children属性
由于子节点空白问题，IE和其他浏览器解释不一致。虽然可以过滤掉，但如果只是想得到有效子节点，可以使用children属性，支持的浏览器为：IE5+、Firefox3.5+、Safari2+、Opera8+和Chrome，这个属性是非标准的。
>
var box = document.getElementById(‘box’);
alert(box.children.length); //得到有效子节点数目

4.contains()方法
判断一个节点是不是另一个节点的后代，我们可以使用contains()方法。这个方法是IE率先使用的，开发人员无须遍历即可获取此信息。
>
var box = document.getElementById(‘box’);
alert(box.contains(box.firstChild)); //true

PS：早期的Firefox不支持这个方法，新版的支持了，其他浏览器也都支持，Safari2.x浏览器支持的有问题，无法使用。所以，必须做兼容。

在Firefox的DOM3级实现中提供了一个替代的方法compareDocumentPosition()方法。这个方法确定两个节点之间的关系。
>
var box = document.getElementById(‘box’);
alert(box.compareDocumentPosition(box.firstChild)); //20

关系掩码表
掩码 节点关系
>
1 无关(节点不存在)
>
2 居前(节点在参考点之前)
>
4 居后(节点在参考点之后)
>
8 包含(节点是参考点的祖先)
>
16 被包含(节点是参考点的后代)

PS：为什么会出现20，那是因为满足了4和16两项，最后相加了。为了能让所有浏览器都可以兼容，我们必须写一个兼容性的函数。
>

//传递参考节点(父节点)，和其他节点(子节点)
function contains(refNode, otherNode) {
//判断支持contains，并且非Safari浏览器
    if (typeof refNode.contains != 'undefined' && 
!(BrowserDetect.browser == 'Safari' && BrowserDetect.version < 3)) {
        return refNode.contains(otherNode); 
//判断支持compareDocumentPosition的浏览器，大于16就是包含
    } else if (typeof refNode.compareDocumentPosition == 'function') {
        return !!(refNode.compareDocumentPosition(otherNode) > 16);
    } else {
//更低的浏览器兼容，通过递归一个个获取他的父节点是否存在
        var node = otherNode.parentNode;
        do {
            if (node === refNode) {
                return true;
            } else {
                node = node.parentNode;
            }
            } while (node != null);
        }
        return false;
}

三．DOM操作内容
虽然在之前我们已经学习了各种DOM操作的方法，这里所介绍是innerText、innerHTML、outerText和outerHTML等属性。除了之前用过的innerHTML之外，其他三个还么有涉及到。
1.innerText属性
document.getElementById(‘box’).innerText; //获取文本内容(如有html直接过滤掉)
document.getElementById(‘box’).innerText = ‘Mr.Lee’; //设置文本(如有html转义)

PS：除了Firefox之外，其他浏览器均支持这个方法。但Firefox的DOM3级提供了另外一个类似的属性：textContent，做上兼容即可通用。
document.getElementById(‘box’).textContent; //Firefox支持

//兼容方案
function getInnerText(element) {
return (typeof element.textContent == ‘string’) ?
element.textContent : element.innerText;
}

function setInnerText(element, text) {
if (typeof element.textContent == ‘string’) {
element.textContent = text;
} else {
element.innerText = text;
}
}

innerHTML属性

这个属性之前就已经研究过，不拒绝HTML。
>
document.getElementById(‘box’).innerHTML; //获取文本(不过滤HTML)
document.getElementById(‘box’).innerHTML = ‘123‘; //可解析HTML

虽然innerHTML可以插入HTML，但本身还是有一定的限制，也就是所谓的作用域元素，离开这个作用域就无效了。
>
box.innerHTML = ““; //

操作元素的Style样式属性

>

格式对比：

css样式属性：    
background-color    
color  
font  
font-family  
font-weight  
.....    

>
JS样式属性：
style.backgroundColor
style.color
style.font
style.fontFamily
style.fontWeight
…..

使用DOM的style对象

javascript样式表分为：内嵌式样式表；内联式样式表；外联式样式表。 操作元素的style样式属性（内嵌式）

css样式属性和javascript样式属性对比：

  background-color style.backgroundColor

  color style.color

  font style.font

  font-family style.fontFamily

当属性名有2个单词以上时就要使用驼峰命名。

如将一个

id=”div1”的CSS边框属性更改为”1px solid red”,背景色改为green：

var oDiv = document.getElementByIdx_x("div1");

oDiv.style.border = "1px solid red";

oDiv.style.backgroundColor = green;

DOM为style提供了几种方法：

1. getPropertyValue(propertyName) -- 返回CSS属性的属性值的字符串值。

2. getPropertyPriority() -- 如果CSS属性规则指定了"！import",则返回字符串 "!import",否则返回空字符串。

3. item(index) -- 返回指定索引的CSS属性名称。

4. removeProperty(propertyName) -- 从CSS定义中删除propertyName。

5. setProperty(propertyName,value,priority) -- 设置CSS属性propertyName为value 以及给定的优先级。

操作外部样式表及style元素中的样式

DOM指定了一个样式表对象，该对象如下属性：

1. disabled -- 指示样式表是否disabled；

2. href -- 外部样式表的URL；

3. media -- 在media属性中指定的可以使用样式表的媒体类型列表；

4. ownerNode -- 指定样式表的DOM节点（<link />或<style />元素）；

5. parentStyleSheet -- 如果样式表被包含在CSS@import语句中，本属性指向语句发现的样式；

6. title -- 通过HTML的title属性指定的样式列表；

7. type -- 样式表的mime类型。

访问DOM浏览器样式表规则使用cssRules集合；访问IE样式规则使用rules集合。

如判断使用哪个集合名：（这种只能读）

var oCss = document.styleSheets[0].cssRules || document.styleSheets[0].rules;

如果要想更改css样式里的值，那就要使用最终样式表了！

最终样式表：

function zzys(obj,attr){
            return obj.currentStyle?obj.currentStyle[attr]:getComputedStyle(obj,false)[attr];
        };

总结：在DOM中，对每个css样式，Style对象都包含了一个相对应得属性。对于单个词的css样式，style对象用相同属性额名字来代表；对于两个词的样式，style对象用去掉两个单词之间的连接线，并把第二个单词的首字母大写来表示。使用DOM的style对象的相关属性获取元素的css样式只针对内联样式，对于外部样式表和style元素中的css，则需要采用document.styleSheets。