DOM系统学习-进阶

Posted 2020-09-01 前望

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一样，包括自身