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)
})

四、节点关系查找

<div id="parent">
	<p>我是第一个</p>
	<p id="p2">我是第二个</p>
	<p>我是第三个</p>
	<h5>我是最后一个</h5>
</div>

// parent的第一个子节点
var frist = parent.firstElementChild; 

//parent的第一个最后一个子节点
var last = parent.lastElementChild; 

//parentElement,表示元素的父节点元素
console.log('p2的父节点',p2.parentElement) 

//previousElementSibling表示p2的上一个兄弟元素节点
console.log('p2的上一个兄弟',p2.previousElementSibling); 

//nextElementSibling表示p2的下一个兄弟元素节点
console.log('p2的下一个兄弟',p2.nextElementSibling); 

五、属性的修改 

<h1>属性修改</h1>
<img src="../img/分组%2035%20(1).png" alt="图片">
<br>
<br>
<button type="button" onclick="changeImg()">修改图片</button>
<script type="text/javascript">
	function changeImg(){
		var img=document.querySelector("img")
 
        //setAttribute设置属性
		img.setAttribute("src","../img/分组%2035%20(2).png")
 
        //removeAttribute移除属性
		img.removeAttribute("alt")
	}
</script>

六、创建和插入节点 /复制节点和删除节点 

function create1Img(){
 
	//通过js创建一张图片
	var img = document.createElement("img");
 
	//给图片的src一个指定的路径
	img.setAttribute("src","../img/分组%2035%20(1).png")
 
	//获取要插入得位置
	var h5 = document.getElementById('h5')
 
	//插入到获取得位置的前面
	document.body.insertBefore(img,h5)
 
}

function copy(){
 
	//获取要复制得照片
	var pic1 = document.getElementById('pic1')
 
	//复制照片，false只是当前节点，true包含子节点
	var img = pic1.cloneNode(false);
 
	//将图片插入到body标签中
	document.body.appendChild(img)
 
}
 
function del(){
	//获取到要删除得对象
	var pic = document.querySelector('img:last-of-type')
 
	//删除，自己删除自己
	pic.remove();
 
	//通过父节点来删除
	// pic.parentElement.removeChild(pic);
 
}