首页 > 代码库 > DOM系统学习-进阶

DOM系统学习-进阶

2024-09-05 17:58:22   215人阅读

DOM类型

    Node类型：

        常用类型：

    ​    ​    ​元素节点 ELEMENT_NODE

    ​    ​    ​属性节点 ATTRIBUTE_NODE

    ​    ​    ​文本节点 TEXT_NODE

        IE不支持节点类型常量名、兼容方案：

1
2
3
4
5
6
if (typeof Node == ‘undefined‘) { //IE 返回
    window.Node = {
        ELEMENT_NODE : 1,
        TEXT_NODE : 3
    };
}


    Document类型：

        获取元素

            document.documentElement

            document.doctype

            document.body

        属性

            document.title

            document.URL

            document.domian

            document.referrer

        对象集合

            document.forms

            document.images

            document.anchors 获取带name的a元素

            document.links 获取带href的a元素

    Text类型：

        同时创建两个同级别的文本节点，会产生分离的两个节点

        文本节点合并 box.normalize();

        文本节点分割 box.firstChild.splitText(3);

        其他方法

            deleteData(offset,count) 删除文本数据

            insertData(offset,str) 插入文本数据

            replaceData(offset,count,str) 替换文本数据

            substringData(offset,count) 截取文本数据


DOM扩展

    呈现模式：

        标准模式8 CSS1Compat

            判断为标准模式 document.documentMode > 7

        仿真模式7

        混杂模式5 BackCompat

    滚动：

        设置指定可见 

1
ele.scrollIntoView();

    children属性：

        获取子元素节点（去除空白节点）

    contains()：

        父元素是否包含子元素


DOM操作内容

    innerText：

        获取元素内的文本内容，html会过滤

        设置元素内的文本内容，hmtl会转义

        firefox除外都支持，firefox兼容方法textContent

1
2
3
4
5
6
7
8
9
10
11
12
13
14
function getInnerText(element) {
    if (typeof element.textContent == ‘string‘) {
        return element.textContent;
    } else {
        return element.innerText;
    }
}
function setInnerText(element, text) {
    if (typeof element.textContent == ‘string‘) {
        element.textContent = text;
    } else {
        element.innerText = text;
    }
}

    innerHTML：

        获取元素内的内容，html不过滤

    ​    ​设置元素内的内容，hmtl会解析，script,style不会解析

    outerText：

        和innerText一样，包括自身，不支持firefox

    outerHTML：

        和innerHTML一样，包括自身

技术分享 

DOM系统学习-进阶


联系
我们