ICode9
精准搜索请尝试： 精确搜索
首页
编程语言>
数据库
系统相关
互联网
其他分享
Python
Java
JavaScript
android
PHP
首页 > 其他分享> 文章详细

Dom基础小例子

2022-07-18 14:34:29  阅读：154  来源： 互联网

标签：function Dom 基础 getElementById 例子 var document 节点 d1


实现全选和反选
<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>
  • 属性节点删除 removeAttribute(属性节点对象)
  • 文本节点删除 removeChild();
隐藏
<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

鼠标事件
  • 鼠标按下触发onmousedown事件
  • 鼠标弹起触发onmouseup事件
  • 鼠标经过触发onmousermove
  • 鼠标进入触发onmouseover
  • 鼠标退出触发 onm ouseout
<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
  • 当组件的值在发生变化的时候，会触发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>
  • js代码
window.onload = function(){    //此处的代码会等待所有html元素加载完毕后再运行
				var div1 = document.getElementById("d1");	//获取id为d1的元素节点对象
				console.log(typeof div1);
				var divs = document.getElementsByTagName("div");
				console.log(divs.length);
}
  • 获取对象方法3
<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

属性节点获取
  • 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" style="width: 100;height: 50px; background-color: brown;";>  //两个属性为id和style
			
		</div>
		<button type="button" onclick="changecolor()">按钮</button>
		
	</body>
  • js
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

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

关于我们 | 联系我们 | 留言反馈

专注分享技术，共同学习，共同进步。侵权联系[81616952@qq.com]

Copyright (C)ICode9.com, All Rights Reserved.

ICode9版权所有