1， 如果把document.write写在方法里面再调用的时候，可以重新打开一个document对象，在新的document对象里面载入新的文本。可以后退和前进看到历史内容。
2， 如果直接在document对象里面write写入文本的时候，不会重新开一个document对象，在里面直接加上内容。
整个文档载入顺序是从上到下载入
在函数里面可以document.close()然后再document.write()，是关闭原有的文档，再向新的文档里面再写入内容
注意参考：2.html页面和1.html页面
我们在找的时候，可以通过
document.all
document.links
document.images
document.forms
document.metas
但是这样找起来麻烦，因此我们推出了:
getElementsBy
getElementBy
每次都要写: document.getElementById('content') 太啰嗦，太复杂，太悲情了
function $(id){
return document.getElementById(id);
}
getElementsByTagName()
getElementsByName();
查找class的方法，用自己写js的方式将其写出来：
function $(id){
var arr=new Array();
var str=id.substr(0,1);
var classname=id.substr(1);
if(str=='#'){
return document.getElementById(id);
}else if(str=='.'){
var d=document.all;
var j=0;
for(i=0;i<d.length;i++){
if(d[i].className==classname){
arr[j]=d[i];
j++;
}
}
return arr;
}else{
return document.getElementsByTagName(id);
}
}Form下面的方法：
Submit();
我可以让button也实现提交效果就通过submit()方法去实现
focus()方法 让焦点回到神马地方去
1.html
<html>
<head>
</head>
<body>
welcome？<br>
记事本 OF PHP <br />
<button onclick="show()">奇迹</button>
<script>
function show(){
document.write('www.xlxz.org');
document.close();
document.write('php.xlxz.org。');
}
</script>
</body>
</html>
2.html
<html>
<head>
</head>
<body>
<button onclick="demo()">点击</button>
<script>
function demo(){
var d=document.getElementById('content');
d.innerHTML='hello';
}
</script>
<div id="content">xlxz.org</div>
</body>
</html>
a.html
<html>
<head>
</head>
<body>
<script>
for(a in document){
document.write(a+' '+document[a]+'<br>');
}
</script>
</body>
</html>
all.html
<html>
<head>
</head>
<body>
<img src="youfuqi.jpg" name="a"/>
<a href="http://php.xlxz.org">xlxz</a>
<div>this is haha</div>
<script>
var d=document.all[4];
alert(d.tagName);
</script>
</body>
</html>
cls.html
<html>
<head>
</head>
<body>
<button onclick="show()">php.xlxz.org</button>
<div id="cls"></div>
<script>
function show(){
var img=document.createElement('img');
//img.setAttribute('src','cls.jpg');
img.src='cls.jpg';
img.alt='php.jpg';
img.setAttribute('width',300);
var a=document.createElement('a');
a.href='http://www.xlxz.org';
a.setAttribute('target','_blank');
a.appendChild(img);
var cls=document.getElementById('cls');
cls.appendChild(a);
//cls.removeChild(a);
}
</script>
</body>
</html>
getId.html
<html>
<head>
</head>
<body>
<div id="content">apc</div>
<div id="ss">php,postgresql</div>
<script>
var d=$('content');
d.innerHTML='apache,nginx';
var s=$('ss');
s.innerHTML='php.mysql.linux.freebsd';
function $(id){
return document.getElementById(id);
}
</script>
</body>
</html>
getName.html
<html>
<head>
</head>
<body>
<div class="a">k</div>
<div class="b">五</div>
<div class="a">水</div>
<div>我</div>
<img src="1.jpg" name="a"/>
<img src="2.jpg" name="a"/>
<script>
//var d=document.getElementsByTagName('div');
//alert(d[2].innerHTML);
//var d=document.getElementsByName('a');
//alert(d[1].src);
/*
function $(id){
var str=id.substr(0,1);
if(str=='#'){
return document.getElementById(id);
}else{
return document.getElementsByTagName(id);
}
}
*/
var t=$('.a');
t[0].innerHTML='xlxz';
function $(id){
var arr=new Array();
var str=id.substr(0,1);
var classname=id.substr(1);
if(str=='#'){
return document.getElementById(id);
}else if(str=='.'){
var d=document.all;
var j=0;
for(i=0;i<d.length;i++){
if(d[i].className==classname){
arr[j]=d[i];
j++;
}
}
return arr;
}else{
return document.getElementsByTagName(id);
}
}
</script>
</body>
</html>
images.html
<html>
<head>
</head>
<body>
<img src="1.jpg" name="a"/>
<img src="2.jpg" />
<img src="3.jpg" />
<img src="4.jpg" />
<script>
document.title='实力啊';
document.images['a'].src='youfuqi.jpg';
</script>
</body>
</html>
links.html
<html>
<head>
</head>
<body>
<a href="http://www.xlxz.org" name="who">ok</a>
<a href="http://php.xlxz.org">this is </a>
<script>
window.document.links.item('who').innerHTML='桂欢爱谁?';
</script>
</body>
</html>
node.html
<html>
<head>
</head>
<body>
<div>
<div>
<div>声</div>
<div>原</div>
</div>
<div>
<div id="one">php</div>
<div>我想说</div>
</div>
</div>
<script>
var d=document.getElementById('one');
/*
var s=d.parentNode.parentNode.firstChild.lastChild;
alert(s.innerHTML);
var s=d.parentNode.previousSibling.childNodes;
alert(s[1].innerHTML);
var s=d.parentNode.previousSibling.lastChild;
alert(s.innerHTML);
*/
</script>
</body>
</html>
pop.html
<html>
<head>
<style>
.dis{position:absolute;top:30%;left:30%;border:10px solid #ccc;z-index:100}
.tm{
background:rgba(200, 200, 200, 0.8) none repeat scroll 0 0 !important;/*实现FF背景透明，文字不透明*/
filter:Alpha(opacity=80); background:#ccc;width:100%;height:100%;
position:absolute;
top:0px;
left:0px;
z-index:88;
}
</style>
</head>
<body>
<img src="cls.jpg" width="300" height="421" onclick="zk(this)"/>
<script>
function zk(obj){
var div=document.createElement('div');
var img=document.createElement('img');
var di=document.createElement('div');
di.className='tm';
di.id='di';
img.src=obj.src;
div.style.width=obj.width+10+'px';
div.style.height=obj.height+10+'px';
div.onclick=function(){
var di=document.getElementById('di');
var dis=document.getElementById('dis'); document.body.removeChild(di);
document.body.removeChild(dis);
}
div.className='dis';
div.id='dis';
div.appendChild(img);
document.body.appendChild(di);
document.body.appendChild(div);
}
</script>
</body>
</html>
qx.html
<html>
<head>
</head>
<body>
<input type="checkbox" name="a[]">测试啊测试<br />
<input type="checkbox" name="a[]">测试啊测试<br />
<input type="checkbox" name="a[]">测试啊测试<br />
<input type="checkbox" name="a[]">测试啊测试<br />
<input type="checkbox" name="a[]">测试啊测试<br />
<input type="checkbox" name="a[]">测试啊测试<br />
<input type="checkbox" name="a[]">测试啊测试<br />
<input type="checkbox" name="a[]">测试啊测试<br />
<input type="checkbox" name="a[]">测试啊测试<br />
<input type="checkbox" name="a[]">测试啊测试<br />
<input type="checkbox" name="a[]">测试啊测试<br />
<input type="checkbox" name="a[]">测试啊测试<br />
<input type="checkbox" name="a[]">测试啊测试<br />
<input type="checkbox" name="a[]">测试啊测试<br />
<input type="checkbox" name="a[]">测试啊测试<br />
<input type="checkbox" name="a[]">测试啊测试<br />
<input type="checkbox" name="a[]">测试啊测试<br />
<input type="checkbox" name="a[]">测试啊测试<br />
<input type="checkbox" name="a[]">测试啊测试<br />
<input type="checkbox" name="a[]">测试啊测试<br />
<input type="checkbox" name="a[]">测试啊测试<br />
<input type="checkbox" name="a[]">测试啊测试<br />
<button onclick="qx()">全选</button><button onclick="qbx()">全不选</button><button onclick="fx()">反选</button>
<script>
function qx(){
var d=document.getElementsByName('a[]');
for(i=0;i<d.length;i++){
d[i].checked=true;
}
}
function qbx(){
var d=document.getElementsByName('a[]');
for(i=0;i<d.length;i++){
d[i].checked=false;
}
}
function fx(){
var d=document.getElementsByName('a[]');
for(i=0;i<d.length;i++){
/* if(d[i].checked){
d[i].checked=false;
}else{
d[i].checked=true;
}
*/
d[i].checked = !d[i].checked;
}
}
</script>
</body>
</html>
scroll.html
<html>
<head>
</head>
<body onscroll="show()">
<script>
function show(){
alert(document.body.scrollTop);
}
</script>
<p>xlxz.org</p>
<p>xlxz.org</p>
<p>xlxz.org</p>
<p>xlxz.org</p>
<p>xlxz.org</p>
<p>xlxz.org</p>
<p>xlxz.org</p>
<p>xlxz.org</p>
<p>xlxz.org</p>
<p>xlxz.org</p>
<p>xlxz.org</p>
<p>xlxz.org</p>
<p>xlxz.org</p>
<p>xlxz.org</p>
<p>xlxz.org</p>
<p>xlxz.org</p>
<p>xlxz.org</p>
<p>xlxz.org</p>
<p>xlxz.org</p>
<p>xlxz.org</p>
<p>xlxz.org</p>
<p>xlxz.org</p>
<p>xlxz.org</p>
<p>xlxz.org</p>
<p>xlxz.org</p>
<p>xlxz.org</p>
<p>xlxz.org</p>
<p>xlxz.org</p>
<p>xlxz.org</p>
<p>xlxz.org</p>
<p>xlxz.org</p>
<p>xlxz.org</p>
<p>xlxz.org</p>
<p>xlxz.org</p>
<p>xlxz.org</p>
<p>xlxz.org</p>
<p>xlxz.org</p>
<p>xlxz.org</p>
<p>xlxz.org</p>
<p>xlxz.org</p>
</body>
</html>
upload.html
<html>
<head>
</head>
<body>
<button onclick="show()">增加一个</button>
<button onclick="del()">删除</button>
<div id="upload">
<input type="file" name="a[]" />
</div>
<script>
var i=1;
function show(){
var d=document.createElement('input');
d.type='file';
d.name='a[]';
d.id='t'+i;
var a=document.createElement('a');
a.href="javascript:delet("+i+")";
a.innerHTML='删除';
var up=document.getElementById('upload');
up.appendChild(d);
up.appendChild(a);
i++;
}
function delet(num){
var up=document.getElementById('upload');
var id=document.getElementById('t'+num);
up.removeChild(id);
}
function del(){
var d=document.getElementsByTagName('input');
var up=document.getElementById('upload');
var len=d.length-1;
up.removeChild(d[len]);
}
</script>
</body>
</html>
xxk.html
<html>
<head>
<style>
.xxk{width:200px;height:200px;background:pink}
.xxk .nav{width:200px;height:50px;}
.xxk .nav li{float:left;background:#ccc;display:block;width:65px;height:50px}
.xxk .nav .color{background:#ff00ff}
.content div{background:orange;width:200px;height:140px;display:none}
.content .dis{display:block}
</style>
</head>
<body>
<script>
function show(num,obj){
var nav=obj.parentNode;
var navChild=nav.childNodes;
var coChild=nav.nextSibling.childNodes;
for(i=0;i<navChild.length;i++){
if(i==num){ navChild[i].className='color'; coChild[i].className='dis';
}else{
navChild[i].className='';
coChild[i].className='';
}
}
}
</script>
<div class="xxk">
<div class="nav">
<li class="color" onmouseover="show(0,this)">nginx</li>
<li onmouseover="show(1,this)">mysql</li>
<li onmouseover="show(2,this)">php</li>
</div>
<div class="content">
<div class="dis">
nginx
</div>
<div>
mysql
</div>
<div>
php
</div>
</div>
</div>
</body>
</html>