JavaScript学习8：DOM进阶

标签：javascript   dom   

        DOM自身存在很多类型，我们在上篇博客中提到了大部分的类型，比如Element类型：表示的是元素节点，比如Text类型：表示的是文本节点。DOM也提供了一些扩展功能。

        一．DOM类型

        上篇博客我们了解了DOM的节点以及怎样操作和查询节点，而本身这些不同的节点，又有着不同的类型

        我们随便来看两个类型：Document类型和Element类型

        Document类型表示文档，或文档的根节点，而这个节点时隐藏的，没有具体的元素标签。

        Element类型用于表现HTML中的元素节点。在之前的文章里，我们  已经可以对元素节点进行查找、创建等操作，元素节点的nodeType为1，nodeName为元素的标签名。

        元素节点对象在非IE浏览器可以返回它具体元素节点的对象类型。

        二．DOM扩展

        1 呈现模式

        从IE6开始区分标准模式和混杂模式（怪异模式），主要是看文档的声明。IE为Document对象添加了一个名为compatMode属性，这个属性可以识别IE浏览器的文档处于什么模式。如果是标准模式，则返回CSS1Compat，如果是混杂模式则返回BackCompat。

        2 滚动

        DOM提供了一些滚动页面的方法，如下：

        Document.getElementById(‘box’).scrollIntoView();

        3 children属性

        由于子节点空白问题，IE和其他浏览器解释不一样。虽然可以过滤掉，但是如果得到有效子节点，可以使用children属性，支持的浏览器为：IE5+，Firefox3.5+等等。

        4 contains()方法

        判断一个节点是不是另一个节点的后代，我们可以使用contains()方法。这个方法是IE率先使用的，开发人员无须遍历即可获取此信息。

        三．DOM操作内容

        1 innerText属性

       除了Firefox之外，其他浏览器均支持这个方法。但是Firefox的DOM3级提供了另一个类似的属性：textContent，做上兼容即可通用。

        2innerHTML属性

        这个属性我们之前介绍过，不拒绝HTML。虽然可以插入HTML，但是还是有一些限制的，也就是所谓的作用域元素，离开这个作用域就无效了。

        3outerText

        outerText在取值的时候和innerText一样，火狐同样不支持，而赋值方法相当危险，他不单替换了文本内容，还将元素直接抹去。

        4outerHTML

        这个使用和innerHTML一样，同样在赋值的时候要谨慎。

JavaScript学习8：DOM进阶

标签：javascript   dom   

原文地址：http://blog.csdn.net/lianjiangwei/article/details/46289559