DOM文档对象模型（一）

一、获取节点

//通过id查询节点

var h1 = document.getElementById("h1")

//通过标签查询节点（查询的是一类节点，返回的是一个类似数组的HTML集合）
var p = document.getElementsByTagName("p") 

//通过类名来获取节点元素（返回的是一个类似数组的HTML集合）
var lo = document.getElementsByClassName("lo") 

//通过name来获取节点元素（返回的是一个类似数组的节点列表NodeList）
var frc = document.getElementsByName("frc") 

//querySelector(通过css选择器的方式来获取节点)
var p2 = document.querySelector("p:nth-of-type(2)")
var p3 = document.querySelector(".p3") 

 二、节点的遍历

//for循环遍历
for(let i =0;i<p.length;i++){
 	console.log(p[i],p[i].innerText)
}

//转化为数组的遍历，elem为遍历的元素
Array.from(p).forEach(function(elem){
	console.log(elem,elem.innerText)
})

 三、修改样式和元素内容的显示与隐藏

<button type="button" onclick="changeCss(),disPlay()">改变样式</button>
		<div id="div">
			你相信光吗？
		</div>
	
<script type="text/javascript">
	function changeCss(){
		var div = document.getElementById("div")
		div.style.width="300px"
		div.style.fontSize="32px"
		div.style.color="red"
		div.style.textAlign="center"
		div.style.lineHeight="85px"
		div.style.marginTop="15px"
	}
	function disPlay(){
		var div =  document.getElementById("div");
		//classList.toggle无就添加类或者有就移除
		div.classList.toggle("hide")
		// div.classList.add("hide")
		// //获取display值，默认第一次获取不到
		// var display = div.style.display;
		// if(display!=="none"){
		// 	div.style.display="none"
		// }else{
		// 	div.style.display="block"
		// }
	}
</script>