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

05-19 03:39