其他分享
首页 > 其他分享> > Dom基础小例子

Dom基础小例子

作者:互联网

实现全选和反选
<head>
		<meta charset="utf-8" />
		<title>8.13-Laoshanshan</title>
		<link rel="stylesheet" type="text/css" href="css/index.css"/>
		<script src="js/index.js" type="text/javascript" charset="utf-8"></script>
	</head>
	<body>
		<input type="checkbox" onclick="selectall(this)"/>全选<br>
		<input type="checkbox" class="kuang"/>学习<br>
		<input type="checkbox" class="kuang"/>java<br>
		<input type="checkbox" class="kuang"/>js<br>
		<input type="checkbox" class="kuang"/>html<br>
		<a href="#" onclick="selectnone">反选</a>
		
		<script type="text/javascript">
			function selectall(qxk){
				var checked = qxk.checked;    //获取qxk的checked属性,即是否被选中
				var checkboxes = document.getElementsByClassName("kuang");//获取全部节点属性
				for(var i in checkboxes){	//所有子选项的点击属性必须和全选框同步
					checkboxes[i].checked=qxk.checked;
				}
			}
			
			function selectnone(){
				var checkboxes = document.getElementsByClassName("kuang");
				for(var i in checkboxes){	
					checkboxes[i].checked=!checkboxes[i].checked;
				}
			}
			
		</script>

image


nodetype
<div id="d1">
			
		</div>
		<p id="p1">
			
		</p>
		
		
		<script type="text/javascript">
			
			var div1=document.getElementById("d1");
			console.log(div1.nodeType);				//1 元素节点都为1
			var p1 = document.getElementById("p1");   
			console.log(p1.nodeType);
			console.log(div1.attributes[0].nodeType);//2   属性节点都为2
<body>
		
		<div id="d1">
			冰美式才是真谛
</div>

<script type="text/javascript">
			
			var div1=document.getElementById("d1");
			// console.log(div1.nodeType);				//1 元素节点都为1
			var content = div1.childNodes[0];         //获取div的子节点div只有一个子节点 
			console.log(content.nodeName);			//#test  :文本节点
			console.log(content.nodeValue);			
			console.log(content.nodeType);			//3
			content.nodeValue="abcdefg";			//修改文本内容
			
		</script>

image


获取父节点
<body>
		
		<div id="dad">
			父
			<div id="f1">
				子节点1
			</div>
			<div id="f2">
				子节点2
				<div id="f3">
					子节点2的子节点
				</div>
			</div>
			<button type="button" onclick="f()">获取父节点</button>
		</div>
		<p id="p1">
			
		</p>
		
		
		<script type="text/javascript">
			
			var node = null;
			function f(){
				node=document.getElementById("dad")
			}
			if(document==node){
				alert("当前节点为根节点:document");
			}else{
				alert(node.parentNode);
				node = node.parentNode;
			}
		</script>
	</body>

子节点

文本中的换行、回车、元素都算子节点

<body>
					<div id="baba">
						我是爸爸
						<div id="d1">
							我是大儿子
						</div>
						<div id="d2">
							我是二儿子
						</div>
						<div id="d3">
							我是小儿子
						</div>
					</div>
					<button type="button" onclick="showfirst()">第一个子节点</button>
					<button type="button" onclick="showlast()">最后一个子节点</button>
					<button type="button" onclick="showall()">子节点数量</button>
		
				<script>
					 function showfirst(){
							  var div = document.getElementById("baba");
							  alert(div.firstChild.nodeName);
					 }
					 function showlast(){
							 	 var div = document.getElementById("baba");
							 	  alert(div.lastChild.nodeName);
					 }
					 function showall(){
							   var div = document.getElementById("baba");
							   alert(div.childNodes.length);
					 }
				</script>
			</body>

image


查询所有父节点
</head>
		<body>
			<div id="d1">
				1
				<div id="d2">
					2
					<div id="d3">
						3
					</div>
				</div>
				<div id="d4">
					4
				</div>
			</div>
				<button type="button" onclick="f()">子节点</button>
					
			<script>
				var node = null;
				function f(){
						 if(null==node){
							 node=document.getElementById("d2");
						 }
						 if(document==node){
							 alert("当前节点为根节点:document");
						 }else{
							 alert(node.parentNode.nodeName);
							 node = node.parentNode;
						 }
				}
			</script>
		</body>

查到最后一个会显示根节点 image


innerHTML填充
<body>
	<div id="d1">
		原来的内容					
	</div>
		<button type="button" onclick="f()">点一下覆盖原子节点内容</button>
								
					
		<script>
			function f() {
				var d1 = document.getElementById("d1");
				d1.innerHTML="新的内容";   //innerHTML填充会导致该div中原有的子节点都被覆盖
				}
		</script>
</body>

image


节点增加 createElenment
<body>

			<div id="d1">
				不要熬夜
				<button type="button" onclick="add()">子节点</button>
			</div>
		</div>

		<script>
				function add(){
					var hr = document.createElement("hr");         //hr为页面分割线
					var div1 = document.getElementById("d1");
					div1.appendChild(hr);
				}
				
		</script>
	</body>

image


创建文本节点
<body>

			<div id="d1">
				不要熬夜
				<button type="button" onclick="add()">节点</button>
			</div>
		</div>

		<script>
				function add(){
					var p = document.createElement("p");         //hr为页面分割线
					var text = document.createTextNode("通过dom添加的文本");
					p.appendChild(text);
					var d1 = document.getElementById("d1")
					d1.appendChild(p);
				}
				
		</script>
	</body>

image


增加超链接
<body>
			<div id="d1">		
				<button type="button" onclick="add()">增加超链接</button>
			</div>
					
			<script>
				function add(){
						 var a = document.createElement("a");
						 var content = document.createTextNode("百度一下,你就知道");
						 a.appendChild(content);
						 var href = document.createAttribute("href");
						 href.nodeValue="https://www.baidu.com";
						 a.setAttributeNode(href);
						 var div1 = document.getElementById("d1");
						 div1.appendChild(a);
						 var img = document.createElement("img");
						 var src = document.createAttribute("src");
						 src.nodeValue="img/ikun.gif";
						 img.setAttributeNode(src);
						 var div1 = document.getElementById("d1");
						 d1.appendChild(img);
				}
			</script>
</body>

image

删除节点
<script>
			function shanchu(){
				var div1 = document.getElementById()("d1"); //获取父节点
				var img = document.getElementById("j");    //要删除的元素的id
				div1.removeChild(img);			//删除但源代码没改重新加载,此元素还会出现
			}
				
</script>


隐藏
<body>

			<div id="d1">
				假装有内容
			</div>
			<button type="button" onclick="hide()">隐藏</button>
			<button type="button" onclick="show()">显示</button>

		</div>

		<script>
			function hide(){
				var d1 = document.getElementById("d1");
				d1.style.display="none";
			}
			function show(){
				var d1 = document.getElementById("d1");
				d1.style.display="block";
			}
				
		</script>
	</body>

image


<body>

			<div id="d1">
				<button type="button" onclick="width()">变宽</button>
				<button type="button" onclick="height()">变高</button>
				<button type="button" onclick="color()">变色</button>
				<button type="button" onclick="hide()">隐藏</button>
				<button type="button" onclick="reset()">重置</button>
				<div id="d2" style="width: 200px; height: 200px; background-color: black;">
					
				</div>
			</div>
		<script>
			function width(){
				var d = document.getElementById("d2");
				var as = d2.attributes;
				as[1].nodeValue="width: 300px; height: 200px; background-color: black;";
				
			}
			function height(){
				var d = document.getElementById("d2");
				var as = d2.attributes;
				as[1].nodeValue="width: 200px; height: 300px; background-color: black;";
			}
			function color(){
				var d = document.getElementById("d2");
				var as = d2.attributes;
				as[1].nodeValue="width: 200px; height: 200px; background-color: red;";
			}
			function hide(){
				var d = document.getElementById("d2");
				d.style.display="none";
			}
			function reset(){
				var d = document.getElementById("d2");
				var as = d2.attributes;
				as[1].nodeValue="width: 200px; height: 200px; background-color: black;";
			}
				
		</script>
	</body>

image


<body>
			用户:<input type="text" id="username"  />
			密码:<input type="password" id="passwd" />
			<button type="button" onclick="printInfo()">打印</button>
			<button type="button" onclick="denglu()">登陆验证</button>
								
					
			<script>
				function printInfo(){
				var input1 = document.getElementById("username");
				var input2 = document.getElementById("passwd");
				alert(input1.value);
				alert(input2.value);
				}
				// 验证方法 如果用户名为gls 密码为123 则显示
				// 正确 否则显示错误 如果用户名或密码的长度为0
				// 要求重新输入
				function denglu(){
				var input1 = document.getElementById("username");
				var input2 = document.getElementById("passwd");
				if(input1.value.length==0||input2.value.length==0)
				{
					alert("用户名密码长度有误!");
					return;
				}
				if(input1.value=="gls"&&input2.value=="123"){
					alert("登陆成功");
					location.href="https://www.baidu.com";
					return;
				}else{
					alert("用户名或者密码错误");
					return;
				}
			}

image


焦点事件

每一个组件都有两个事件:失去焦点和获取焦点。当节点获取焦点的时候会触发onfocus,失去则触发onblur

<input type="text" id="input1" onfocus="f()" 
 onblur="b()" 
 placeholder="输入框1"/>
 <br>
<input type="text" id="input2" placeholder="输入框2" />
<div id="d1">

function f(){
 	document.getElementById("d1").innerHTML="输入框1获取了焦点";
	
 }	 
 function b(){
 	document.getElementById("d1").innerHTML="输入框1失去了焦点";
	
 }

image


鼠标事件
<body>
					<input type="button" onm ousedown="down()" onm ouseup="up()" value="鼠标按下和弹起"/>
					<br>
					<input type="button" onm ousemove="move()" value="鼠标经过"/>
					<br>
					<input type="button" onm ouseover="over()" value="鼠标进入" />
					<br>
					<input type="button" onm ouseout="out()" value="鼠标退出" />
					<br>
				<div id="d1">
						
				</div>
		
			 <script>
					var number = 0;
					var number1 = 0;
					 function down(){
					 	document.getElementById("d1").innerHTML="按下了鼠标";
						
					 }	
					  function up(){
					 	 	document.getElementById("d1").innerHTML="弹起了鼠标"
					 }
					 function move(){
					 		document.getElementById("d1").innerHTML="鼠标经过次数"+(++number);
							
					 }	 
					 function over(){
					 		document.getElementById("d1").innerHTML="鼠标进入次数"+(++number1);
							
					 }
					
					 function out(){
					 		document.getElementById("d1").innerHTML="鼠标退出";
					 		number = 0;
					 		nubmer1 = 0;
					 }
						
				</script>
		</body>

image


双击事件 ondblclick
<div class="d1">
 	
 </div>
 <div class="d1">
 	
 </div>
 <div class="d1">
 	
 </div>

 <button type="button" ondblclick="cc()">嗯?</button>

变化事件 onchange
<body>
			<input type="text" id="input1" onm ouseup="change()" value=""/>
			<br>
			<br>
			<input type="button" value="用来使输入框失去焦点的按钮" />
			<br>
			<br>
			<div id="d1">
				
			</div>
			<script>
				function change(){
					var d1 = document.getElementById("d1");
					var input1 = document.getElementById("input1");
					d1.innerHTML="输入框的值变成了:"+input1.value;
				}		
			</script>
</body>

 

把html中的各种元素当作对象来操作,或者叫做元素节点对象

<head>
		<meta charset="utf-8" />
		<title>8.13-Laoshanshan</title>
		<link rel="stylesheet" type="text/css" href="css/index.css"/>
		<script src="js/index.js" type="text/javascript" charset="utf-8"></script>
</head>
	<body>
		
		<div id="d1">
			Dom
		</div>
		<h1 class="c1">演示1</h1>
		<h2 class="c1">演示2</h2>
		<div>
			
		</div>
		<div>
			
		</div>
		<div>
			
		</div>
		
	</body>
window.onload = function(){    //此处的代码会等待所有html元素加载完毕后再运行
				var div1 = document.getElementById("d1");	//获取id为d1的元素节点对象
				console.log(typeof div1);
				var divs = document.getElementsByTagName("div");
				console.log(divs.length);
}

<body>
		
		<div id="d1">
			Dom
		</div>
		<h1 class="c1">演示1</h1>
		<h2 class="c1">演示2</h2>
		
	</body>
window.onload = function(){    
	var elements = document.getElementsByClassName("c1")
	for(var i=0;i<elements.length;i++){
		console.log(typeof elements[i]+",这是数组中的第"+i+"个元素")
	}
}

image


属性节点获取
<head>
		<meta charset="utf-8" />
		<title>8.13-Laoshanshan</title>
		<link rel="stylesheet" type="text/css" href="css/index.css"/>
		<script src="js/index.js" type="text/javascript" charset="utf-8"></script>
</head>
	<body>
		
		<div id="d1" style="width: 100;height: 50px; background-color: brown;";>  //两个属性为id和style
			
		</div>
		<button type="button" onclick="changecolor()">按钮</button>
		
	</body>
function changecolor(){
		var d1=document.getElementById("d1");
		as = d1.attributes;
		console.log(as.length)    //将d1元素的属性节点进行陈列
		
		d1.style.backgroundColor="blueviolet"   //将原来属性颜色改为blueviolet,点击按钮变色
		d1.style.width="100px";			//修改宽度
	}

d1有两个元素: image

修改属性
window.onload = function(){    
		var d1=document.getElementById("d1");	//获取节点
		var as = d1.attributes;
		console.log(as[0].nodeName);		//获取节点名
		console.log(as[0].nodeValue);		//获取节点值
		console.log(as[1].nodeName);
		console.log(as[1].nodeValue);
		as[1].nodeValue="background:grey;height:100px;width:100px";  //修改属性,必须全改
}


image

标签:function,Dom,基础,getElementById,例子,var,document,节点,d1
来源: https://www.cnblogs.com/arica/p/16490266.html