一、获取节点
//通过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>