JavaScript学习-DOM扩展_专有扩展
来源:互联网 发布:数控铣床四叶草的编程 编辑:程序博客网 时间:2024/05/20 04:10
1,介绍
- 有大量专有的DOM扩展没有成为标准,但这并不是说它们将来不会被写进标准。
2,children属性
- 这个属性是HTMLCollection的实例。
- 只包含元素中同样还是元素的子节点,除此之外,children属性与childNodes没有什么区别。
3,contains()方法
- 确定某个节点是不是另一个节点的后代。
- 支持contains()方法的浏览器有IE、Firefox 9+、Safari、Opera和Chrome。
使用DOM Level 3 compareDocumentPosition()也能够确定节点间的关系。返回一个表示该关系的位掩码(bitmask)。
- 下表列出了这个位掩码的值。
对结果和16按位与,也可实现contains()方法效果。
var result = document.documentElement.compareDocumentPosition(document.body);alert(!!result & 16);// 使用!!操作符会将该数值转换成布尔值,相当于boolin();
- 下表列出了这个位掩码的值。
通用的contains的函数
function contains(refNode,otherNode){ if(typeof refNode.contains == "function" && (!client.engine.webkit) || client.engine.webkit >= 522)){ return refNode.contains(otherNode); }else if(typeof refNode.compareDocumentPosition == "function"){ return !!(refNode.compareDocumentPosition(otherNode) & 16); }else { var node = otherNode.parentNode; do { if(node == refNode){ return true; }else{ node = node.parentNode; } }while (node !== null); return false; }}
4,插入文本
- innerHTML和outerHTML已经被HTML5纳入了规范,还有两个没有被HTML5纳入规范的属性innerText和outerText;
innerText属性
代码说话
<div> id="content"> <p>This is a<strong>paragraph</strong> with a list following it.</p> <ul> <li>Item 1</li> <li>Item 2</li> <li>Item 3</li> </ul> </div>
innerText属性会返回下列字符串:
This is a paragraph with a list following it.Item 1Item 2Item 3
innerText的写入示例:
div.innerText = "Hell world!";
HTML代码就会变成如下所示
<div id="content">Hell world!</div>
- outerText属性
- 除了作用范围扩大到了包含调用它的节点之外,outerText与innerText基本上没有多大区别。
5,滚动
除了HTML5纳入规范的scrollIntoView()纳入规范,还有其他几个专有方法可以在不同的浏览器中使用,下面列出的几个方法都是对HTMLElement类型的扩展,在所有元素中都可以调用。
scrollIntoView()和scrollIntoViewIfNeeded()的作用对象是元素的容器,而scrollByLines()和scrollByPages()影响的则是元素自身。
0 0
- JavaScript学习-DOM扩展_专有扩展
- JavaScript学习-DOM扩展_元素遍历
- JavaScript高级程序设计之DOM 扩展之专有扩展之文档模式第11.4.1讲
- JavaScript高级程序设计之DOM 扩展之专有扩展之children属性第11.4.2讲
- JavaScript高级程序设计之DOM 扩展之专有扩展之contains()方法第11.4.3讲
- JavaScript高级程序设计之DOM 扩展之专有扩展之插入文本第11.4.4讲
- JavaScript高级程序设计之DOM 扩展之专有扩展之滚动第11.4.5讲
- JavaScript学习-DOM扩展_选择符API
- JavaScript学习-DOM扩展_HTML5
- DOM 扩展 :理解Selectors API、使用HTML5 DOM扩展、了解专有的DOM扩展
- JavaScript学习笔记之DOM扩展
- javascript学习——DOM扩展
- 【JavaScript学习】DOM扩展:选择符API
- javascript DOM扩展
- JavaScript DOM 扩展
- JavaScript:DOM扩展
- javascript DOM扩展
- JavaScript DOM扩展
- LeetCode 13. Roman to Integer
- Java中Map的用法详解
- 操作系统练习题·成组链接法
- Docker Hub与Docker Store详解
- java中HashMap详解
- JavaScript学习-DOM扩展_专有扩展
- HIT训练
- uboot源码分析二
- Assembly Language Homework Project (Two)
- ios开发之Swift获取视频截图(本地视频、网络视频的缩略图)(转)
- Guava学习笔记目录
- 类与类之间的关系
- while(TI == 0);TI = 0;
- Guava学习笔记【1】:Google Guava 类库简介