5.18.JS的这些dom基础内容快来学习吧

本文链接：https://blog.csdn.net/qq_15832739/article/details/124855057

前言：目前正在学习JS的一些基础内容，会将学习到的持续分享到博客，欢迎萌新观看

文章目录

一、查询节点
二、遍历节点
三、改变层内容
四、获取表单值
五、通过style修改样式
六、通过classList修改类名，修改样式

一、查询节点

1.getElementById()通过id获取元素

	var dom = document.getElementById("dom");
			console.log(dom,dom.innerText)

2.getElementsByTagName()通过标签名获取节点列表

			var ps = document.getElementsByTagName("p");
			console.log(ps,ps[0].innerText);

3.getElementsByClassName()通过类名获取节点列表

	var sel = document.getElementsByClassName("sel");
			console.log(sel,sel[1].innerText);

4.getElementsByName()通过名称获取列表

			var fav = document.getElementsByName("fav");
			fav[1].checked = true; //让第二个选中  checked 选中的意思
			console.log(fav);

5.querySelector()通过css选择器获取节点

// querySelector 通过css选择器的方式去查询节点
			// query查询 Selector选择器
			 var  p = document.querySelector("div .four");
			 console.log(p,p.innerText);
			// 选择节点非常方便，填css选择器
			 var  p2 = document.querySelector("div p:last-of-type");
			 console.log(p2,p2.innerText);

6.querySelectorAll()通过css选择器获取节点列表

// 获取文档中所有的 <p> 元素
var x = document.querySelectorAll("p"); 
 
// 设置第一个 <p> 元素的背景颜色
x[0].style.backgroundColor = "red";

二、遍历节点

1.for：

			// 节点的遍历，就是把获到的节点列表挨个输出
			// 01 for循环来遍历
			var ps = document.getElementsByTagName("p");
			 for(var i=0;i<ps.length;i++){
				console.log(ps[i],ps[i].innerText);
			}

2.转换为数组Array.from() forEach：

// 02 转换为为数组后forEach
			// Array.from（）把类数组元素 转换为数组
			// forEach 数组的高阶函数（遍历），传入一个回调函数function
			// 数组元素有多少个 function 就会执行多少次
			// elem当前被遍历的元素
			var arr = Array.from(ps);//转换为数组
			arr.forEach(function(elem){
				console.log(elem,elem.innerText)
			})

3.转换为数组：for of


	var  ps = document.querySelectorAll("div p");
for(item of ps){
    console.log(item)
}

三、改变层内容

1.innerText获取/改变文本内容


<input type="text" value="人生苦短"/> 
<button type="button" onclick="changeInp()"> 改变文本框的内容</button>	
function changeInp(){
				var input = document.querySelector("input");
				// value 获取/设置文本框的值
				input.value = "学前端，月薪过万！";
			}

2.innerHTML获取/改变html内容

<button type="button" onclick="changeIt()">更改层内容</button>
		<div>	
			 我喜欢打游戏
		</div>
<script>
 function changeIt(){
				 var div = document.querySelector("div");
				 // 修改div的内容文本
				 // innerText 获取/设置元素文本内容（除html标签）
				 // div.innerText = "我还是喜欢<strong>学前端</strong>";
				 // innerHTML 获取/设置元素的html内容
				 div.innerHTML = "我还是喜欢<strong>学前端</strong>";
			 }
</script>

四、获取表单值

1.value 获取/改变表单的值

function showSeason(){
				var str = "";//用来存储每个season的值
				// 获取到所有的季节
				var seasons = document.getElementsByName("season");
				// 遍历seasons
				seasons.forEach(function(item){
					// 累计追加每个input的值
					str+=item.value+"<br/>";
				})
				var tip  = document.getElementById("tip");
				// 设置tip的文本
				tip.innerHTML = str;
				
			}
			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;

			}

2.checked 修改checkbox是否勾选


			// 当全选发送变化的时候，所有checkbox非all 值与all的保持一致
			// 获取all
			var all = document.getElementById("all");
			// 获取 非all的checkbox
			var checks = document.querySelectorAll("input:not(#all)");
			// onchange事件当表单发生变化时候触发
			all.onchange = function(){
				// 遍历checks，设置元素的checked值为 all的checked值
				checks.forEach(function(item){
					item.checked = all.checked;  
					//checked为true元素选中 checked值为false 元素不选中
				})
			}
			// 线条checks每个input，当发生变化时候，计算计算已经选中的个数
			// 如果选中的个数等于checks长度那么就说明 要设置全选了
			checks.forEach(function(item){
				item.onchange = function(){
					// 获取已经选中的checkbox
					// input:not(#all):checked （css3新增选择器）
					// input选中所有input标签:not(#all)过滤掉id为all的表:checked 留下被选中的checkbox
					var sel = document.querySelectorAll("input:not(#all):checked")
					if(sel.length===checks.length){
						// 如果选中的长度等于checks长度
						all.checked = true;
					}else{
						all.checked = false;
					}
				}
			})

五、通过style修改样式

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

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

 	function changeW(){
				// 获取div
				var div = document.getElementById("div");
				// 相当于用js写了行内样式
				// 修改div样式
				div.style.width = "400px";
				// 如果font-size写法改成驼峰式 fontSize
				div.style.fontSize = "48px";
			}

六、通过classList修改类名，修改样式

1.toogle()切换类名
2.add() 添加类名
3.remove() 删除类名
4.contains()检测是否包含类名

	//样式
#mydiv{
				width: 200px;
				height: 100px;
				border: 2px solid red;
			}
			.hide{
				display: none;
			}

<button type="button" onclick="toggle()">切换</button>
		 <div id="mydiv">
		 	学前端月薪过1.5万
		 </div>

	  // 通过单击按钮实现div的切换与显示
		  function toggle(){
			  // 获取到div
			  var divs = document.getElementById("mydiv");
			  // 如果divs的类列表里面有hide 移除hide没有添加hide
			  // console.log(divs.classList);
			  divs.classList.toggle("hide");
			  // classList.toggle() 切换类名
			  // classList.add()  添加类名
			  // classList.remove() 移除类名
			  // classList.contains() 检查是否包含
			  
			 
		  }