js dom_js dom element 数组 foreach-CSDN博客

本文链接：https://blog.csdn.net/m0_70158561/article/details/124850455

本文详细介绍了DOM操作，包括通过id、标签名、类名和名称获取节点，使用querySelector和querySelectorAll选择节点，遍历节点列表以及修改元素内容和样式。同时，讲解了如何通过修改display属性和classList来控制元素的显示与隐藏，以及切换类名。最后，展示了使用CSS和JavaScript实现的一级下拉菜单交互效果。

摘要由CSDN通过智能技术生成

1-dom-查询节点

查询节点document
getElementById()
通过id获取元素
getElementsByTagName()
通过标签名获取节点列表

getElementsByClassName()
通过类名获取节点列表
getElementsByName()
通过名称获取列表
querySelector()
通过css选择器获取节点
querySelectorAll()
通过css选择器获取节点列表

<body>
		<h1 id="x1">你好 你在干什么</h1>
		<p>你好·</p>
		<p>你好2</p>
		<p class="sel">你好3</p>
		<form action="" method="">
		爱好：<br/>
		<input type="checkbox" name="fav" id="" value="" />唱歌<br/>
		<input type="checkbox" name="fav" id="" value="" />跳舞<br/>
		<input type="checkbox" name="fav" id="" value="" />读书<br/>
		</form>
	</body>
	<script type="text/javascript">
		// document 文档，get获取 Element元素节点  By通过 Id唯一识别标识符
					// byId
		var y=document.getElementById("x1")
		console.log(y,y.innerText)
		// Elements 多个节点，By通过  Tag标签 Name名称
					// byTagName 通过标签名获取多个节点(类似数组的HTML集合)
		var x=document.getElementsByTagName("p")
		console.log(x[1],x[1].innerText)
			// byClassName 通过class名获取节点(类似数组的HTML集合)
		var z=document.getElementsByClassName("sel")
		console.log(z[0],z[0].innerText)
			// byName 通过名称来获取 (类似数组的节点列表NodeList)
		var x=document.getElementsByName("fav")
		x[1].checkd=true;
		console.log(x)
		
	</script>

2-dom-节点的遍历

<p>你好·</p>
		<p>你好2</p>
		<p class="sel">你好3</p>
		<!-- 节点的遍历 就是把获得的节点挨个列表输出 -->
		<script type="text/javascript">
			
			
			var ps=document.getElementsByTagName("p")
			// for(var i=0;i<ps.length;i++){
			// 	console.log(ps[i],ps[i].innerText);
			// }
			// 转换为数组后for Each
			// Array.from()把类组元素 转换为数组
			// for Each 数组的高阶函数（遍历），传入一个回调函数function
			// 数组元素有多少个function 就会执行多少次
			// ss当前被遍历的元素
			var arr=Array.from(ps); 
			// 转换为数组
			arr.forEach(function(ss){
				console.log(ss,ss.innerText)
			})
		</script>

demo3-querSelector-查询选择器

<div id="">
			<p>1234</p>
			<p>25555</p>
			<p class="four">3ssss</p>
			<p>46666</p>
			
		</div>
		<script type="text/javascript">
			// qurery 查询  Selector选择器
			// querySelector 通过CSS选择器的方式查询
			// var a=document.querySelector("div .four");
			// console.log(a,a.innerText)
			// var a1=document.querySelector("div p:last-of-type")
			// console.log(a1,a1.innerText)
			// querySelectorAll 通过css选择器获取节点列表
			// 获取到div下的所有p标签排除 class为four的元素
			var ps=document.querySelectorAll("div p:not(.four)");
			console.log(ps);
			ps.forEach(function(item){
				console.log(item,item.innerText);// 遍历节点,输出节点内容
				// inneText 元素的文本内容
			})
		</script>

改变层内容
innerText获取/改变文本内容
innerHTML获取/改变html内容

<button type="button"onclick="changeIt()" >更改层内容</button>
		<div id="">
			我喜欢王者荣耀
		</div>
		<input type="text" name="" id="" value="人生苦短" />
		<button type="button"  onclick="changeInp()">改变文框内容</button>
		<script type="text/javascript">
			function changeInp(){
				var x1=document.querySelector("input")
				// value 获取/设置文本框的值
				x1.value="你好 大帅哥"
			}
			function changeIt(){
				var x=document.querySelector("div");
				// 修改div的内容文本
				// innerText 获取/设置元素文本内容
				// x.innerText="我还是喜欢Lol";
				// innerHTML 获取/设置元素的html内容
				x.innerHTML="我喜欢<strong>魔兽争霸</strong>"
			}
		</script>

demo5-访问页面元素

<input type="text"  value="春" name="season">
		<input type="text" value="夏" name="season">
		<input type="text" value="秋"name="season">
		<input type="text" value="冬" name="season">
		<input type="button"  value="显示input内容" onclick="showInput()" />
		<input type="button"  value="显示seaon内容" onclick="zhi()" />
		<div id="tip">
			
		</div>
		<script type="text/javascript">
			function zhi(){
				var chucun="";
				var jiedian=document.getElementsByName("season");
				jiedian.forEach(function(item){
					chucun+=item.value+"<br/>"
				})
				var tip=document.getElementById("tip")
				tip.innerHTML=chucun;
			}
			function showInput(){
				var str="";
				// 存储每个input里面的值
				// 获取所有input节点
				var inps=document.querySelectorAll("input");
				// 遍历inps 把value追加到 str里面
				inps.forEach(function(item){
					str+=item.value+"<br/>";
				})
				console.log(str);
				// 获取tip节点
				var tip=document.getElementById("tip");
				// 设置tip的html内容
				tip.innerHTML=str;
			}
		</script>

demo6-修改sstyle样式

通过style修改样式
elem.style.width="400px"
修改样式
elem.style.fontSize="48px"
注意使用驼峰命令

也可以通过
elem.style.width 来获取行内样式

<style type="text/css">
			#v{
				width: 200px;
				height: 100px;
				border: 2px solid red;
			}
			
		</style>
	</head>
	<body>
		<div id="v">
			你好样式style
			
		</div>
		<button type="button" onclick="changew()">变宽</button>
		<script type="text/javascript">
			function changew(){
				// 获取div
				var x=document.getElementById("v");
				// 相当于用js写了行内样式
				// 修改div样式
				x.style.width="400px";
				// font-siz写法改成fontSize
				x.style.fontSize="50px";
			}
		</script>

demo7-修改元素的显示与隐藏

<style type="text/css">
		#div{
			width:200px;
			height:100px;
			border: 2px solid red;
		}	
		</style>
		
	</head>
	<div id="x">
		窗前明月光，疑是地上霜
		
	</div>
	<button type="button" onclick="yincang()">按钮</button>
	<script type="text/javascript">
		// 通过单击按钮实现div的切换与线上
		function yincang(){
			// 获取到div
			var y= document.getElementById("x");
			// 获取到display值（第一次默认获取不到）
			var z=y.style.display;
			// 如果不是为none
			if(z!="none"){
				// 隐藏
				y.style.display="none";
			}else{
				// 显示
				y.style.display="block";
			}
			
		}
	</script>

通过classList
修改类名，修改样式
classList
toogle()切换类名
add() 添加类名
remove() 删除类名
contains()检测是否包含类名

<style type="text/css">
			#x{
				width: 200px;
				height: 100px;
				border: 2px solid red;
			}
			.yincang{
				display: none;
			}
		</style>
	</head>
	<body>
		<button type="button" onclick="qiehuan()">按钮</button>
		<div id="x">
			有没有人曾告诉你
			
		</div>
		<script type="text/javascript">
			// 通过单击按钮实现div的切换与线上
			function qiehuan(){
				// 获取到div
				var s=document.getElementById("x")
				// 如果s的类列表里面有hide 移除yincang  没有添加yincang
				// console.log(s.classList);
				s.classList.toggle("yincang");
				// classList.toggle()切换类名
				// classlist.add()添加类名
				// classList.remove()移除类名
				// classList.contains()检查是否包含
			}
		</script>

demo9-改变行内样式

<style type="text/css">
			#mydiv{
				height: 100px;
				border: 2px solid red;
				
			}
		</style>
	</head>
	<body>
		<button type="button" >qiehuan</button>
		<div id="mydiv" style="width: 200px;">
			今天天气怎么样
		</div>
		<script type="text/javascript">
			var divs=document.getElementById("mydiv");
			// 如果是行内样式可以访问到
			// 写在style样式标签里的访问不到
			alert(divs.style.width);
		
		</script>

demo10-一级下拉菜单

<style type="text/css">
			*{
				margin: 0;
				padding: 0;
			}
			ul,li{list-style: none;}
			.nav{
				height: 90px;
				background-color: #ccc;
			}
			.menu>li{
				display: inline-block;
				height: 90px;
				line-height: 90px;
				width: 120px;
				text-align: center;
				vertical-align: middle;
			}
			.menu>li:hover{
				background-color: aquamarine;
			}
			.submenu{
				background-color: #ccc;
				display: none;
				
			}
			/* 定义三级菜单样式 */
						.link{
							position: relative;
						}
						.submenu .submenu{
							position: absolute;
							width: 90px;
							left:90px;
							top:0;
						}
		</style>
	</head>
	<body>
			<div class="nav">
					<ul class="menu">
						<li class="link"><a href="">首页</a></li>
						<li class="link">
							<a href="">产品</a>
							<ul class="submenu">
								<li><a href="">二级菜单1</a></li>
								<li class="link">
									<a href="">二级菜单2</a>
									<ul class="submenu">
										<li>三级菜单1</li>
										<li>三级菜单2</li>
										<li>三级菜单3</li>
									</ul>
									
								</li>
								<li><a href="">二级菜单3</a></li>
							</ul>
						</li>	
						<li class="link">
							<a href="">产品2</a>
							<ul class="submenu">
								<li><a href="">二级菜单1</a></li>
								<li class="link">
									<a href="">二级菜单2</a>
									<ul class="submenu">
										<li>三级菜单1</li>
										<li>三级菜单2</li>
										<li>三级菜单3</li>
									</ul>
									
								</li>
								<li><a href="">二级菜单3</a></li>
							</ul>
						</li>			
					</ul>
				</div>
				<script>
					// link被hover时候，选择到link的子节点submenu 显示
					// 选择到所有的link（菜单）
					var links = document.querySelectorAll(".link");
					// 对links进行遍历
					links.forEach(function(item){
						console.log(item);
						//item就是links里面的子内容（<li clas="link">的li元素）
						// 选择到link（item）的子节点 submen
						var submenu = item.querySelector(".submenu");
						// 当鼠标移入link（item）
						item.onmouseover = function(){
							// 让其子节点submenu显示
							submenu?submenu.style.display="block":'';
							//通过三元运算符号，有submenu执行代码，没有就执行''
						}
						// 当鼠标移出两块 
						item.onmouseout = function(){
							// 让其子节点 submenu隐藏
							submenu?submenu.style.display = "none":'';
						}
					})
					// onmouseover 当鼠标移入事件 onmouseout当鼠标移出事件
					
				</script>