DOM的常规操作

DOM简称Document Objdct Medio（文档对象模型）

DOM的常规操作

一、操作属性

1.href属性

		<a href="http://souhu.com" title="souhu" id="link">搜狐</a>
		<script>
			window.onload=function(){
				var linkObj=document.getElementById("link");
				linkObj.innerHTML="百度";
				linkObj.title="baidu";
				linkObj.href="http://baidu.com";
				linkObj.className="link";
				/* for(var i in linkObj){
					document.write(linkObj[i] + "<br>")
				} */
			}
		</script>	

2.src属性

			<img src="img/01.gif" alt="dog" onclick="show()" id="pic">
			var imgArr=["img/01.gif","img/02.gif","img/03.gif","img/04.gif"]
			function show(){
				var picObj=document.getElementById("pic");
				var img=imgArr[Math.floor(Math.random()*4)];
				console.log(img);
				picObj.src=img;
			}

二、操作内容

1.innerText

		<div id="box">我是div原来的文字</div>
		<script>
			var boxObj=document.getElementById("box");
			boxObj.onmouseover=function(){
				// this.innerText="<b>我是div替换的文字</b>"; //dom纯文本 标签不可翻译
				this.innerText="我是div替换的文字";
			}
			boxObj.onmouseout=function(){
				this.innerText="我是div原来的文字";
			}
		</script>

2.innerHTML

<div id="box">我是div原来的文字</div>
		<script>
			var boxObj=document.getElementById("box");
			boxObj.onmouseover=function(){
				this.innerHTML="<font color='red'><b>我是div替换的文字</b></font>"; //兼容性好 可以翻译标签
			}
			boxObj.onmouseout=function(){
				this.innerHTML="我是div原来的文字";
			}

3.outerHTML

			<a href="javascript:show();" id="link">链接文字</a>
			function show(){
				var linkObj=document.getElementById("link");
				alert(linkObj.outerHTML);
			}

三、表单操作

		<form action="" method="" name="reg">
			<p>
				<label for="">用户名：</label>
				<input type="text" name="user" id="" value="" />
			</p>
			<p>
				<label for="">密码：</label>
				<input type="password" name="password" id="" value="" />
			</p>
			<p>
				<label for="">密码问题：</label>
				<input type="text" name="question" id="" value="" />
			</p>
			<p>
				<label for="">密码答案：</label>
				<input type="text" name="answer" id="" value="" />
			</p>
			<p>
				<input type="button" name="" id="" value="提交" onclick="show()"/>
			</p>
		</form>
		<script>
			function show(){
				// var answer=document.reg.answer.value;
				// var answer=document.forms[0].answer.value;
				var answer=document.getElementsByTagName("input")[3].value;  
				console.log(answer);
			}
		</script>

四、操作内部样式

		*{margin: 0;padding: 0;}
			.box{width: 500px;margin: 100px auto 20px;position: relative;}
			img{display: block;width: 500px;height: 336px;}
			div #light{position: absolute;width: 500px;height: 336px;background: black;opacity: .6;}
			.contor{width: 500px;height: 30px;line-height: 30px;text-align: center;font-size: 18px;background-color: black;color: white;cursor: pointer;margin: 0 auto;font-weight: 800;}
		<div class="box">
			<p id="light"></p>
			<img src="img/house.jpg" >
		</div>
		<div class="contor" id="contor">开</div>
		<script>
		// 方法一
			var contor=document.getElementById("contor");
			var num=0;
			contor.onclick=function(){
				num++;
				var light=document.getElementById("light");
				if(num%2==1){
					contor.innerHTML="关";
					light.style.opacity="0";
				}
				else{
					contor.innerHTML="开";
					light.style.opacity="0.6";
				}
			}
			// 方法二
			/* var contor=document.getElementById("contor");
			contor.onclick=function(){
				var light=document.getElementById("light");
				if(contor.innerText=="开"){
					contor.innerHTML="关";
					light.style.opacity="0";
				}else{
					contor.innerHTML="开";
					light.style.opacity="0.6";
				}
			} */
			
			// 方法三
			var contor=document.getElementById("contor");
			var light=document.getElementById("light");
			contor.onclick=function(){
				if(light.style.opacity=="0.6"){
					contor.innerHTML="关";
					light.style.opacity="0";
					light.style.transition=".5s";
				}else{
					contor.innerHTML="开";
					light.style.opacity="0.6";
				}
			}