JavaScript的DOM_其他的扩展
一、呈现模式
从 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_其他的扩展的更多相关文章
- ExtJS学习-----------Ext.String，ExtJS对javascript中的String的扩展
关于ExtJS对javascript中的String的扩展,能够參考其帮助文档,文档下载地址:http://download.csdn.net/detail/z1137730824/7748893 以 ...
- ExtJS学习-----------Ext.Array，ExtJS对javascript中的Array的扩展
关于ExtJS对javascript中的Array的扩展.能够參考其帮助文档,文档下载地址:http://download.csdn.net/detail/z1137730824/7748893 因为 ...
- ExtJS学习-----------Ext.Number，ExtJS对javascript中的Number的扩展
关于ExtJS对javascript中的Number的扩展,能够參考其帮助文档,文档下载地址:http://download.csdn.net/detail/z1137730824/7748893 以 ...
- ExtJS学习-----------Ext.Object，ExtJS对javascript中的Object的扩展
关于ExtJS对javascript中的Object的扩展.能够參考其帮助文档,文档下载地址:http://download.csdn.net/detail/z1137730824/7748893 以 ...
- 关于ExtJS对javascript中的Object的扩展
关于ExtJS对javascript中的Object的扩展,可以参考其帮助文档,文档下载地址:http://download.csdn.net/detail/z1137730824/7748893 下 ...
- JavaScript的DOM_节点类型的扩展
DOM 自身存在很多类型,比如 Element 类型(元素节点)再比如 Text 类型(文本节点).DOM 还提供了一些扩展功能. 一.Node类型 Node 接口是 DOM1 级就定义了,Node ...
- 《JAVASCRIPT高级程序设计》DOM扩展
虽然DOM为XML及HTML文档交互制定了一系列的API,但仍然有几个规范对标准的DOM进行了扩展.这些扩展中,有很多是浏览器专有的,但后来成了事实标准,于是其他浏览器也提供了相同的实现:浏览器开发商 ...
- JavaScript:学习笔记(8)——对象扩展运算符
JavaScript:学习笔记(8)——扩展运算符 对象的扩展运算符 扩展运算符是三个点(...).用于取出参数对象的所有可遍历属性,然后拷贝到当前对象之中. 如上图所示,新建了一个对象a,然后通过扩 ...
- javascript ES6 新特性之 扩展运算符 三个点 ...
对于 ES6 新特性中的 ... 可以简单的理解为下面一句话就可以了: 对象中的扩展运算符(...)用于取出参数对象中的所有可遍历属性,拷贝到当前对象之中. 作用类似于 Object.assign() ...
随机推荐
- CentOS 7禁止IPv6
如何在CentOS 7中禁止IPv6 https://Linux.cn/article-4935-1.html 最近,我的一位朋友问我该如何禁止IPv6.在搜索了一番之后,我找到了下面的方案.下面就是 ...
- viewport其实没那么难理解
在学习移动端布局的时候,你肯定听说过"viewport"这个词,然后去问度娘或谷歌.你会惊奇的发现,这个viewport不简单,居然有那么多兄弟——layout viewport. ...
- php.ini配置max_execution_time和FPM配置request_terminate_timeout
PHP限定脚本执行时长的方式有几种,下面说下php.ini中的max_execution_time和php-fpm.conf中的request_terminate_timeout 1. php.ini ...
- 关于利用MQ实现分布式事务的想法【转】
转自:https://www.jianshu.com/p/bafb09954f18 假设:消息服务不丢消息 场景 服务A 服务B 服务C 消息服务Q 伪代码 服务A中 transaction{ A本地 ...
- thrift简介
thrift是一个软件框架,用来进行可扩展且跨语言的服务的开发.它结合了功能强大的软件堆栈和代码生成引擎,以构建在 C++, Java, Python, PHP, Ruby, Erlang, Perl ...
- three.js 在vscode的智能提示
安装nodejs.启动或者重启vscode,打开控制台,输入命令 npm install --save @types/three 回车, 会多了个node_modules文件夹,再试试智能感知,出来. ...
- flask之flask-sqlalchemy（一）
一 安装flask-sqlalchemy pip install flask-sqlalchemy 二 导入相关模块和对象 from flask_sqlalchemy import SQLAlchem ...
- 前端学习之路之CSS （二）
Infi-chu: http://www.cnblogs.com/Infi-chu/ id选择器id 选择器可以为标有特定 id 的 HTML 元素指定特定的样式,CSS 中 id 选择器以 &quo ...
- 如何开发一个Servlet
1 如何开发一个Servlet 1.1 步骤: 1)编写java类,继承HttpServlet类 2)重新doGet和doPost方法 3)Servlet程序交给tomcat服务器运行!! 3.1 s ...
- 【Web crawler】simulated DFS web crawler
Finish crawl web learned from udacity 提示:在某些时候,你必须在page上调用get_page.这似乎违反直觉,但是我们用 page 这个词时,指的网页的网址 ( ...