DOM文档对象模型（二）

一、节点关系查找

	
我是第一个
	
我是第二个
	
我是第三个
	我是最后一个

// 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); 

二、属性的修改 

属性修改





修改图片

三、节点信息  nodeName：节点名称，元素节点返回的是元素标签名大写。 nodeType：节点类型，如：1代表元素，3代表文本节点。nodeValue：节点值，元素节点的nodeValue为null。 四、创建和插入节点 

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

}

 六、dom中表格 *** 作

		

			

				
书名
				
价格
				
 *** 作
			
			

				
精通JS
				
30.0
				
删除
			
			

				
精通JS
				
30.0
				
删除
			
		
		增加一行
		删除一行
		修改标题