DOM原生遍历、获取、修改节点内容
程序员文章站
2022-03-07 18:20:43
...
距离上次发表博客应该已经快有两个月了吧,从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;
}
浏览器的表现以及打印:
推荐阅读
-
JS DOM操作(创建、遍历、获取、操作、删除节点)
-
JS DOM操作(创建、遍历、获取、操作、删除节点)
-
优雅的获取表单元素、dom树的遍历与常用属性、dom元素的增删改操作、js操作元素内容的几个常用方法、元素的dataset对象、获取元素的计算样式、元素的classList 对象常用方法、事件的添加与派发
-
修改XML指定标签的内容 c#获取xml节点内标签 c# xml 空值标签 腾讯qq xml消息标
-
优雅的获取表单元素、dom树的遍历与常用属性、dom元素的增删改操作、js操作元素内容的几个常用方法、元素的dataset对象、获取元素的计算样式、元素的classList 对象常用方法、事件的添加与派发
-
原生JS获取DOM 节点到浏览器顶部的距离或者左侧的距离
-
html dom节点操作(获取/修改/添加或删除)_javascript技巧
-
通过js获取元素表单以及遍历dom树和对元素的增删改查js操作内容演练实战了留言板的操作并对自定义属性: dataset对象初步的了解以及对js操作class和classList属性对象事件的添加与删除练习与了解
-
表单元素获取,dom树的遍历与常用属性,dom元素的增删改, js操作元素内容,留言板实例,dataset对象,获取元素计算样式,classList 对象常用方法 ,事件的添加与派发
-
通过js获取元素表单以及遍历dom树和对元素的增删改查js操作内容演练实战了留言板的操作并对自定义属性: dataset对象初步的了解以及对js操作class和classList属性对象事件的添加与删除练习与了解