第一百一十四节，JavaScript文档对象，DOM进阶

JavaScript文档对象，DOM进阶

学习要点：

1.DOM类型

2.DOM扩展

3.DOM操作内容

DOM自身存在很多类型，在DOM基础课程中大部分都有所接触，比如Element类型：表示的是元素节点，再比如Text类型：表示的是文本节点。DOM也提供了一些扩展功能。

一．DOM类型

DOM基础课程中，我们了解了DOM的节点并且了解怎样查询和操作节点，而本身这些不同的节点，又有着不同的类型。

DOM类型

类型名	说明
Node	表示所有类型值的统一接口，IE不支持
Document	表示文档类型
Element	表示元素节点类型
Text	表示文本节点类型
Comment	表示文档中的注释类型
CDATASection	表示CDATA区域类型
DocumentType	表示文档声明类型
DocumentFragment	表示文档片段类型
Attr	表示属性节点类型

1.Node类型，返回值表示Node类型的数值

Node接口是DOM1级就定义了，Node接口定义了12个数值常量以表示每个节点的类型值。除了IE之外，所有浏览器都可以访问这个类型。

Node的常量

常量名	说明	nodeType值
ELEMENT_NODE	元素	1
ATTRIBUTE_NODE	属性	2
TEXT_NODE	文本	3
CDATA_SECTION_NODE	CDATA	4
ENTITY_REFERENCE_NODE	实体参考	5
ENTITY_NODE	实体	6
PROCESSING_INSTRUCETION_NODE	处理指令	7
COMMENT_NODE	注释	8
DOCUMENT_NODE	文档根	9
DOCUMENT_TYPE_NODE	doctype,html文档声明类型	10
DOCUMENT_FRAGMENT_NODE	文档片段	11
NOTATION_NODE	符号	12

虽然这里介绍了12种节点对象的属性，用的多的其实也就几个而已。

alert(Node.ELEMENT_NODE);                //1，元素节点类型值

alert(Node.TEXT_NODE);                    //2，文本节点类型值

注意：低版本ie不支持，下面会有解决方案

ELEMENT_NODE，表示元素节点返回值是1 ，实际使用方式如下

window.onload = function() { //window.onload事件，等待html执行完成后，执行匿名函数

    var asf = document.getElementById('box'); //通过ID获取到目标节点

    //判断元素节点的类型，如果等于文本类型

    if(asf.nodeType === Node.ELEMENT_NODE){  //ELEMENT_NODE，表示元素节点返回值是1

        alert("元素类型节点");

    }else {

        alert("不是元素类型节点")

    }

};

//元素类型节点

ps:其他属性使用方式相同

我们建议使用Node类型的属性来代替1,2这些阿拉伯数字，有可能大家会觉得这样岂不是很繁琐吗？并且还有一个问题就是IE不支持Node类型。
如果只有两个属性的话，用1，2来代替会特别方便，但如果属性特别多的情况下，1、2、3、4、5、6、7、8、9、10、11、12，你根本就分不清哪个数字代表的是哪个节点。当然，如果你只用1，2两个节点，那就另当别论了。

Node类型IE低版本不支持，我们可以模拟一个类，让IE也支持

alert(Node.ELEMENT_NODE);                //1，元素节点类型值

alert(Node.TEXT_NODE);                    //2，文本节点类型值

//Node类型IE低版本不支持，我们可以模拟一个类，让IE也支持

//判断Node的类型如果等于undefined，就说明此浏览器不支持Node类型

if (typeof Node === 'undefined'){

    //通过window创建一个对象全局变量

    window.Node ={

        ELEMENT_NODE:1,

        ATTRIBUTE_NODE:2,

        TEXT_NODE:3,

        CDATA_SECTION_NODE:4,

        ENTITY_REFERENCE_NODE:5,

        ENTITY_NODE:6,

        PROCESSING_INSTRUCETION_NODE:7,

        COMMENT_NODE:8,

        DOCUMENT_NODE:9,

        DOCUMENT_TYPE_NODE:10,

        DOCUMENT_FRAGMENT_NODE:11,

        NOTATION_NODE:12

    };

}

2.Document类型，返回根节点对象

document类型表示文档，或文档的根节点，而这个节点是隐藏的，没有具体的元素标签。也就是所有的html都是在这个节点下的，这个是根

window.onload = function() { //window.onload事件，等待html执行完成后，执行匿名函数

    alert(document);   //document类型表示文档，或文档的根节点

    //返回[object HTMLDocument],返回根节点对象

    alert(document.nodeType);  //查看文档类型值

    //返回9，表示文档根

    alert(document.childNodes[0]); //获取根元素节点里的第一个子节点

    //返回[object DocumentType]，第一个子节点对象

    alert(document.childNodes[0].nodeType); //查看第一个子节点的类型

    //返回10，表示html文档声明类型

    alert(document.childNodes[1]); //获取根元素节点里的第二个子节点

    //返回[object HTMLHtmlElement]，第二个子节点对象

    alert(document.childNodes[1].nodeType); //查看第二个子节点的类型

    //返回1，表示是元素类型也就是标签

    alert(document.childNodes[1].nodeName);  //获取第二个子节点的标签名称

    //HTML，表示是html标签

};

如果想直接得到<html>标签的元素节点对象HTMLHtmlElement，不必使用childNodes属性这么麻烦，可以使用documentElement即可。

documentElement属性，直接获取根节点下的html节点，返回html节点对象

window.onload = function() { //window.onload事件，等待html执行完成后，执行匿名函数

    alert(document.documentElement);  //documentElement属性，直接获取根节点下的html节点，返回html节点对象

    //返回，[object HTMLHtmlElement] html节点对象

    alert(document.documentElement.nodeName); //获取html节点的标签名称

    //返回，HTML 标签名称

};

在很多情况下，我们并不需要得到<html>标签的元素节点，而需要得到更常用的<body>标签，之前我们采用的是：document.getElementsByTagName('body')[0]，那么这里提供一个更加简便的方法：document.body。

body属性，直接获取body标签节点

window.onload = function() { //window.onload事件，等待html执行完成后，执行匿名函数

    alert(document.body);  //body属性，直接获取body标签节点

    //返回：[object HTMLBodyElement] body标签节点对象

    alert(document.body.nodeName); //获取body标签名称

    //返回：BODY  标签名称

};

在<html>之前还有一个文档声明：<!DOCTYPE>会作为某些浏览器的第一个节点来处理，这里提供了一个简便方法来处理：document.doctype。

doctype属性，直接获取html文档声明标签节点
注意：ie7以下不支持，ie7以下只能通过父节点获取子节点得到，并且得到的是文档注释类型，不是元素类型

PS：IE8中，如果使用子节点访问，IE8之前会解释为注释类型Comment节点，而document.doctype则会返回null。

window.onload = function() { //window.onload事件，等待html执行完成后，执行匿名函数

    alert(document.doctype);  //doctype属性，直接获取html文档声明标签节点

    //返回：[object DocumentType] 文档声明标签节点对象

};

Document中有一些遗留的属性和对象合集，可以快速的帮助我们精确的处理一些任务。

title属性，获取和设置<title>标签的值

window.onload = function() { //window.onload事件，等待html执行完成后，执行匿名函数

    alert(document.title);  //title属性，获取和设置<title>标签的值

    //返回：JavaScript讲解

    alert(document.title = '修改标题');  //设置<title>标签的值

    //返回：修改标题

};

URL属性，获取URL路径

window.onload = function() { //window.onload事件，等待html执行完成后，执行匿名函数

    alert(document.URL);  //URL属性，获取URL路径

    //返回：http://localhost:63342/js/1.html?_ijt=d9jd9jpm38tl3bb99qlpgr4rbo

};

domain属性，获取域名，要在服务器端

window.onload = function() { //window.onload事件，等待html执行完成后，执行匿名函数

    alert(document.domain);  //domain属性，获取域名，要在服务器端

    //返回：localhost

};

referrer属性，获取上一个URL，要在服务器端

window.onload = function() { //window.onload事件，等待html执行完成后，执行匿名函数

    alert(document.referrer);  //referrer属性，获取上一个URL，要在服务器端,如果上一页没有返回空

};

anchors属性，获取文档中带name属性的<a>元素集合

window.onload = function() { //window.onload事件，等待html执行完成后，执行匿名函数

    alert(document.anchors);  //anchors属性，获取文档中带name属性的<a>元素集合

};

links属性，获取文档中带href属性的<a>元素集合

window.onload = function() { //window.onload事件，等待html执行完成后，执行匿名函数

    alert(document.links);  //links属性，获取文档中带href属性的<a>元素集合

};

forms属性，获取文档中<form>元素集合

window.onload = function() { //window.onload事件，等待html执行完成后，执行匿名函数

    alert(document.forms);  //forms属性，获取文档中<form>元素集合

};

images属性，获取文档中<img>元素集合

window.onload = function() { //window.onload事件，等待html执行完成后，执行匿名函数

    alert(document.images);  //images属性，获取文档中<img>元素集合

};

3.Element元素类型

Element类型用于表现HTML中的元素节点。在DOM基础那章，我们已经可以对元素节点进行查找、创建等操作，元素节点的nodeType为1，nodeName为元素的标签名。

元素节点对象在非IE浏览器可以返回它具体元素节点的对象类型。

元素对应类型表

元素名	类型
HTML	HTMLHtmlElement
DIV	HTMLDivElement
BODY	HTMLBodyElement
P	HTMLParamElement

PS：以上给出了部分对应，更多的元素对应类型，直接访问调用即可

4.Text类型

Text类型用于表现文本节点类型，文本不包含HTML，或包含转义后的HTML。文本节点的nodeType为3。

在同时创建两个同一级别的文本节点的时候，会产生分离的两个节点。

window.onload = function() { //window.onload事件，等待html执行完成后，执行匿名函数

    var sdf = document.getElementById('box');  //通过id获取到标签

    var text1 = document.createTextNode('文本1'); //创建一个文本节点

    var text2 = document.createTextNode('文本2'); //创建一个文本节点

    sdf.appendChild(text1); //将新节点添加到sdf节点里子节点末尾

    sdf.appendChild(text2); //将新节点添加到sdf节点里子节点末尾

    alert(sdf.childNodes.length);  //查看元素节点里的子节点集合长度

    //返回2，说明是两个文本节点

    //<div id="box" title="标题">文本1文本2</div>

    //注意：此时添加了两个文本节点，但是用眼睛看就像是一个文本节点，这里一点要注意

};

normalize()合并同级的文本节点

使用方式：

目标节点的父节点.normalize()

window.onload = function() { //window.onload事件，等待html执行完成后，执行匿名函数

    var sdf = document.getElementById('box');  //通过id获取到标签

    var text1 = document.createTextNode('文本1'); //创建一个文本节点

    var text2 = document.createTextNode('文本2'); //创建一个文本节点

    sdf.appendChild(text1); //将新节点添加到sdf节点里子节点末尾

    sdf.appendChild(text2); //将新节点添加到sdf节点里子节点末尾

    alert(sdf.childNodes.length);  //查看元素节点里的子节点集合长度

    //返回2，说明是两个文本节点

    //<div id="box" title="标题">文本1文本2</div>

    //注意：此时添加了两个文本节点，但是用眼睛看就像是一个文本节点，这里一点要注意

    //normalize()合并同级的文本节点

    sdf.normalize(); //将一个元素节点里的同级多个文本子节点，合并成一个文本子节点

    alert(sdf.childNodes.length); //查看元素节点里的子节点集合长度

    //返回：1 ，说明已经合并了

};

splitText()分离一个文本节点，参数是要分离的字符数
使用方式：
目标文本节点.splitText(分离几个字符)

//<div id="box" title="标题">这是一段文本</div>

window.onload = function() { //window.onload事件，等待html执行完成后，执行匿名函数

    var sdf = document.getElementById('box');  //通过id获取到标签

    alert(sdf.childNodes.length);  //查看元素里的子节点长度

    //返回：1 ，说明是一个文本子节点

    alert(sdf.childNodes[0].nodeValue); //查看文本子节点内容

    //返回：这是一段文本

    //splitText()分离一个文本节点，参数是要分离的字符数

    sdf.childNodes[0].splitText(3);  //将文本节点前3个字符分离成一个文本节点

    alert(sdf.childNodes.length);  //查看元素里的子节点长度

    //返回2，说明已经分离了

    alert(sdf.childNodes[0].nodeValue); //查看文本子节点内容

};

Text还提供了一些别的DOM操作的方法如下：

deleteData()删除一个文本节点里指定范围的字符，参数是要删除字符的起始位置,和结束位置
使用方式：
目标文本节点.deleteData(起始位置,结束位置)

//<div id="box" title="标题">这是一段文本</div>

window.onload = function() { //window.onload事件，等待html执行完成后，执行匿名函数

    var sdf = document.getElementById('box');  //通过id获取到标签

    alert(sdf.childNodes[0].nodeValue);  //查看节点里子元素的文本

    //返回：这是一段文本

    //deleteData()删除一个文本节点里指定范围的字符，参数是要删除字符的起始位置,和结束位置

    sdf.childNodes[0].deleteData(0,3);  //删除文本节点里的指定文本，从0-3位置删除

    alert(sdf.childNodes[0].nodeValue); //查看删除后的文本

    //返回：段文本

};

insertData()在文本节点里的指定位置添加指定文本内容
使用方式：
目标文本节点.insertData(要添加文本的字符位置,要添加的文本内容)

//<div id="box" title="标题">这是一段文本</div>

window.onload = function() { //window.onload事件，等待html执行完成后，执行匿名函数

    var sdf = document.getElementById('box');  //通过id获取到标签

    alert(sdf.childNodes[0].nodeValue);  //查看节点里子元素的文本

    //返回：这是一段文本

    //insertData()在文本节点里的指定位置添加指定文本内容

    sdf.childNodes[0].insertData(4,'测试'); //insertData()在文本节点里的指定位置添加指定文本内容

    alert(sdf.childNodes[0].nodeValue);  //查看节点里子元素的文本

    //返回：这是一段测试文本  添加成功

};

replaceData()在文本节点里的指定范围替换成指定文本内容
使用方式：
目标文本节点.replaceData(要替换的起始范围位置,要替换几个字符,要替换的字符串)

//<div id="box" title="标题">这是一段文本</div>

window.onload = function() { //window.onload事件，等待html执行完成后，执行匿名函数

    var sdf = document.getElementById('box');  //通过id获取到标签

    alert(sdf.childNodes[0].nodeValue);  //查看节点里子元素的文本

    //返回：这是一段文本

    //replaceData()在文本节点里的指定范围替换成指定文本内容

    sdf.childNodes[0].replaceData(2,2,'测试');

    alert(sdf.childNodes[0].nodeValue);  //查看替换后的文本

    //返回：这是测试文本

};

substringData()在文本节点里获取指定范围文本内容
使用方式：
目标文本节点.substringData(起始范围位置,获取几个字符)

//<div id="box" title="标题">这是一段文本</div>

window.onload = function() { //window.onload事件，等待html执行完成后，执行匿名函数

    var sdf = document.getElementById('box');  //通过id获取到标签

    alert(sdf.childNodes[0].nodeValue);  //查看节点里子元素的文本

    //返回：这是一段文本

    //substringData()在文本节点里获取指定范围文本内容

    alert(sdf.childNodes[0].substringData(0,2)); //substringData()在文本节点里获取指定范围文本内容

    //返回：这是

};

5.Comment类型，html注释节点

Comment类型表示文档中的注释。nodeType是8，nodeName是#comment，nodeValue是注释的内容。

//<div id="box" title="标题"><!--这是注释--></div>

window.onload = function() { //window.onload事件，等待html执行完成后，执行匿名函数

    //非IE获取注释节点

    var asf = document.getElementById('box');  //通过ID获取到注释的父节点

    alert(asf.childNodes.length);  //查看节点里的子节点长度

    //返回1：说明就一个子节点

    alert(asf.childNodes[0].nodeName);  //查看第一个子节点的标签名称

    //返回：#comment 表示是标签名称

    alert(asf.childNodes[0].nodeValue);  //查看第一个子节点的文本内容

    //返回：这是注释

    //低版本IE获取注释节点

    var asf2 = document.getElementsByName('!');  //通过标签名称获取到注释标签节点

    alert(asf2.length);  //查看获取到的注释节点长度

};

6.Attr类型，标签属性类型

Attr类型表示文档元素中的属性。nodeType为2，nodeName为属性名，nodeValue为属性值。DOM基础篇已经详细介绍过，略。

二．DOM扩展

1.呈现模式

从IE6开始开始区分标准模式和混杂模式(怪异模式)，主要是看文档的声明。IE为document对象添加了一个名为compatMode属性，这个属性可以识别IE浏览器的文档处于什么模式如果是标准模式，则返回CSS1Compat，如果是混杂模式则返回BackCompat。

compatMode属性，识别IE浏览器的文档处于什么模式，标准模式返回CSS1Compat，混杂模式返回BackCompat

window.onload = function() { //window.onload事件，等待html执行完成后，执行匿名函数

    //compatMode属性，识别IE浏览器的文档处于什么模式，标准模式返回CSS1Compat，混杂模式返回BackCompat

    alert(document.compatMode);  //查看IE浏览器的文档处于什么模式

    //返回：CSS1Compat

    //如果把html文档声明<!DOCTYPE html>删除了就是混杂模式

    //返回：BackCompat

};

clientWidth属性，查看节点元素的宽度

window.onload = function() { //window.onload事件，等待html执行完成后，执行匿名函数

    //判断文档处于什么模式，如果是标准模式

    if (document.compatMode == 'CSS1Compat') {

        //如果是标准模式，获取到html节点，查看它的宽度

        alert(document.documentElement.clientWidth);

    } else {

        //如果不是标准模式，获取到body标签节点，查看它的宽度

        alert(document.body.clientWidth);

    }

};

后来Firefox、Opera和Chrome都实现了这个属性。从IE8后，又引入documentMode新属性，因为IE8有3种呈现模式分别为标准模式8，仿真模式7，混杂模式5。所以如果想测试IE8的标准模式，就判断document.documentMode > 7 即可。

documentMode属性，识别IE浏览器的文档处于什么模式，标准模式8，仿真模式7，混杂模式5，返回数值

window.onload = function() { //window.onload事件，等待html执行完成后，执行匿名函数

    //documentMode属性，识别IE浏览器的文档处于什么模式，标准模式8，仿真模式7，混杂模式5，返回数值

    if (document.documentMode <= 5) {

        alert('混杂模式');

    }else if(document.documentMode <= 7){

        alert('仿真模式');

    }else if(document.documentMode <= 8){

        alert('标准模式');

    }

};

2.滚动

DOM提供了一些滚动页面的方法，如下：

scrollIntoView()方法，将一个元素节点设置滚动在可见范围
注意：这里说的可见范围是这样的，比如目标节点在页面底部，而目标节点上面有很多类容，也就是目标节点超出浏览器范围不可见，要手动拖动滚动条才可见，scrollIntoView()方法可以定位滚动条到目标节点可见范围

window.onload = function() { //window.onload事件，等待html执行完成后，执行匿名函数

    document.getElementById('box').scrollIntoView();    //设置指定可见

};

3.children属性

children属性，获取一个元素节点里的子节点，自动过滤掉空白文本节点【推荐】

由于子节点空白问题，IE和其他浏览器解释不一致。虽然可以过滤掉，但如果只是想得到有效子节点，可以使用children属性，支持的浏览器为：IE5+、Firefox3.5+、Safari2+、Opera8+和Chrome，这个属性是非标准的。

// <div id="box" title="标题">

//     <p>测试1</p>

//     <p>测试2</p>

//     <p>测试3</p>

// </div>

window.onload = function() { //window.onload事件，等待html执行完成后，执行匿名函数

    var asf = document.getElementById('box');    //通过id获取到元素节点

    alert(asf.children);  //children属性，获取一个元素节点里的子节点，自动过滤掉空白文本节点

    //返回：[object HTMLCollection] 子节点集合对象

    alert(asf.children.length);  //查看子节点的长度

    //返回：3 ，已经自动过滤了空白文本子节点

    //循环出所有子节点的标签名称和内容文本

    for (var i = 0; i < asf.children.length; i ++){  //根据子节点长度循环次数

        //每次循环打印出循环到的子节点标签名称和子节点标签文本内容

        alert('标签名称：' + asf.children[i].nodeName + '-' + '标签文本内容：' + asf.children[i].innerHTML);

    }

};

4.contains()方法

contains()方法，判断一个节点是否是另外一个节点的子节点，返回布尔值
使用方式：
要判断的父节点.contains(要判断的子节点)

// <div id="box" title="标题">

//     <p>测试1</p>

//     <p>测试2</p>

//     <p>测试3</p>

// </div>

window.onload = function() { //window.onload事件，等待html执行完成后，执行匿名函数

    var asf = document.getElementById('box');    //通过id获取到元素节点

    //contains()方法，判断一个节点是否是另外一个节点的子节点，返回布尔值

    alert(asf.contains(asf.children[0])); //判断asf节点里的第一个子节点是否是asf的子节点

    //true

};

PS：早期的Firefox不支持这个方法，新版的支持了，其他浏览器也都支持，Safari2.x浏览器支持的有问题，无法使用。所以，必须做兼容。

在Firefox的DOM3级实现中提供了一个替代的方法compareDocumentPosition()方法。这个方法确定两个节点之间的关系。

compareDocumentPosition()方法，判断两个节点之间的关系，返回关系掩码
使用方式：
要判断的a节点.compareDocumentPosition(要判断的b节点)

关系掩码表

掩码	节点关系
1	无关(节点不存在)
2	居前(节点在参考点之前)
4	居后(节点在参考点之后)
8	包含(节点是参考点的祖先)
16	被包含(节点是参考点的后代)

// <div id="box" title="标题">

//     <p>测试1</p>

//     <p>测试2</p>

//     <p>测试3</p>

// </div>

window.onload = function() { //window.onload事件，等待html执行完成后，执行匿名函数

    var asf = document.getElementById('box');    //通过id获取到元素节点

    //compareDocumentPosition()方法，判断两个节点之间的关系，返回关系掩码

    alert(asf.compareDocumentPosition(asf.children[0])); //判断asf节点里的第一个子节点与asf节点是什么关系

    //返回：20，

    //为什么会出现20，那是因为满足了4和16两项，最后相加了

};

PS：为什么会出现20，那是因为满足了4和16两项，最后相加了。为了能让所有浏览器都可以兼容，我们必须写一个兼容性的函数。

contains()方法和compareDocumentPosition()方法的兼容方式

自定义一个判断两个节点关系的函数，判断一个节点是否是另外一个节点的子节点，返回布尔值

// <div id="box" title="标题">

//     <p>测试1</p>

//     <p>测试2</p>

//     <p>测试3</p>

// </div>

//contains()方法和compareDocumentPosition()方法的兼容方式

window.onload = function() { //window.onload事件，等待html执行完成后，执行匿名函数

    //首先创建两个节点，用于判断它们之间的关系

    var jd1 = document.getElementById('box');  //获取到父节点

    var jd2 = jd1.children[0]; //获取到子节点

    //执行判断两个节点关系函数

    alert(containsjr(jd1,jd2));

    //自定义兼容函数

    function containsjr(jdx1,jdx2) {  //函数接收两个参数，第一个参数父节点，第二个参数子节点

        //判断浏览器如果支持contains()方法 ，并且非Safari浏览器 ，导入浏览器检测模块browserdetect.js

        if (typeof jdx1.contains != 'undefined' && !(BrowserDetect.browser == 'Safari' && BrowserDetect.version < 3)){

            //返回contains()方法执行后的结果

            return jdx1.contains(jdx2); //contains()方法，判断一个节点是否是另外一个节点的子节点，返回布尔值

        }else if(typeof jdx1.compareDocumentPosition == 'function'){  //判断浏览器如果支持compareDocumentPosition方法

            return jdx1.compareDocumentPosition(jdx2) > 16; //compareDocumentPosition()方法，判断两个节点之间的关系，返回关系掩码

        }else {

            //更低的浏览器兼容，通过递归一个个获取他的父节点是否存在

            var node = jdx2.parentNode; //通过子节点获取父节点

            //do...while语句是一种先运行，后判断的循环语句。也就是说，不管条件是否满足，至少先运行一次循环体。

            do {

                if (node === jdx1){ //判断通过子节点获取到的父节点如果等于函数传参的父节点

                    return true;

                }else {

                    node = node.parentNode; //否则node变量等于父节点的父节点

                }

            }while (node != null);

            return false;

        }

    }

};

三．DOM操作内容

虽然在之前我们已经学习了各种DOM操作的方法，这里所介绍是innerText、innerHTML、outerText和outerHTML等属性。除了之前用过的innerHTML之外，其他三个还么有涉及到。

1.innerText属性【推荐】

innerText属性，设置或获取一个元素的文本内容，获取(如有html直接过滤掉)，设置文本(如有html转义)

使用方式：

目标节点.innerText

// <div id="box" title="标题">

//     <p>测试1</p>

//     <p>测试2</p>

//     <p>测试3</p>

// </div>

window.onload = function() { //window.onload事件，等待html执行完成后，执行匿名函数

    var asf = document.getElementById('box');  //通过ID获取一个节点

    alert(asf.innerText);   //innerText属性，设置或获取一个元素的文本内容，获取(如有html直接过滤掉)，设置文本(如有html转义)

    //返回

    // 测试1

    // 测试2

    // 测试3

    asf.innerText = '<b>修改</b>';  //重新设置节点内容

    alert(asf.innerText);  //重新查看节点内容

    //<b>修改</b>

};

PS：除了Firefox火狐浏览器之外，其他浏览器均支持这个方法。但Firefox的DOM3级提供了另外一个类似的属性：textContent，做上兼容即可通用。

textContent属性(只有火狐支持)，设置或获取一个元素的文本内容，获取(如有html直接过滤掉)，设置文本(如有html转义)

// <div id="box" title="标题">

//     <p>测试1</p>

//     <p>测试2</p>

//     <p>测试3</p>

// </div>

window.onload = function() { //window.onload事件，等待html执行完成后，执行匿名函数

    var asf = document.getElementById('box');  //通过ID获取一个节点

    alert(asf.textContent);   //textContent属性，设置或获取一个元素的文本内容，获取(如有html直接过滤掉)，设置文本(如有html转义)

    //返回

    // 测试1

    // 测试2

    // 测试3

    asf.textContent = '<b>修改</b>';  //重新设置节点内容

    alert(asf.textContent);  //重新查看节点内容

    //<b>修改</b>

};

innerText和textContent兼容方案

// <div id="box" title="标题">

//     <p>测试1</p>

//     <p>测试2</p>

//     <p>测试3</p>

// </div>

window.onload = function() { //window.onload事件，等待html执行完成后，执行匿名函数

    var asf = document.getElementById('box');  //通过ID获取一个节点

    alert(getInnerText(asf)); //获取节点文本

    setInnerText(asf,'<b>赋值</b>')

    alert(getInnerText(asf)); //获取节点文本

};

//兼容方案

//获取方案

function getInnerText(element) { //接收节点

    //三元运算，判断节点的textContent类型等于string，执行element.textContent，否则执行element.innerText

    return (typeof element.textContent == 'string') ? element.textContent : element.innerText;

}

//设置方案

function setInnerText(element, text) { //接收节点，和要设置的字符串

    if (typeof element.textContent == 'string') {

        element.textContent = text;

    } else {

        element.innerText = text;

    }

}

2.innerHTML属性【推荐】

innerHTML属性，获取节点里的文本内容，不过滤html

// <div id="box" title="标题">

//     <p>测试1</p>

//     <p>测试2</p>

//     <p>测试3</p>

// </div>

window.onload = function() { //window.onload事件，等待html执行完成后，执行匿名函数

    var asf = document.getElementById('box');  //通过ID获取一个节点

    alert(asf.innerHTML); //获取节点里的文本内容，不过滤html

    asf.innerHTML = '<b>123</b>'; //设置节点里的文本内容，可解析HTML

    alert(asf.innerHTML); ////获取节点里的文本内容，不过滤html

};

PS：关于最常用的innerHTML属性和节点操作方法的比较，在插入大量HTML标记时使用innerHTML的效率明显要高很多。因为在设置innerHTML时，会创建一个HTML解析器。这个解析器是浏览器级别的(C++编写)，因此执行JavaScript会快的多。但，创建和销毁HTML解析器也会带来性能损失。最好控制在最合理的范围内，如下：

for (var i = 0; i < 10; i ++) {

ul.innerHTML = '<li>item</li>';            //避免频繁

}

//改

for (var i = 0; i < 10; i ++) {

a = '<li>item</li>';                        //临时保存

}

ul.innerHTML = a;

虽然innerHTML可以插入HTML，但本身还是有一定的限制，也就是所谓的作用域元素，离开这个作用域就无效了

// <div id="box" title="标题">

//     <p>测试1</p>

//     <p>测试2</p>

//     <p>测试3</p>

// </div>

window.onload = function() { //window.onload事件，等待html执行完成后，执行匿名函数

    var asf = document.getElementById('box');  //通过ID获取一个节点

    asf.innerHTML = "<script>alert('Lee');</script>";    //<script>元素不能被执行

    asf.innerHTML = "<style>background:red;</style>";    //<style>元素不能被执行

};

3.outerText

outerText在取值的时候和innerText一样，同时火狐不支持，而赋值方法相当危险，他不单替换了文本内容，还将节点元素直接抹去。【不建议使用】

// <div id="box" title="标题">

//     <p>测试1</p>

//     <p>测试2</p>

//     <p>测试3</p>

// </div>

window.onload = function() { //window.onload事件，等待html执行完成后，执行匿名函数

    var asf = document.getElementById('box');  //通过ID获取一个节点

    asf.outerText = '<b>123</b>';  //给节设置文本内容

    alert(document.getElementById('box'));            //null，建议不去使用

};

4.outerHTML

outerHTML属性在取值和innerHTML一致，但和outerText也一样，很危险，赋值的之后会将元素抹去。【不建议使用】

// <div id="box" title="标题">

//     <p>测试1</p>

//     <p>测试2</p>

//     <p>测试3</p>

// </div>

window.onload = function() { //window.onload事件，等待html执行完成后，执行匿名函数

    var asf = document.getElementById('box');  //通过ID获取一个节点

    asf.outerHTML = '123'; //设置节点文本内容

    alert(document.getElementById('box'));            //null，建议不去使用，火狐旧版未抹去

};

第一百一十四节，JavaScript文档对象，DOM进阶的更多相关文章

第一百一十三节，JavaScript文档对象，DOM基础
JavaScript文档对象,DOM基础学习要点: 1.DOM介绍 2.查找元素 3.DOM节点 4.节点操作 DOM(Document Object Model)即文档对象模型,针对HTML和XM ...
第三百一十四节，Django框架，自定义分页
第三百一十四节,Django框架,自定义分页自定义分页模块 #!/usr/bin/env python #coding:utf-8 from django.utils.safestring impo ...
第一百一十九节，JavaScript事件入门
JavaScript事件入门学习要点: 1.事件介绍 2.内联模型 3.脚本模型 4.事件处理函数 JavaScript事件是由访问Web页面的用户引起的一系列操作,例如:用户点击.当用户执行某些操 ...
第一百一十六节，JavaScript，DOM操作样式
JavaScript,DOM操作样式一．操作样式 CSS作为(X)HTML的辅助,可以增强页面的显示效果.但不是每个浏览器都能支持最新的CSS能力.CSS的能力和DOM级别密切相关,所以我们有必要检 ...
linux杂记（十四）CAJ文档阅读方法
关于Linux下看CAJ文档的方法前言:由于大四狗要写各种各样的综述,看各种论文,关于知网为何没有PDF下载,关于为何知网没有CAJ阅读器for linux的种种蛋疼问题,都不要问我. 说回正题,网 ...
学习笔记：javascript 文档对象（document）
1.documnet函数方法描述 close() 关闭用 document.open() 方法打开的输出流,并显示选定的数据. getElementById() 返回对拥有指定 id 的第一个对象 ...
文档对象DOM的操作及使用
Dom对象是什么? DOM对象就是每次你打开浏览器后,进入一个网址时浏览器获取到的HTML文本内容,当浏览器获取到HTML文本内容时,会将其内容以DOM对象的形式缓存到内存中,这时你便可以对DOM对象 ...
第一百四十四节，JavaScript，列队动画
JavaScript,列队动画将上一节的,移动透明动画,修改成可以支持列队,也就是可以给这个动画方法多个动画任务,让它完成一个动画任务后,在执行第二个动画任务原理: 就是在原有的动画方法里加一个回 ...
第一百一十五节，JavaScript，DOM操作表格
JavaScript,DOM操作表格学习要点: 1.操作表格 DOM在操作生成HTML上,还是比较简明的.不过,由于浏览器总是存在兼容和陷阱,导致最终的操作就不是那么简单方便了.本章主要了解一下DO ...

随机推荐

Android Studio利用异步任务AsyncTask发送post请求获取json数据
syncTask,是Android提供的轻量级的异步类,可以直接继承AsyncTask,在类中实现异步操作,并提供接口反馈当前异步执行的程度(可以通过接口实现UI进度更新),最后反馈执行的结果给UI主 ...
Redis安装（CentOS7/tar.gz）
1. 将安装包redis-3.2.0.tar.gz上传到linux系统,位置随意. 2. 解压文件 .tar.gz 3. 解压后会在当前目录生成文件夹“redis-3.2.0”,将其拷贝到" ...
[MFC美化] MFC界面UI库总结
稍微说下自己用过的感受: 1.SkinMagic 动态库DLL使用,(有VC6版本的静态链接库,没能成功调用).对控件:菜单和下拉框(下拉滚动条)有问题.不能自由设置颜色背景皮肤格式:.smf,可使 ...
hdu2159二维费用背包
题目连接背包九讲----二维费用背包问题二维费用的背包问题是指:对于每件物品,具有两种不同的费用:选择这件物品必须同时付出这两种代价:对于每种代价都有一个可付出的最大值(背包容量).问怎样选择物 ...
Tiny6410之MMU开启
存储管理单元存储管理单元MMU概述在ARM系统中,存储管理单元MMU主要完成以下工作:1.虚拟存储空间到物理存储空间的映射.在ARM中采用页式虚拟存储管理.他把虚拟地址空间分成一个个固定大小的块,每 ...
Scala 中Null, None, Nothing, Nil
转自:http://blog.csdn.net/bluejoe2000/article/details/30465175 在scala中这四个类型名称很类似,作用确实完全不同的. None是一个obj ...
ansible module
模块是一个独立的, 可以复用的脚本, 它可以被anisible API, Ansible 或者ansible-playbook使用. 在模块退出之前, 它通过输出一个json字符串到标准输出从而反 ...
js数组操作-打乱数组
<style> html, body { margin: 0; padding: 0;} div span { display: inline-block; width: 25px; he ...
批处理改hosts
@echo off color 0F @attrib -r "%windir%\system32\drivers\etc\hosts" @echo ######测试配置 beg & ...
dll间接应用问题
在项目prj引用一个dll,a.dll,时,此dll应用b.dll 此时不将b.dll引用添加到prj,会有问题

第一百一十四节，JavaScript文档对象，DOM进阶

第一百一十四节，JavaScript文档对象，DOM进阶的更多相关文章

随机推荐

热门专题