1、DOM（文档对象模型）
HTML：展示信息，展示数据 XML：侧重存储数据
元素（element）：页面里所有标签 节点（node）：页面中所有内容 文档：一个页面就是一个文档
2、点击弹框
//先有按钮，才有获取，获取之后才能注册
<input type="button" value="按钮" id="btn" />
//根据id属性值从文档获取这个元素
var btnObj=document.getElementById("btn");
//为当前这个按钮元素，注册点击事件，增加事件处理函数（匿名函数）
btnObj.onclick=function(){
//响应做的事
alert("哈哈");};
3、修改p标签
<input type="button" value="按钮" id="btn" />
<p id="pi"><p/>
<script>
document.getElementById("btn").onclick=function(){
document.getElementById("pi").innerText="这是一个P";
};
</script>
凡是成对的标签，中间的文本内容，设置都是用innerText这个属性
4、修改a标签
<input type="button" value="按钮" id="btn" />
<a href="#" id="a"><a/>
<script>
document.getElementById("btn").onclick=function(){
var aObj=document.getElementById("a");
aObj.innerText="这是一个a";
aObj.href="";
};
</script>
5、修改多个p标签(tagname获取的是数组)
<input type="button" value="按钮" id="btn" />
<p><p/>
<p><p/>
<p><p/>
<script>
document.getElementById("btn").onclick=function(){
var pObj=document..getElementByTagName("p")
for(var i=0;i<pObj.length;i++){
pObj[i].innerText="";
}
};
</script>
6、修改图片
<input type="button" value="按钮" id="btn" />
<img src="" alt="" title=""/>
<script>
document.getElementById("btn").onclick=function(){
var imgObj=document.getElementByaTagName("img");
imgObj[0].alt="";
imgObj[0].title="";
};
</script>
7、排他功能
<input type="button" value=""/>
<input type="button" value=""/>
<input type="button" value=""/>
<input type="button" value=""/>
<input type="button" value=""/>
<script>
var btnObjs=document.getElementByTagName("input");
for(var i=0;i<btnObjs.length;i++){
btnObjs.onclick=function(){
for(var j=0;j<btnObj.length;j++){
btnObjs[j].value="红";
}
this.value="绿"；
};
}
};
</script>
8、id替换
function my$(id){return document.getElementById(id);}
9、点击按钮选择性别兴趣
<input type="button" value="修改性别" id="btn1"/>
<input type="radio" value="1" name="sex"/>男
<input type="radio" value="2" name="sex" id="rad1"/>女
<input type="radio" value="3" name="sex"/>保密
<script>
function my$(id){return document.getElementById(id);}
my$("btn1").onclick=function(){
my$("rad1").checked=true;
};
</script>
10、下拉框文本框
<input type="button" value="点菜" id="btn"/>
<select name="" id="ss">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4" id="op1">4</option>
<option value="5">5</option>
<select/>
<script>
function my$(id){return document.getElementById(id);}
my$("btn").onclick=function(){
my$("op1").checked=true;
};
<script/>
disabled不可选择 readonly只读
<textarea name="" id="tt"></textarea>
<input type="button" value="注册" id="btn"/>
<script>
my$("btn").onclick=function(){
my$("tt").value="";
};
</script>
11、div样式修改（凡是css中这个属性是多个单词的写法，在js代码中DOM操作把-去掉，后面字母大写即可）
<input type="button" value="设置样式" id="btn"/>
<div id="dv" style="width:200px"></div>
（common.js内容为function my$(id){return document.getElementById(id);}）
<script src="common.js"></script>
<script>
my$("btn").onclick=function(){
my$("dv").style.width="300px";
};
</script>
12、div显示与隐藏
<input type="button" value="隐藏" id="btn"/>
<div id="dv"></div>
<script src="common.js"></script>
<script>
my$("btn").onclick=function(){
if(this.value=="'隐藏"){
my$("dv").style.display="none";
}else if(this.value=="显示"){
my$("dv").style.display="block";
this.value="隐藏";
}
};
</script>
13、修改多个div样式(js代码中DOM操作，设置元素类不用class，用className)
<style>
.cls{
width:300px;
height:200px;
background-color:yellow;
border:2px solid red;
}
</style>
<input type="button" value="设置样式" id="btn"/>
<div id="dv"></div>
（common.js内容为function my$(id){return document.getElementById(id);}）
<script src="common.js"></script>
<script>
my$("btn").onclick=function(){
my$("dv").className="cls";
};
</script>
14、div显示与隐藏
<style>
.cls{
display:none;
}
</style>
<input type="button" value="隐藏" id="btn"/>
<div id="dv"></div>
<script src="common.js"></script>
<script>
my$("btn").onclick=function(){
if(my$("dv").className!="cls"){
my$("dv").className="cls";
this.value="显示";
}else (){
my$("dv").className="";
this.value="隐藏";
}
};
</script>
15、网页开关灯
<style>
.cls{
background-color:black;
}
</style>
<input type="button" value="关灯" id="btn"/>
<script src="common.js"></script>
<body id="bd">
<script>
my$("btn").onclick=function(){
document.body.className=document.body.className!="cls"?"cls":"";
};
</script>