document.write() 的影响时机
当document.write()函数和一般文档流同时加载时,可以正常输出,不影响其他文档流,下方例1代码,其中 “我只是一个文档流” \ “我是跟第一个一起来的”\ 以及 标签 \都是第一时间在统一文档流内加再进来的,此时它们互不影响,且按解析顺序排列,浏览器效果如图 例[1]-1
图 例[1]-1
重点内容注意到我的js代码中还为 按钮绑定了一个事件 onclick 当点击该按钮时会进行等号右端函数大括号内定义的操作,在这里我定义的是 document.write() , 大家注意,此处的语句并不在文档流第一次加载时进行解析,而是在用户点击 按钮时才进行解析,即输出
document.write()内的内容. 点击后的效果图如下
图 例[1]-2
此时大家注意到,先前加载的文档没有了已经没有了,这就是 document.write() 清除文档流的时机;
例[1]:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
</head>
<body>
<h>我只是一个文档流</h>
<button>点我</button><br />
<script type="text/javascript">
document.write("我是跟第一个一起来的");
var btn=document.getElementsByTagName("button")[0];
btn.onclick = function (){
document.write("我是最新的文档流");
}
</script>
</body>
</html>
如何解决呢?
我们可不可以把write()的范围限制在一个小圈子里,使它不对其他的元素造成影响呢?我们来试试:
错误示范[1]:
<html>
<head>
<meta charset="utf-8" />
<title></title>
</head>
<body>
<h>我只是一个文档流</h>
<div></div>
<button>点我</button><br />
<script type="text/javascript">
var div1 = document.getElementsByTagName("div")[0];
document.innerHTML="我是跟第一个一起来的";
var btn=document.getElementsByTagName("button")[0];
btn.onclick = function (){
div1.innerHTML="我是最新的文档流";
}
</script>
</body>
</html>
这个代码是有错的,document.write() 并不可以更换 对象,只能用document 对象;
这种情况下,就不能再用document.write()了,这时候就需要下面的主角: innerText/innerHTML
document.innerText=” ” 的影响时机
每个加载的文档流都会成为document对象,直接用document.innerText的话 并不会加载出内容,所以此处我们要用一个具体的对象 element.innerText=”” ,如例[2] 代码如下:
例[2]:
<html>
<head>
<meta charset="utf-8" />
<title></title>
</head>
<body>
<h>我只是一个文档流</h>
<div></div>
<button>点我</button><br />
<script type="text/javascript">
var div1 = document.getElementsByTagName("div")[0];
div1.innerText="我是跟第一个一起来的";
var btn=document.getElementsByTagName("button")[0];
btn.onclick = function (){
div1.innerText="我是最新的文档流";
}
</script>
</body>
</html>
当文档流第一次加载时,效果是下面这样的:
图 例[2]-1
可以看出 div1.innerText=”我是跟第一个一起来的”已经输出了.接下来 和上面的 document.write()一样,我们点击按钮触发里面的事件,触发后的效果图如下:
图 例[2]-2
可以看出,div里的文字被重置了,只有触发事件后 自定义innerText里面的文字了,可以理解为div里的文档被替换掉了.
这是innerText 的触发时机.
innerHTML 用法基本和 innerText 相同,在你用得到的范围内,它们基本相同.所以它们的微妙区别此处不再赘述了.
提示一点.innerHTMl兼容性比innerText要高,推荐使用innerHTMl;
(完)