javascript节点的操作 创建、添加、移除、移动、复制
(1)创建新节点
createDocumentFragment() //创建一个DOM片段 createElement() //创建一个具体的元素 createTextNode() //创建一个文本节点
(2)添加、移除、替换、插入
appendChild() removeChild() replaceChild() insertBefore()
(3)查找
getElementsByTagName() //通过标签名称 getElementsByName() //通过元素的Name属性的值 getElementById() //通过元素Id,唯一性
本节要用到的html例子
<ul id="myList"> <li>项目一</li> <li>项目二</li> <li>项目三</li> </ul>
1.创建元素节点
document.createElement() 方法 用于创建元素,接受一个参数,即要创建元素的标签名,返回创建的元素节点 var div = document.createElement("div"); //创建一个div元素 div.id = "myDiv"; //设置div的id div.className = "box"; //设置div的class
创建元素后还要把元素添加到文档树中
2.添加元素节点
appendChild() 方法 用于向childNodes列表的末尾添加一个节点,返回要添加的元素节点 var ul = document.getElementById("myList"); //获得ul var li = document.createElement("li"); //创建li li.innerHTML = "项目四"; //向li内添加文本 ul.appendChild(li); //把li 添加到ul子节点的末尾
添加后:
<ul id="myList"> <li>项目一</li> <li>项目二</li> <li>项目三</li> <li>项目四</li> </ul>
appendChild() 方法还可以添加已经存在的元素,会将元素从原来的位置移到新的位置
var ul = document.getElementById("myList"); //获得ul ul.appendChild(ul.firstChild); //把ul的第一个元素节点移到ul子节点的末尾
运行后(IE):
<ul id="myList"> <li>项目二</li> <li>项目三</li> <li>项目一</li> </ul>
insertBefore() 方法 ,如果不是在末尾插入节点,而是想放在特定的位置上,用这个方法,该方法接受2个参数,第一个是要插入的节点,第二个是参照节点,返回要添加的元素节点
var ul = document.getElementById("myList"); //获得ul var li = document.createElement("li"); //创建li li.innerHTML= "项目四"; //向li内添加文本 ul.insertBefore(li,ul.firstChild); //把li添加到ul的第一个子节点前
添加后:
<ul id="myList"> <li>项目四</li> <li>项目一</li> <li>项目二</li> <li>项目三</li> </ul>
var ul = document.getElementById("myList"); //获得ul var li = document.createElement("li"); //创建li li.innerHTML= "项目四"; //向li内添加文本 ul.insertBefore(li,ul.lastChild); //把li添加到ul的子节点末尾
添加后:
<ul id="myList"> <li>项目一</li> <li>项目二</li> <li>项目三</li> <li>项目四</li> </ul>
var ul = document.getElementById("myList"); //获得ul var li = document.createElement("li"); //创建li li.innerHTML= "项目四"; //向li内添加文本 var lis = ul.getElementsByTagName("li") //获取ul中所有li的集合 ul.insertBefore(li,lis[1]); //把li添加到ul中的第二个li节点前
添加后:
<ul id="myList"> <li>项目一</li> <li>项目四</li> <li>项目二</li> <li>项目三</li> </ul>
3.移除元素节点
removeChild() 方法 ,用于移除节点,接受一个参数,即要移除的节点,返回被移除的节点,注意被移除的节点仍然在文档中,不过文档中已没有其位置了 var ul = document.getElementById("myList"); //获得ul var fromFirstChild = ul.removeChild(ul.firstChild); //移除ul第一个子节点 var ul = document.getElementById("myList"); //获得ul var lis = ul.getElementsByTagName("li") //获取ul中所有li的集合 ul.removeChild(lis[0]); //移除第一个li,与上面不同,要考虑浏览器之间的差异
4.替换元素节点
replaceChild() 方法 ,用于替换节点,接受两个参数,第一参数是要插入的节点,第二个是要替换的节点,返回被替换的节点 var ul = document.getElementById("myList"); //获得ul var fromFirstChild = ul.replaceChild(ul.firstChild); //替换ul第一个子节点 var ul = document.getElementById("myList"); //获得ul; var li = document.createElement("li"); //创建li li.innerHTML= "项目四"; //向li内添加文本 var lis = ul.getElementsByTagName("li") //获取ul中所有li的集合 var returnNode = ul.replaceChild(li,lis[1]); //用创建的li替换原来的第二个li
5.复制节点
cloneNode() 方法,用于复制节点, 接受一个布尔值参数, true 表示深复制(复制节点及其所有子节点), false 表示浅复制(复制节点本身,不复制子节点) var ul = document.getElementById("myList"); //获得ul var deepList = ul.cloneNode(true); //深复制 var shallowList = ul.cloneNode(false); //浅复制
转载于:https://www.cnblogs.com/asqq/archive/2012/09/27/3194948.html
javascript节点的操作 创建、添加、移除、移动、复制相关推荐
- JavaScript对数组操作。添加/删除/截取/排序/倒序
js对数组对象的操作以及方法的使用 如何声明创建一个数组对象: var arr = new Array(); 或者 var arr = []; 如何移除所有数组中数据? arrayJson.dataL ...
- DOM操作——怎样添加、移除、移动、复制、创建和查找节点?
(1)创建新节点 createDocumentFragment() //创建一个DOM片段 createElement() //创建一个具体的元素 createTextNode() // ...
- JavaScript学习笔记:创建、添加与删除节点
JavaScript学习笔记:创建.添加与删除节点 文章目录 JavaScript学习笔记:创建.添加与删除节点 一.DOM对象节点类型 二.创建节点 1.创建元素节点 2.创建文本节点 3.创建属性 ...
- javascript中节点操作、节点属性、节点获取、创建节点、删除节点、克隆节点
节点操作 节点操作实际是利用DOM树把节点划分为不同的层次关系,常见父子兄弟级关系 节点属性: 节点一般有三个属性:nodeType节点类型(其中元素节点值为1,属性节点值为2,文本节点值为3).no ...
- JavaScript HTML DOM元素节点常用操作接口
在文档对象模型 (DOM) 中,每个节点都是一个对象.DOM 节点有三个重要的属性 : 1. nodeName : 节点的名称 2. nodeValue :节点的值 3. nodeType :节点的类 ...
- 第一百二十六节,JavaScript,XPath操作xml节点
第一百二十六节,JavaScript,XPath操作xml节点 学习要点: 1.IE中的XPath 2.W3C中的XPath 3.XPath跨浏览器兼容 XPath是一种节点查找手段,对比之前使用标准 ...
- javascript学习笔记(十九) 节点的操作
包括节点的创建.添加.移除.替换.复制 本节要用到的html例子 1 <ul id="myList"> 2 <li>项目一</li> 3 < ...
- js添加多个子节点_JS实现DOM节点插入操作之子节点与兄弟节点插入操作示例
本文实例讲述了JS实现DOM节点插入操作之子节点与兄弟节点插入操作.分享给大家供大家参考,具体如下: www.jb51.net JS节点插入 function showinsert(){ //添加子节 ...
- JS-DOM ~ 03. 子节点的操作、style.样式和属性、dom元素的创建方法及操作、14个例题、主要是利用js直接控制html属性...
带有Element和不带的区别 a) 带Element的获取的是元素节点 b) 不带可能获取文本节点和属性节点 获取所以子节点 a) . childNodes b) . children ...
最新文章
- 浅析对象访问属性的.和[]方法区别
- The current branch is not configured for pull No value for key branch.master.merge found in config
- python 数据分析学什么-python数据分析哪些课程好?
- 构建LINUX下的入侵检测系统——LIDS 系统管理命令--vlock
- [Abp vNext微服务实践] - 搭建租户管理服务
- [css] 解释下为什么css的reset不建议直接这么写:*{ margin:0; padding:0;}?
- linux c 编程手册,Linux C/C++编程手册查阅方法
- 如何打造园本特色_如何打造一个可持续发展的特色观光园?
- 人生不值得,我在用python.1_关于python
- Python 之匿名函数和偏函数
- spring cloud中微服务之间的调用以及eureka的自我保护机制
- 简述matlab数组和矩阵运算的异同点,matlab矩阵运算和数组运算
- node项目报错had too many unstable restarts (16). Stopped. “errored”
- python开根号_python 开根号
- eclipse访问限制
- Android开发3年,4个月面试,终于拿到小米、京东、字节大厂offer
- JAVA usb发卡器_USB模拟键盘输出发卡器
- c# picturebox 刷新_c# – 更新PictureBox时可能导致ArgumentException的原因是什么?
- 解决Ubuntu自动更新Linux内核导致显卡驱动无法加载,致使循环在登录界面
- 基于STC89C52单片机的智能风扇
热门文章
- anaconda报错 ImportError: No module named conda.cli
- SVD奇异值分解(PCA,LSI)
- 企业如何开展数据可视化建设
- 3张报表搞定财务分析
- 数据分析方法(一):对比与对标
- java进入dos_java启动dos命令收集笔记一
- centos系统 查看当前python执行的进程
- python中join和split使用
- 用python自动化玩游戏封号吗_用 Python 自动化办公能做到哪些有趣或有用的事情?...
- vb.net服务器启动后cpu占用了70_服务器如何区分攻击类型?