一、呈现模式

　　从 IE6 开始开始区分标准模式和混杂模式(怪异模式)，主要是看文档的声明。

　　IE 为document 对象添加了一个名为 compatMode 属性，这个属性可以识别 IE 浏览器的文档处于什么模式，如果是标准模式，则返回 CSS1Compat，如果是混杂模式则返回 BackCompat。

<script>

    window.onload =function(){

        alert(document.compatMode);//文档声明没错就是标准模式，去掉文档声明就变成怪异模式

    }

</script>
<script>

    　window.onload =function(){

        if (document.compatMode == 'CSS1Compat') {

            alert(document.documentElement.clientWidth);//如果是混杂模式下IE6,7,8为0，其他正常

        } else {

            alert(document.body.clientWidth);//如果是混杂模式下用这个方法可以使IE也是正常的

        }

    }

</script>

　　后来 Firefox、Opera 和 Chrome 都实现了这个属性。从 IE8 后，又引入 documentMode新属性，因为 IE8 有 3 种呈现模式分别为标准模式 8，仿真模式 7，混杂模式 5。

　　所以如果想测试 IE8 的标准模式，就判断 document.documentMode > 7 即可。

 二、滚动

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

<script>

     window.onload =function(){

        var box = document.getElementById("box");

        box.scrollIntoView();             //设置指定可见,当下面的内容需要将滚动条拉下来才可以看到的时候，只用该方法，当刷新页面的时候滚动条会自动下来，从而看到下面的内容

     };

</script>

</head>

<body>

    <p>1</p>

    <p>1</p>

    <p>1</p>

    <p>1</p><p>1</p>

    <p>1</p>

    <p>1</p>

    <p>1</p>

    <p>1</p>

    <p>1</p>

    <p>1</p>

    <p>1</p>

    <p>1</p>

    <p>1</p>

    <p>1</p>

    <p>1</p>

    <p>1</p>

    <p>1</p>

    <div id="box">测试Div</div>

</body>

三、children 属性

　　由于子节点空白问题，IE 和其他浏览器解释不一致。虽然可以过滤掉，但如果只是想得到有效子节点，可以使用 children 属性，支持的浏览器为：IE5+、Firefox3.5+、Safari2+、Opera8+和 Chrome，这个属性是非标准的。

<script>

     window.onload =function(){

        var box = document.getElementById("box");

        alert(box.children.length); //得到有效子节点数目

        alert(box.children[0]);//获取第一个有效子节点

        alert(box.children[0].nodeName);

     };

</script>

</head>

<body>

<div id="box">

    <p>测试Div</p>

    <p>测试Div</p>

    <p>测试Div</p>

</div>

</body>

四、contains()方法

　　判断一个节点是不是另一个节点的后代，我们可以使用 contains()方法。这个方法是 IE率先使用的，开发人员无须遍历即可获取此信息。火狐旧版本不支持，苹果3.0及以上才支持

<script>

     window.onload =function(){

        var box = document.getElementById("box");

        var p = box.firstChild;

        alert(box.contains(p));//判断box是不是p的父节点

     };

</script>

</head>

<body>

<div id="box"><p>测试Div</p></div>

</body>

　　在 Firefox 的 DOM3 级实现中提供了一个替代的方法 compareDocumentPosition()方法。这个方法确定两个节点之间的关系。

<script>

     window.onload =function(){

        var box = document.getElementById("box");

        var p = box.firstChild;

        alert(box.compareDocumentPosition(p));//

     };

</script>

</head>

<body>

<div id="box"><p>测试Div</p></div>

</body>

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

　　

JavaScript的DOM_其他的扩展的更多相关文章

  1. ExtJS学习-----------Ext.String，ExtJS对javascript中的String的扩展

    关于ExtJS对javascript中的String的扩展,能够參考其帮助文档,文档下载地址:http://download.csdn.net/detail/z1137730824/7748893 以 ...

  2. ExtJS学习-----------Ext.Array，ExtJS对javascript中的Array的扩展

    关于ExtJS对javascript中的Array的扩展.能够參考其帮助文档,文档下载地址:http://download.csdn.net/detail/z1137730824/7748893 因为 ...

  3. ExtJS学习-----------Ext.Number，ExtJS对javascript中的Number的扩展

    关于ExtJS对javascript中的Number的扩展,能够參考其帮助文档,文档下载地址:http://download.csdn.net/detail/z1137730824/7748893 以 ...

  4. ExtJS学习-----------Ext.Object，ExtJS对javascript中的Object的扩展

    关于ExtJS对javascript中的Object的扩展.能够參考其帮助文档,文档下载地址:http://download.csdn.net/detail/z1137730824/7748893 以 ...

  5. 关于ExtJS对javascript中的Object的扩展

    关于ExtJS对javascript中的Object的扩展,可以参考其帮助文档,文档下载地址:http://download.csdn.net/detail/z1137730824/7748893 下 ...

  6. JavaScript的DOM_节点类型的扩展

    DOM 自身存在很多类型,比如 Element 类型(元素节点)再比如 Text 类型(文本节点).DOM 还提供了一些扩展功能. 一.Node类型 Node 接口是 DOM1 级就定义了,Node ...

  7. 《JAVASCRIPT高级程序设计》DOM扩展

    虽然DOM为XML及HTML文档交互制定了一系列的API,但仍然有几个规范对标准的DOM进行了扩展.这些扩展中,有很多是浏览器专有的,但后来成了事实标准,于是其他浏览器也提供了相同的实现:浏览器开发商 ...

  8. JavaScript:学习笔记(8)——对象扩展运算符

    JavaScript:学习笔记(8)——扩展运算符 对象的扩展运算符 扩展运算符是三个点(...).用于取出参数对象的所有可遍历属性,然后拷贝到当前对象之中. 如上图所示,新建了一个对象a,然后通过扩 ...

  9. javascript ES6 新特性之 扩展运算符 三个点 ...

    对于 ES6 新特性中的 ... 可以简单的理解为下面一句话就可以了: 对象中的扩展运算符(...)用于取出参数对象中的所有可遍历属性,拷贝到当前对象之中. 作用类似于 Object.assign() ...

随机推荐

  1. DateTime.Now与DateTime.Today的区别

    区别如下图: DateTime.Now: 不仅显示日期 还显示当前时间: DateTime.Today: 只显示当前日期,没有时间

  2. 九度oj 1003 A+B 2010年浙江大学计算机及软件工程研究生机试真题

    题目1003:A+B 时间限制:1 秒 内存限制:32 兆 特殊判题:否 提交:12812 解决:5345 题目描述: 给定两个整数A和B,其表示形式是:从个位开始,每三位数用逗号",&qu ...

  3. 【c++】输出文件的每个单词、行

    假设文件内容为 1. hello1 hello2 hello3 hello4 2. dsfjdosi 3. skfskj ksdfls 输出每个单词 代码 #include <iostream& ...

  4. MySQL触发器基本使用

    文章参考:这里 MySQL中,创建触发器的基本语法: CREATE TRIGGER trigger_name trigger_time trigger_event ON tbl_name FOR EA ...

  5. [转] 多种方法查看Oracle SQL执行计划

    本文转自:http://falchion.iteye.com/blog/616234 一.在线查看执行计划表 如果PLAN_TABLE表不存在,执行$ORACLE_HOME/rdbms/admin/u ...

  6. java 并发(五)---AbstractQueuedSynchronizer（2）

           文章部分代码和照片来自参考资料 问题 : ConditionObject  的 await 和 signal 方法是如何实现的 ConditonObject ConditionObjec ...

  7. json数据发送时浏览器提示“保存”解决

    数据以json形式发送的时候,部分浏览器不能直接解析,而是提示是否保存,nodejs的express应用中可以通过如下代码解决该问题: router.get('/', function (req, r ...

  8. 三个缓存数据库Redis、Memcache、MongoDB

    >>Memcached Memcached的优点:Memcached可以利用多核优势,单实例吞吐量极高,可以达到几十万QPS(取决于key.value的字节大小以及服务器硬件性能,日常环境 ...

  9. git记住提交密码的技巧

    修改.git包里面的config文件,添加 [credential] helper = store

  10. JavaScript之如何对客户端进行检测

    本文主要是针对各种客户端进行检测,使用了用户代理字符串检测技术,具体代码如下: var client=function() { var engine= { // 呈现引擎 ie: 0, gecko: ...