Js_Dom 应用实践_增删查改_企业必备技能

Dom应用

<div class="d1">hollwrod1
	<h3 class="class_h1">你好世界1</h3>
	<h3 class="class_h2">你好世界2</h3>
	<h3 class="class_h3">你好世界3</h3>
</div>

<div class="d2" id="d2">hollwrod2</div>
<div class="d3">hollwrod3</div>

渲染数据到HTML中

通过dom获取数据,并修改内容

	var html = document.children[0];
	var body = html.children[1]
	var abc = body.innerText = "加油"
	body.innerHTML = abc + "<h1>加油</h1>"

修改内容, 此时的body里面已经含有h1 的内容了,所以是body.children[0]

	var h1 = body.children[0]
	h1.innerHTML = "修改后的内容"

	 var d1 = document.getElementsByTagName("div")
	 var newArr = Array.from(d1)
	 d1.__proto__.__proto__=Array.prototype
	 console.log(d1);

快捷方法2

	var d2=document.getElementsByClassName("d2")
	console.log(d2);
	var d2_id=document.getElementById("d2")
	console.log(d2_id.innerHTML);*/

最常用的方法,也是最好用,因为他能像css选择器一样

	var d1=document.querySelector(".d1")
	console.log(d1.innerHTML,d1.innerText);
	var d2_id=document.querySelector("#d2")
	console.log(d2_id)
	var d3_Div=document.querySelector("div:nth-child(3)")
	console.log(d3_Div.innerText)
	
	var div_new=document.querySelectorAll("div:nth-child(3)")
	//设置样式,同时也可以修改内容
	div_new.forEach(function(item,i){
		d3_Div.innerText="我改变了内容"
		item.style.backgroundColor="pink";
	})*/

获取兄弟元素(同级关系)

	var d1=document.querySelector(".d2")
	console.log(d1);
	console.log(d1.previousElementSibling);//获取兄弟元素上一个元素
	console.log(d1.nextElementSibling);//获取兄弟元素下一个元素*/

获取父元素

	var h3=document.querySelector("h3:nth-child(3)")
	console.log(h3.parentElement);//IE历史遗留
	console.log(h3.parentNode);//谷歌*/

获取第一个子元素和最后一个子元素

	var h3_new=document.querySelector(".d1")
	console.log(h3_new.children[0]);//第一个
	console.log(h3_new.children[h3_new.children.length-1]);//最后一个
	console.log(h3_new.firstElementChild);//等同于第一个
	console.log(h3_new.lastElementChild);//等同于最后一个*/
	
	var img=document.createElement("img")//创建标签
	img.src="img/bz.jpg"
	var body= document.querySelector("body")//获取插入的位置
	var d2_new=document.querySelector(".d2")//参考标签
	body.insertBefore(img,d2_new)

在插入子节点到父元素里子节点最后的位置

	 var h1=document.createElement("h1")//1.创
	 h1.innerText="我是插入的内容"//2.设置该标签的内容
	 var d1=document.querySelector(".d1")//3.需要插入的位置
	 d1.appendChild(h1)//4.开始插入,插入d1内,成为d1的子元素

在指定位置前插入内容-图片等 需要获取2个参数 body ,要插入的位置

	 var body=document.querySelector('body')
	 var class_d1=document.querySelector(".d1")
	 var img = document.createElement('img')
	 img.src='bz.jpg'//插入图片
	 body.insertBefore(img,class_d1)

追加图片,追加到最后面

	 var img2=img.cloneNode();//复制节点
	 var d5=document.querySelector('body');
	 d5.appendChild(img2)

删除指定元素 删除子元素

	var body=document.querySelector('.d1')
	var class_h1=document.querySelector('.class_h1')
	body.removeChild(class_h1)

删除指定的元素

	var d4=document.querySelector(".d1")//找到要删除的元素
	d4.parentElement.removeChild(d4)
	//删除指定的节点.d1的父元素是body.的子元素(就是.d1)

通过dom 修改样式

	var d2=document.querySelector(".d2")
	d2.style.width='200px'
	d2.style.height='200px'
	d2.style.backgroundColor='hotpink'
	d2.style.borderRadius='50%'