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() ...
随机推荐
- linux 修改用户主目录（转载）
第一:修改/etc/passwd文件 第二:usermod命令 详细说明如下: 第一种方法: vi /etc/passwd 找到要修改的用户那几行,修改掉即可.此法很暴力,建议慎用. 第二种:user ...
- Expression Blend实例中文教程(5) - 布局控件快速入门StackPanel,ScrollViewer和Border
上一篇,介绍了Canvas布局控件在Blend中的使用.本篇继续介绍布局控件StackPanel,ScrollViewer和Border. 相对于Grid和Canvas来说,StackPanel,Sc ...
- Ajax知识点复习
1. ajax是什么? * asynchronous javascript and xml:异步的js和xml * 它能使用js访问服务器,而且是异步访问! * 服务器给客户端的响应一般是整个页面,一 ...
- ps命令详解加例子
Linux中的ps命令是Process Status的缩写.ps命令用来列出系统中当前运行的那些进程.ps命令列出的是当前那些进程的快照,就是执行ps命令的那个时刻的那些进程,如果想要动态的显示进程信 ...
- quartz---定时器（配置注解方式&配置xml方式）
本入门案例基于spring和quartz整合完成. 第一步:创建maven工程,导入spring和quartz相关依赖 第二步:创建任务类 第三步:在spring配置文件中配置任务类 第四步:在spr ...
- spring的事务传播行为
1.PROPAGATION_REQUIRED:如果当前没有事务,就创建一个新事务,如果当前存在事务,就加入该事务,该设置是最常用的设置. 比如说,ServiceB.methodB的事务级别定义为PRO ...
- flex固定底部栏
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- autocomplete 属性 清除input框输入存留历史值,防止下拉历史值显示
autocomplete 属性规定输入字段是否应该启用自动完成功能. 自动完成允许浏览器预测对字段的输入.当用户在字段开始键入时,浏览器基于之前键入过的值,应该显示出在字段中填写的选项. 注释:aut ...
- Java 开源博客 Solo 1.4.0 发布 - 简化
Solo 1.4.0 正式发布了!这个版本主要是简化了配置项,修复了一些缺陷并改进了很多细节体验,感谢一直以来关注和支持我们的朋友! 只需一个命令即可启动(不需要安装数据库.部署容器):也可以通过 w ...
- VC编程操作word2010生成表格
作者:朱金灿 来源:http://blog.csdn.net/clever101 一. 右键单击工程节点,然后选择添加类,如下图: 二. 添加TypeLib中的MFC类,如下图: 三. 选 ...