js中DOM的增刪改查

常見的Dom、html的操作不外乎查詢節點、增加節點（尤其是動態渲染資料的時候）、修改節點內容、刪除節點。

查詢節點

1、一般就是document.getElement(s)系列，主要有document.getElementById(‘id’)、document.getElementsByClassName(‘classname’)、document.getElementsByTagName(‘tag’)等；
要注意的是除了id查詢獲得的是單個元素外，另外兩個方法獲得的是一個數組，需要通過下標的方式拿到具體的值:

<div id='box'
 
>盒子</div>
	<div class='content'>內容</div>
	<div class='content'>內容框</div>
	<script>
		var box=document.getElementById('box');
		console.log(box);
		var div1=document.getElementsByClassName('content');
		console.log(div1);
		var div2=document.getElementsByTagName('div'
 
);
		console.log(div2);
	</script>

得到結果：

增加節點

常用方法：createElement()+innerHTML()+appendChild()，在渲染動態頁面時會配合for迴圈使用；

<div id='box'>盒子</div>
	<div class='content'>內容</div>
	<div class='content'>內容框</div>
	<script>
		var div=document.createElement('div'
 
);
		div.innerHTML='我是一個div';
		document.body.appendChild(div);
		console.log(document.body);
	</script>

新增成功：

修改節點

一般是修改文字內容或者屬性值，常用的就是setAttribute()、getAttribute()方法。

<div id='box'>盒子</div>
	<div class='content'>內容</div>
	<div class='content'>內容框</div>
	<script>
		var div=document.getElementById('box');
		div.setAttribute('class','box');
		div.innerHTML='新增了一個屬性';
		console.log(div);

刪除節點

常用的是removeChild()，直接刪除選中的子節點，如果要刪除的元素不存在就會返回null;

<div id='box'>盒子
		<div class='content'>內容</div>
		<div class='content'>內容框</div>
	</div>
	<script>
		var div=document.getElementById('div');
		var first=document.getElementsByClassName('content')[0];
		div.removeChild(first);
		console.log(div);
	</script>

結果：