一、呈现模式

　　从 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. MySQL使用内置函数来进行模糊搜索(locate()等)

    常用的一共有4个方法,如下: 1. 使用locate()方法 1.1.普通用法: SELECT `column` from `table` where locate('keyword', `condi ...

  2. 利用Map解决复杂业务

    遍历出题库表的题库名称和题库id,根据题目id即questionBankId获取 分组,即该题库题目总数,该题库题目正确数,该题库已回答题目数. <sqltemplate id="co ...

  3. Java - 避免不必要的对象

    通常,我们更喜欢重用一个对象而不是重新创建一个.如果对象是不可变的,它就始终可以被重用. 下面是一个反面例子: String s = new String("stringette" ...

  4. Springboot事务使用与回滚

    Springboot中事务的使用: 1.启动类加上@EnableTransactionManagement注解,开启事务支持(其实默认是开启的). 2.在使用事务的public(只有public支持事 ...

  5. 反编译DLL文件

    我们平时在工作中经常会遇到一些已经被编译后的DLL,而且更加麻烦是没有源代码可以进行修改,只能针对这个DLL的文件进行修改才能得到我们想要的结果:本文将通过一个实例来演示如果完成一个简单的修改;我们将 ...

  6. 学习stylus笔记

    最近在研究v-cli3.0,发现了一种新的预处理器,于是花了一些时间去学习下. 学习网站 基本上这个网站上,讲的已经很详情.我下面把我在学习之中的笔记和觉得自己用的多方法贴出来. 1.缩排 使用缩排和 ...

  7. sql:日期操作注意的,如果以字符串转日期时的函数,因为数据量大,会出问题

    ---1.以日期字符操作转换日期 如果是VIP1生日不对,可以以上传的数据日期为生日 begin declare @NowBirthday datetime, @birthday datetime,@ ...

  8. Found 1 slaves: Use of uninitialized value in printf at /usr/local/percona-toolkit/bin/pt-online-schema-change line 8489

    1. problem description: as the title show, i miss the first problem using pt-online-schema-change to ...

  9. parted命令

    fdisk命令是针对MBR分区进行操作,MBR分区因为自身设计原因,不能处理大于2TB的硬盘,并且只能有4个分区. 针对大于2TB的硬盘,需要采用GPT分区,使用parted命令进行操作 parted ...

  10. 讲解JavaScript两个圆括号、自调用和闭包函数

    一.JavaSript圆括号的使用 先来看一组通过函数声明来定义的函数: 先附代码: 运行结果如下: 这里我们可以看出: Ø  若没有加圆括号,则返回的是这个函数的内容 Ø  若加上圆括号,则返回的是 ...