JavaScript学习-DOM扩展_专有扩展

最新推荐文章于 2025-07-05 10:57:54 发布

原创最新推荐文章于 2025-07-05 10:57:54 发布 · 325 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#firefox #c语言 #扩展 #ie #javascript

javascript 专栏收录该内容

39 篇文章

订阅专栏

本文详细介绍了DOM操作中的children属性、contains()方法及文本插入等技术。children属性返回元素的子元素节点，contains()方法用于判断一个节点是否为另一个节点的后代。此外还探讨了innerHTML、innerText与outerText属性的应用。

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 1
Item 2
Item 3

innerText的写入示例:
```
div.innerText = "Hell world!";
```
HTML代码就会变成如下所示
```
<div id="content">Hell world!</div>
```

outerText属性
- 除了作用范围扩大到了包含调用它的节点之外，outerText与innerText基本上没有多大区别。

5，滚动

除了HTML5纳入规范的scrollIntoView()纳入规范，还有其他几个专有方法可以在不同的浏览器中使用，下面列出的几个方法都是对HTMLElement类型的扩展，在所有元素中都可以调用。
scrollIntoView()和scrollIntoViewIfNeeded()的作用对象是元素的容器，而scrollByLines()和scrollByPages()影响的则是元素自身。