DOM原生遍历、获取、修改节点内容

距离上次发表博客应该已经快有两个月了吧，从4月到如今我囤了很多草稿，基本都是开了个头就没继续了，一直想找时间把它们完成的，然而各种懒，各种借口。。。

昨天做了阿里的模拟笔试，时间50min，这个是真正意义上的前端笔试，最后有两个问答题需要写点代码，做完觉得我可能需要回炉重练了哈哈哈哈哈。。。

讲正题，这篇博主要是熟悉如何使用原生操作DOM节点，并获取节点内容。

HTML主体结构：

<body>
	<div>
		<p>段落一<span>first span</span></p>
		<p>段落二<span>second span</span></p>
		<p>段落三<span>third span</span></p>
	</div>
	<div>
		<table>
			<tr>
				<th>name</th>
				<th>age</th>
			</tr>
			<tr>
				<td>张三</td>
				<td>17</td>
			</tr>
			<tr>
				<td>李四</td>
				<td>43</td>
			</tr>
			<tr>
				<td>王五</td>
				<td>22</td>
			</tr>
			<tr>
				<td>小刘</td>
				<td>9</td>
			</tr>
			<tr>
				<td>黄三</td>
				<td>20</td>
			</tr>
		</table>
	</div>
</body>

JS的一些操作以及说明：

    //获取所有的div
	var divs=document.getElementsByTagName("div");
	console.log(divs);
	//获取第一个div下所有的p
	var ps=divs[0].getElementsByTagName("p");
	console.log(ps);
	for(var i=0;i<ps.length;i++){
		//获取段落的文本内容（不包含span）
		var pContent=ps[i].childNodes[0].data;
		console.log(pContent);
		//获取段落内的span
		var span=ps[i].getElementsByTagName("span");
		console.log(span);
		//获取span内的文本内容
		var spanContent=span[0].innerHTML;
		console.log(spanContent);
		console.log(ps[i].childNodes[1].innerHTML);
	}

	//获取所有的tr
	var trs=document.getElementsByTagName("tr");
	console.log(trs);
	//获取所有非标题单元格的内容，以对象的形式存于数组中
	var arr=[];
	for(var i=1;i<trs.length;i++){
		var obj={};
		var tds=trs[i].getElementsByTagName("td");
		obj.name=tds[0].innerHTML;
		obj.age=parseInt(tds[1].innerHTML); //将字符串形式的年龄数据转换成数字格式
		arr.push(obj);
	}
	console.log(arr);

	//重新排列表格，按年龄从小到大排列,插入排序
	for(var i=1;i<arr.length;i++){
		var temp=arr.slice(i,i+1)[0];
		for(var j=i-1;j>=0;j--){
			if(arr[j].age>temp.age){
				arr[j+1]=arr[j];
			}else{
				break;
			}
		}
		arr[j+1]=temp;
	}
	for(var i=1;i<trs.length;i++){
		var tds=trs[i].getElementsByTagName("td");
		tds[0].innerHTML=arr[i-1].name;
		tds[1].innerHTML=arr[i-1].age;
	}

浏览器的表现以及打印：

DOM原生遍历、获取、修改节点内容

猜你喜欢