JS的节点操作:创建、增加、删除、复制、查找
来源:互联网 发布:java业余班 编辑:程序博客网 时间:2024/05/01 16:58
节点分成两种:文本节点,元素节点,大部分情况,我们只要元素节点。可以通过nodeType判断节点的类型,nodeType==3 是文本节点,nodeType==1 是元素节点。下面是节点的几种操作。
1、创建节点:createElement()
接受一个参数,为要创建的标签名。
var oXi=document.createElement('li');
2、增加节点:appendChild()、insertBefore()
appendChild()接受一个参数,即要增加的节点;
insertBefore()接受两个参数,第一个是要插入的节点,第二个是参照节点,返回要添加的元素节点
oXi.innerHTML='西瓜';oList.appendChild(oXi);//用于向children列表的末尾添加一个节点oBl.innerHTML='菠萝';oList.insertBefore(oBl,oAl);//向指定位置添加一个节点,如果不是在末尾插入节点,而是想放在特定的位置上,用这个方法
创建节点要和增加节点配合使用,创建节点只是生成了节点,但还没有加入到页面中,通过增加节点appendChild添加后才会出现到页面中。
appendChild() 方法还可以添加已经存在的元素,会将元素从原来的位置移到新的位置
ul.appendChild(ul.firstChild); //把ul的第一个元素节点移到ul子节点的末尾
3、删除节点:removeChild()
接受一个参数,为要删除的节点。通过父节点找到并删除子节点。
<div id="div1"><p id="p1">这是一个段落。</p></div><script>var parent=document.getElementById("div1");var child=document.getElementById("p1");parent.removeChild(child);//父节点.removeChild(子节点)</script>
4、复制节点:cloneNode()
用于复制节点, 接受一个布尔值参数, true 表示深复制(复制节点及其所有子节点), false 表示浅复制(复制节点本身,不复制子节点)
var oList=document.getElementById('list'); //获得ulvar aUls= oList.cloneNode(true); //深复制var aUlq = oList.cloneNode(false); //浅复制
5、替换节点:replaceChild()
用于替换节点,接受两个参数,第一参数是要插入的节点,第二个是要替换的节点,返回被替换的节点。
oList.replaceChild(aaa,aLi[1]);
6、查找节点
1)childNodes 返回指定节点的子节点集合,包括文本节点和元素节点,通过不用这种方法获取子节点,而用children;
2)children 返回指定节点的子节点集合,只包括元素节点;
备注:可以使用 length 属性来确定子节点的数量,然后遍历所有的子节点并提取需要的信息;
3)parentNode 返回指定节点的父节点,如果没有父节点则返回null;
4)firstChild 返回指定节点的首个子节点,IE兼容;firstElementChild 返回指定节点的首个子节点,非IE兼容;
5)lastChild 返回指定节点的尾节点,IE兼容; lastElementChild 返回指定节点的尾节点,非IE兼容;
4)nextSibling 返回指定节点的下一个兄弟节点,IE兼容;nextElementSibling 返回指定节点的下一个兄弟节点,非IE兼容;如果没有下一个兄弟节点则返回null;
5)previousSibling 返回指定节点的上一个兄弟节点,IE兼容;previousElementSibling 返回指定节点的上一个兄弟节点,非IE兼容;如果没有上一个兄弟节点则返回null;
封装获取兄弟节点兼容性问题的方法:(首尾节点方法同)
function nextsibling(ele){ if(ele.nextElementSibling){ return ele.nextElementSibling; } else{ return ele.nextSibling; }} nextsibling(aLi[1]).style.background='red';//方法调用function previoussibling(ele){ if(ele.previousElementSibling){ return ele.previousElementSibling; } else{ return ele.previousSibling; }}
- JS的节点操作:创建、增加、删除、复制、查找
- js的DOM节点操作:创建 ,插入,删除,复制,查找节点
- js的节点操作:插入,删除,复制,查找节点?
- js操作dom节点,创建,复制,删除,添加,查找等操作总结
- JS对DOM节点的操作--增加节点,删除节点
- jquery节点的操作 创建 删除 复制
- js DOM节点的创建、插入、删除、查找、替换例子
- 二叉查找树的创建及删除节点操作
- DOM节点的增加,删除,修改,查找
- js中创建、添加、删除、移动、复制和查找(子)节点
- DOM操作---增加节点、增加节点文字、指定位置增加子节点、节点复制、删除一个子节点例子
- js----增加删除节点
- js增加删除节点
- javascript中dom节点操作(创建节点、增加节点、删除节点、克隆节点)
- 二叉树的创建,节点删除,节点增加
- jquery 节点的创建增加 节点删除 替换
- js添加、移除、移动、复制、创建和查找节点
- 11.21课堂笔记-查找节点和创建节点、插入节点和删除节点、复制节点替换节点、包裹节点和属性操作、样式操作、设置和获取HTML、文本和值
- Install Docker Machine
- 让一个div层浮在最上层的方法
- WINDOWS下批处理脚本命令
- LeetCode-120. Triangle
- neo4j-ogm-core使用小记
- JS的节点操作:创建、增加、删除、复制、查找
- 002一番寻找后,终于找到简单好用的利用runtime解决数组字典为nil时造成的程序崩溃的第三方
- VideoView
- 一个对含中文字符串在内的字符串排序简便方法
- LeetCode 338
- linux系统的简述和优势,趋势所在!!
- BZOJ1880: [Sdoi2009]Elaxia的路线
- ROS里面的几个python写的工具
- 你中招了吗?加密勒索软件攻击趋势分析