一、呈现模式

　　从 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. 设计模式之第7章-外观模式(Java实现)

    设计模式之第7章-外观模式(Java实现) “鱼哥,知道怎么把大象装进冰箱里面么?”(作者按:这么简单的问题还想考我,早了几百年吧.)“把大象装进冰箱里,一共需要三步:第一步,把冰箱门打开:第二步,把 ...

  2. 万物智联，腾讯云 IoT 边缘计算揭秘——云+未来峰会开发者专场回顾

    欢迎大家前往腾讯云+社区,获取更多腾讯海量技术实践干货哦~ 背景:现在是万物互联的时代,智能穿戴设备,智能家居,无人商业,改变了我们的生活方式.预计到2021年,全球物联网设数将达到150亿,超过手机 ...

  3. Android OpenGL教程-第一课【转】

    第一课 快速的开始一个Android OpenGL项目 首先,读懂我们的教程,需要有android的初步基础,我们这里只是通过android提供的SDK,来进行OpenGL的学习,所以你必须先学习如何 ...

  4. bzoj 5368: [Pkusc2018]真实排名

    Description 小C是某知名比赛的组织者,该比赛一共有n名选手参加,每个选手的成绩是一个非负整数,定义一个选手的排名是 :成绩不小于他的选手的数量(包括他自己).例如如果3位选手的成绩分别是[ ...

  5. springboot jpa 多条件查询（单表）

    需要实现的功能: 多个搜索输入框:全部不填,则查出所有列表:填了条件,就按条件查找:填的条件个数不定. 方法实现的核心:jpa自带的Specification<T> (目前只需要单表,多表 ...

  6. 一、URL和URLConnection

    一.简述: 在Java网络编程中,我们最常听到的一个单词是URL.URL标识了一个资源,并可以通过URL来获取这个资源.我们不知道资源具体是什么,也不需要关心怎么获取.你只需要拿到一个URL,你就可以 ...

  7. git必会必知

    1 前言 git前身是BitKeeper,但是他不是开源软件,不符合当时开源趋势,于是就会有了开源的git,git开发只用了十天时间.目前git是公司开发必不可少的一个工具,用于多人开发的分布式版本控 ...

  8. 读EntityFramework.DynamicFilters源码_心得_整体了解01

    前两天同事发给我一个连接地址:实体框架高级应用之动态过滤 EntityFramework DynamicFilters为什么会找到动态过滤的内容,是源于前段时间,我们想做一个个人blog 后端用.NE ...

  9. Js窗口嵌套

    <script type="text/javascript"> if (window.parent.window != window) { window.top.loc ...

  10. [Java反射基础三]方法反射的基本操作

    本文接上文“获取类的信息”,利用反射(invoke)来获取一个类中的方法来执行. 1.定义一个类,包含三个名称相同,参数不同的方法 class A{ public void print(){ Syst ...