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