一、呈现模式

　　从 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. jmeter（5）——参数化

    之前接触过QTP或者Loadrunner的小伙伴,应该对参数化不陌生,在<badboy详解篇>中也介绍了badboy的参数化,今天说一下jmeter的参数化,同样,我们举例说明,以msn. ...

  2. ASP.NET Core中使用自定义路由

    上一篇文章<ASP.NET Core中使用默认MVC路由>提到了如何使用默认的MVC路由配置,通过这个配置,我们就可以把请求路由到Controller和Action,通常情况下我们使用默认 ...

  3. FileReader实现上传图片前本地预览

    平时做图片上传预览时如果没有特殊的要求就直接先把图片传到后台去,成功之后拿到URL再渲染到页面上.或者使用前端插件.这篇博客使用的是HTML5的新特性——FileReader.由于兼容性,这种方法不适 ...

  4. Go在windows10 64位上安装

    一.安装 1.下载安装包http://www.golangtc.com/download,这是国内的地址,也直接去官网下载. 2.选择适合自己的版本,这里我选择安64位装版go1.9.2.window ...

  5. YII框架路由配置

    首先要在服务器配置(httpd.conf)中开启重写模块: #开启重写模块,将其前面的#去掉 LoadModule rewrite_module modules/mod_rewrite.so #Dir ...

  6. WebAPI搭建（二） 让WebAPI 返回JSON格式的数据

    在RestFul风格盛行的年代,对接接口大多数人会选择使用JSON,XML和JSON的对比传送(http://blog.csdn.net/liaomin416100569/article/detail ...

  7. json转换工具类

    using System;using System.Collections.Generic;using System.Text;using Newtonsoft.Json;using System.I ...

  8. spring的aop 基于schema

    AOP为Aspect Oriented Programming的缩写,意为:面向切面编程 一 前期工作 1.新建一个java项目,我是使用的maven,所以我新建了一个简单的maven项目,因为mav ...

  9. StringBuffer总结分析

    构造方法 /** * Constructs a string buffer with no characters in it and an * initial capacity of 16 chara ...

  10. 关于display:inline-block布局导致错位问题分析

    移动端设计稿需求是这样的,如下图: 未知的几个头像从左至右并行居中排列. 一般可能直接使用float,但是设计图要求头像排列始终是居中的,于是想到要让它们成为行内元素,然后可使用的方法有flex bo ...