1.0.3 js中DOM
1.0通过dom对象设置内容
2.0通过dom对象改变样式
3.0通过dom对象添加事件
4.0通过dom对象添加元素
5.0通过dom对象删除元素/节点
<!DOCTYPEhtml>
<html>
<head>
<title>DOM对象</title>
<scripttype="text/javascript">
//通过document.getElementById获取元素对象
functionintroMethod(){
varx=document.getElementById("intro");
document.getElementById("showText").innerHTML='P标签中的内容是：'+x.innerHTML;
}
//改变样式
functionupdateStyle(){
varx=document.getElementById("intro");
x.style.color="#adcdef";
x.style.fontFamily="Arial";
x.style.fontSize="larger";
}
//
functionshowText2(){
varx=document.getElementById('intro');
varx2=document.getElementById('show2');
if(x.style.visibility=='visible'){
x.style.visibility='hidden';
x2.innerHTML="显示文本";
}else{
x.style.visibility='visible';
x2.innerHTML="隐藏文本";
}
}
//改变文本
functionupdateMe(thisTag){
thisTag.innerHTML="你还真点击我呀";
}
//给标签添加事件
functionaddEvent(){
document.getElementById("intro3").onclick=function(){showDate();};
}
functionshowDate(){
document.getElementById("intro3").innerHTML=newDate();
}
//鼠标事件
//鼠标滑过
functionmOver(thisTag){
thisTag.innerHTML="谢谢";
}
//鼠标离开
functionmOut(thisTag){
thisTag.innerHTML="把鼠标移到上面";
}
//鼠标按下
functionmDown(thisTag){
thisTag.innerHTML="鼠标按下";
}
//鼠标松开
functionmUp(thisTag){
thisTag.innerHTML="鼠标松开";
}
//鼠标按下事件优先于鼠标松开事件
functionmclick(thisTag){
thisTag.innerHTML="鼠标点击";
}
//添加元素
functionaddElement(thisTag){
//创建元素
varchild=document.createElement("p");
//创建文本节点
varnode=document.createTextNode("这是新增的内容哦");
//向元素追加文本节点
child.appendChild(node);
varx=document.getElementById("span1");
x.appendChild(child);
}
//删除已有的节点
functiondelElement(thisTag){
varps=thisTag.getElementsByTagName("p");
for(vari=0;i<ps.length;i++){
ps[i].parentNode.removeChild(ps[i]);
}
}
</script>
</head>
<bodyonload="addEvent()">
<divid="showText"></div><br/>
<pid="intro">HelloWorld</p>
<pid="intro2"onclick="updateMe(this)">点击我呀</p>
<pid="intro3">给我分配事件吧</p>
<buttononclick="introMethod()">GetElementById<button>
<buttononclick="updateStyle()">改变样式<button>
<buttonid="show2"onclick="showText2()">显示文本<button><br/>
<divonmouseover="mOver(this)"onmouseout="mOut(this)"onmousedown="mDown(this)"onmouseup="mUp(this)"onclick="mclick(this)"style="background-color:green;width:120px;height:20px;padding:40px;color:#ffffff">
把鼠标移到上面
</div><br/>
<spanid="span1"onclick="addElement(this)">巴拉拉拉链<span>
<spanid="span2"onclick="delElement(this)">
<pid="p1">这是第一个节点</p>
<pid="p2">这是第二个节点</p>
<span>
</body>
</html>
@dianxinxinxiyuan.xiuyanxilu.pudongqu.shanghai