一、呈现模式

　　从 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. JNI注册调用完整过程-安卓4.4

    在Android系统中,JNI方法是以C/C++语言来实现的,然后编译在一个so文件里面,以我之前的例子为例Android Studio使用JNI,调用之前要加载到当前应用程序的进程的地址空间中: s ...

  2. 新时代运维重器 Tencent Hub 最佳实践——云+未来峰会开发者专场回顾

    欢迎大家前往腾讯云+社区,获取更多腾讯海量技术实践干货哦~ 演讲者:邹辉 腾讯云 PaaS 产品总监 背景:5月23-24日,以"焕启"为主题的腾讯"云+未来" ...

  3. sublime text 2编辑器中文问题

    Sublime Text 2是一个非常不错的源代码及文本编辑器,但是不支持GB2312和GBK编码在很多情况下会非常麻烦.不过Sublime Package Control所以供的插件可以让Subli ...

  4. Linux的基本命令总结

    服务器版的Linux安装完毕了,但没有图形化界面,我们只能通过控制台去操作系统,我们就要使用类似DOS命令的Linux命令去操作系统,那么下面我们就进行Linux的命令的学习.Linux命令成百上千, ...

  5. 关于request请求的基本获取

      1.Request对象的作用是与客户端交互,收集客户端的Form.Cookies.超链接,或者收集服务器端的环境变量. request对象是从客户端向服务器发出请求,包括用户提交的信息以及客户端的 ...

  6. DIV固定宽度和动态拉伸混合水平排列

    1.效果图 2.源代码 html <h2>1.头部固定,尾部拉伸</h2> <div class="container" id="div1& ...

  7. FusionCharts数据展示成饼状图、柱状图和折线图

    FusionCharts数据展示成饼状图.柱状图和折线图 本文以展示柱状图为例进行介绍,当然这仅仅是一种方法而已:还有很多方法可以用于展示图表,例如echarts,自定义图表标签.使用jfreecha ...

  8. Object.preventExtensions()使用技巧

    Object.preventExtensions() 方法让一个对象变的不可扩展,也就是永远不能再添加新的属性. // Object.preventExtensions将原对象变的不可扩展,并且返回原 ...

  9. Hibernate 性能优化一对一关联映射

    概述: hibernate提供了两种映射一对一关联的方式:按照外键映射和按照主键映射. 下面以员工账号和员工档案为例 ,介绍两种映射方式,并使用这两种映射方式分别完成以下持久化操作: (1)保存员工档 ...

  10. ArcGIS 编程中对接口的理解

    学习AO,最重要的是理解“接口”这个概念.接口是什么?有什么具体作用?在多种计算机高级语言中,都可以看到“接口”这个术语,但基本上每一本书对“为什么使用接口”等重要文都都“语焉不详”,使得初学者往往不 ...