javaScript之节点操作
2024-09-04 01:07:50
javaScript程序员避免不了要操作页面中的DOM,除了经常使用的:
appendChild()向childNodes列表的末尾添加一个节点。
insertBefore(),接受两个参数,要插入的节点和作为参照的节点。
replaceChild(),接受两个参数,要插入的节点和要替换的节点。
removeChild(),移除某个节点,接受一个参数,即为要删除的节点。
cloneNode(),克隆节点,接受一个布尔值,表示是否执行深复制。在参数为true情况下,执行深复制,复制其全部子节点。
我们还需要对网页中的节点进行遍历或颠倒,如下所示:
对页面节点遍历
<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<title>遍历指定元素下所有类型节点</title>
<script type="text/javascript">
window.onload=function(){
var wrapper=document.getElementById("wrapper");
var content=document.getElementById("content");
var root = document.documentElement;
function findNodes(node){
var arr=[];
function done(node){
if(node.childNodes.length!=0){
var childrenNodes=node.childNodes;
for(var index=0;index<childrenNodes.length;index++){
arr.push(childrenNodes[index]);
done(childrenNodes[index]);
}
}
}
done(node)
return arr;
}
// 遍历根节点下所有节点
console.log('根节点下所有节点');
console.log(findNodes(root));
// 遍历ID为content的所有节点
console.log('ID为content的所有节点');
console.log(findNodes(content));
}
</script>
</head>
<body>
<div id="wrapper"></div>
<div id="content">
<div>
<!-- 我是注释 -->
<ul>
<li>first li</li>
<li>second li</li>
<li>third li</li>
</ul>
</div>
</div>
</body>
</html>
如果只想遍历Element类型节点,可以使用node.children。另外还可以实现对Element节点计数
function traverseNodes(node){
var countTeg = 0;
function done(node){
if(node.nodeType == 1)
countTeg++;
var childrens = node.childNodes;
for(var i=0; i<childrens.length;i++){
countTeg += done(childrens[i])
}
return countTeg;
}
return done(node);
}
颠倒页面节点
颠倒指定节点的直系子节点
<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<title>遍历指定元素下所有节点</title>
<script type="text/javascript">
function reserve(node){
var children = node.childNodes;
var len = children.length;
for(var i=len-1; i>=0; i--){
var temp = node.removeChild(children[i]); //从父节点node中从后向前一次删除子节点children[i]
node.appendChild(temp); //把删除了的节点放到父节点node的末尾
}
}
</script>
</head>
<body>
<!-- 我是注释 -->
<div>
<p>第一段</p>
<p>第二段</p>
<p>第三段</p>
</div> <button onclick="reserve(document.body)">点击我</button>
</body>
</html>
颠倒指定节点的所有子孙节点
<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<title>颠倒所有子孙节点</title>
<script type="text/javascript">
function reserveNode(node){ //文本节点
if(node.nodeType == 3){//颠倒文本节点
var text = node.data;
var retext = "";
for(var i=text.length-1; i>=0; i-- ){
retext += text.charAt(i);
}
node.data = retext;
}else{ //非文本节点直接颠倒节点位置
var children = node.childNodes;
var len = children.length;
for(var i = len-1; i>=0; i--){
reserveNode(children[i]);
node.appendChild(node.removeChild(children[i]));
}
} }
</script>
</head>
<body>
<!-- 我是注释 -->
<div>
<p>第一段</p>
<p>第二段</p>
<p>第三段</p>
</div> <button onclick="reserveNode(document.body)">点击我</button>
</body>
</html>
总之,灵活用于DOM的基本操作方法可以实现巨大的功能!!!
最新文章
- vs创建项目模板和项模板
- HDU 1512 Monkey King ——左偏树
- 自己不懂的SQL语句用法
- HTML无序列表和有序列表
- eclipse和myeclipse一键取消所有断点
- git详细教程
- 关于Linux的总结(三)
- PHP图片加文字水印和图片水印方法
- linux中的strings命令简介2
- C该程序生成一个唯一的序列号
- SQLServer 创建服务器和数据库级别审计
- 献给迷惘的Java架构工程师
- Effective C++总结
- C#生成JOSN字符串
- hive时间日期函数及典型场景应用
- 使用css设置三角形
- .Net Core 中间件之静态文件(StaticFiles)源码解析
- java时间计算
- luogu P4082 [USACO17DEC]Push a Box
- 在Vue的构造器里我们写一个add方法,然后我们用实例的方法调用它