Javascript教程:innerText属性在火狐实现的实例

文章简介:为firefox实现innerText属性。

很多代码写了又忘忘了又写,很浪费,所以决定养成做笔记的习惯。

知识点:

0、为什么要innerText?因为安全问题

1、为firefox dom模型扩展属性

2、currentStyle属性可以取得实际的style状态

3、IE实现innerText时考虑了display方式,如果是block则加换行

4、为什么不用textContent?因为textContent没有考虑元素的display方式,所以不完全与IE兼容

<html>
<body>
<div id="d1"><a href="aa">ccc</a>ddd<div>eeee</div>fff</div>
<script type="text/javascript">
<!--
//
// patch of innerText for firefox
//
(function (bool) {
function setInnerText(o, s) {
while (o.childNodes.length !=
0) {
o.removeChild(o.childNodes[0]);
}

o.appendChild(document.createTextNode(s));
}

function getInnerText(o) {
var sRet =
"";

for (var i =
0; i < o.childNodes.length; i ++) {
if (o.childNodes[i].childNodes.length !=
0) {
sRet += getInnerText(o.childNodes[i]);
}

if (o.childNodes[i].nodeValue) {
if (o.currentStyle.display ==
"block") {
sRet += o.childNodes[i].nodeValue +
"\n";
} else {
sRet += o.childNodes[i].nodeValue;
}
}
}

return sRet;
}

if (bool) {
HTMLElement.prototype.__defineGetter__("currentStyle", function () {
return
this.ownerDocument.defaultView.getComputedStyle(this, null);
});

HTMLElement.prototype.__defineGetter__("innerText", function () {
return getInnerText(this);
})

HTMLElement.prototype.__defineSetter__("innerText", function(s) {
setInnerText(this, s);
})
}
})(/Firefox/.test(window.navigator.userAgent));
//-->
</script>

<script type="text/javascript">
<!--
var d1 = document.getElementById("d1");

alert(d1.innerText);
d1.innerText =
"xxx";
//-->
</script>
</body>
</html>

时间: 2024-12-02 19:13:36

Javascript教程:innerText属性在火狐实现的实例的相关文章

javascript中innerText和innerHTML属性用法实例分析

  本文实例讲述了javascript中innerText和innerHTML属性用法.分享给大家供大家参考.具体分析如下: 几乎所有DOM元素都有innerText,innertHTML属性(注意大小写),分别是元素标签内 的文本表示形式和HTML源代码,这两个属性是可读可写的 innerHTML也可以取代createElement,属于简单,粗放型,后果自负的创建 ? 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24

javascript中innerText和innerHTML属性用法实例分析_javascript技巧

本文实例讲述了javascript中innerText和innerHTML属性用法.分享给大家供大家参考.具体分析如下: 几乎所有DOM元素都有innerText,innertHTML属性(注意大小写),分别是元素标签内 的文本表示形式和HTML源代码,这两个属性是可读可写的 innerHTML也可以取代createElement,属于简单,粗放型,后果自负的创建 <html xmlns="http://www.w3.org/1999/xhtml"> <head>

JavaScript教程--从入门到精通(6)

javascript|教程 JavaScript对象系统的使用  使用浏览器的内部对象系统, 可实现与HTML文档进行交互.它的作用是将相关元素组织包装起来,提供给程序设计人员使用,从而减轻编程人的劳动,提高设计Web页面的能力. 一.浏览器对象层次及其主要作用 除了前面提到过的文档document对象外,Navigator浏览器中还提供了窗口(Window)对象以及历史(History)和位置(Location)对象. 浏览器对象(Navigator) 提供有关浏览器的信息 窗口对象(Wind

JavaScript教程--从入门到精通(5)

javascript|教程 在JavaScript中创建新对象   使用JavaScript可以创建自己的对象.虽然JavaScript内部和浏览器本身的功能已十分强大,但JavaScript还是提供了创建一个新对象的方法.使其不必像超文本标识语言那样,求于或其它多媒体工具,就能完成许多复杂的工作. 在JavaScript中创建一个新的对象是十分简单的.首先它必须定义一个对象,而后再为该对象创建一个实例.这个实例就是一个新对象,它具有对象定义中的基本特征. 一.对象的定义JavaScript对象

JavaScript教程--从入门到精通(4)

javascript|教程 基于对象的JavaScript语言 JavaScript语言是基于对象的(Object-Based),而不是面向对象的(object-oriented).之所以说它是一门基于对象的语言,主要是因为它没有提供象抽象.继承.重载等有关面向对象语言的许多功能.而是把其它语言所创建的复杂对象统一起来,从而形成一个非常强大的对象系统. 虽然JavaScript语言是一门基于对象的,但它还是具有一些面向对象的基本特征.它可以根据需要创建自己的对象,从而进一步扩大JavaScrip

JavaScript教程--从入门到精通(3)

javascript|教程 JavaScript程序构成 JavaScript脚本语言的基本构成是由控制语句.函数.对象.方法.属性等,来实现编程的. 一.程序控制流 在任何一种语言中,程序控制流是必须的,它能使得整个程序减小混乱,使之顺利按其一定的方式执行.下面是JavaScript常用的程序控制流结构及语句:1.if条件语句 基本格式if(表述式)语句段1:......else语句段2:..... 功能:若表达式为true,则执行语句段1:否则执行语句段2. 说明:if -else 语句是J

JavaScript教程--从入门到精通(2)

javascript|教程 JavaScript基本数据结构  JavaScript提供脚本语言的编程与C++非常相似,它只是去掉了C语言中有关指针等容易产生的错误,并提供了功能强大的类库.对于已经具备C++或C语言的人来说,学习JavaScript脚本语言是一件非常轻松愉快的事. 一.JavaScript代码的加入 JavaScript的脚本包括在HTML中,它成为HTML文档的一部分.与HTML标识相结合,构成了一个功能强大的Internet网上编程语言.可以直接将JavaScript脚本加

JavaScript教程--从入门到精通(9)

javascript|教程 用JavaScript实现更复杂的交互 一.什么是框架 框架Frames最主要功用是"分割"视窗,使每个"小视窗"能显示不同的HTM L文件,不同框架之间可以互动(interact),这就是说不同框架之间可以交换讯息与资料.例如:假设您开了两个frames,第一个frame可显示书的目录,第二个frame则显示章节的具体内容. 框架可以将屏幕分割成不同的区域,每个区域有自己的URL,通过Frames[]数组对象来实现不同框架的访问.实际上

JavaScript教程--从入门到精通(8)

javascript|教程 用JavaScript脚本实现Web页面信息交互 要实现动态交互,必须掌握有关窗体对象(Form)和框架对象(Frames)更为复杂的知识. 一.窗体基础知识 窗体对象可以使设计人员能用窗体中不同的元素与客户机用户相交互,而用不着在之前首先进行数据输入,就可以实现动态改变Web文档的行为. 1.什么是窗体对象窗体(Form):它构成了Web页面的基本元素.通常一个Web页面有一个窗体或几个窗体,使用Forms[]数组来实现不同窗体的访问.<form Name=Form