zoukankan      html  css  js  c++  java
  • DOM系统学习-进阶

    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系统学习-进阶.png 

  • 相关阅读:
    coding
    我的大学
    《活出生命的意义》读后感
    《世界是数字的》读后感
    学习进度表
    阅读《我是一只IT小小鸟有感》
    《软件工程师职业规范》心得
    软件工程第二次结对作业
    软件工程第三次作业
    软件工程第二次作业
  • 原文地址:https://www.cnblogs.com/ybbqg/p/6434637.html
Copyright © 2011-2022 走看看