DOM编程-CSDN博客

本文链接：https://blog.csdn.net/gcyqweasd/article/details/113789485
<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>DOM编程</title>
		<style>
			.sty{/*类选择器样式*/
				width: 100px;
				height: 100px;
				border: 1px solid red;
			}
			.sty1{/*类选择器样式*/
				/*width: 200px;
				height: 100px;
				border: 1px solid blue;*/
				display: none;/*隐藏*/
			}
			#father{
				width: 200px;
				height: 200px;
				border: 1px solid  green;
			}
		</style>
		<script>
			/*
			 1.获取页面元素  document对象下的四个方法
			 2.操作页面元素
			        获取页面元素的内容
			              表单控件的值:value
			              普通元素的内容:innerHTML(获取元素标签体的全部内容)  innerText(获取纯文本内容)
			        修改元素内容
			              表单控件的值:value
			              普通元素的内容:innerHTML  innerText
			        获取元素的属性值
			        getAttribute()  元素.属性名
			        修改元素的属性值
			        setAttribute()  元素.属性名=值
			        获取元素的样式
			        修改元素的样式
			                元素.style.样式名--局限性要求行内样式
			                元素.className --更改样式常用方式
			 3.增加页面元素 
			        appendChild  追加子元素
			        insertBefore--麻烦一般不用
			 4.删除页面元素
			        remove  删除当前元素
			        removeChild  删除子元素
			 */
			function showInfo(){
				var uname = document.getElementById("uname");
				console.log(uname.value);// 获取页面元素的内容
				uname.value="changed";//修改元素内容
				
				//当为一组单选框时这样查看页面元素,复选框方法相同
				var sex = document.getElementsByName("sex");//返回值为数组
				for(var i=0;i<sex.length;i++){//循环遍历看是哪个值
					if(sex[i].checked==true){
					console.log(sex[i].value);	
					}
				}
				
				var div = document.getElementById("con");
				console.log(div.innerHTML);// 获取页面元素的内容
				console.log(div.innerText)// 获取页面元素的内容
				
				div.innerHTML="<p>changed content</p>";//修改元素内容
				
			}
			
			function showAttr(){
				var cat = document.getElementById("cat");
				console.log(cat.getAttribute("src"));// 获取元素的属性值
				console.log(cat.getAttribute("title"));// 获取元素的属性值
			    console.log(cat.title);// 获取元素的属性值
			    
			    cat.src = "img/02.jpg";//修改元素的属性值
			    
			    var btn = document.getElementById("btn");
			    if(btn.disabled){//属性的调用
			    	console.log("按钮不可用");
			    	btn.disabled = false;//修改元素的属性值
			    }else{
			    	console.log("按钮可用");
			    }
			}
			
			function showStyle(){
				var div = document.getElementById("sty");
				//console.log(div.style.width);
				div.className="sty1";//类选择器修改样式
			}
			
			function addElement(){
				var div = document.getElementById("father");//获取元素
				var p = document.createElement("p");//定义元素,创建元素结点
				p.innerHTML="added info";//追加内容赋值
				div.appendChild(p);//将p加入进去
				//div.parentNode.insertBefore(p,div);
			}
			
			function delElement(){
				var par = document.getElementById("par");//获取父元素
				var chi = document.getElementById("chi");//获取子元素
				par.removeChild(chi);//父元素把里边的子元素删掉
				par.remove();//删除当前元素
			}
			
		</script>
	</head>
	<body>
		<div>
			用户名:<input type="text" id="uname"/>
		</div>
		<div>
			性别:<input type="radio" name="sex" value="男" />男
			     <input type="radio" name="sex" value="女" />女
		</div>
		<div id="con">
			<span>div中的静态内容</span>
		</div>
		<div>
			<img src="img/03.jpg" title="cute cat" id="cat"/>
		</div>
		<div>
			<button type="button" id="btn" disabled="disabled">按钮状态</button><!--disabled不可用-->
		</div>
		<div id="sty" class="sty" ></div>
		
		<div id="father">
			<!--<div>aaaa</div>  对应的 div.parentNode.insertBefore(p,div); 方法-->
		</div>
		<div id="par">
			父元素
			<div id="chi">
				子元素
			</div>
		</div>
		<div>
			<button type="button" onclick="showInfo()">查看页面内容</button>
		    <button type="button" onclick="showAttr()">操作页面属性</button>
		    <button type="button" onclick="showStyle()">操作页面样式</button>
		    <button type="button" onclick="addElement()">追加页面元素</button>
		    <button type="button" onclick="delElement()">删除页面元素</button>
		</div>
		<br /><br /><br /><br /><br /><br /><br />
	</body>
</html>
在这里插入图片描述