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