js中DOM的增删改查

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>

结果：