javascript---操作节点
快捷键:jiedian(节点)
节点增删改appendChild() insertBefore() replaceNode()
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script src="js/domready.js"></script><!--必须导入该文件,搜狗输入domready.js-->
<script>
myReady(function(){
// var myul=document.getElementById('myul');//获得ul对象
// var li=document.createElement("li");//创建li对象
// var txt=document.createTextNode("4");//创建文本对象
// li.appendChild(txt);//给li对象添加文本对象。
// myul.appendChild(li);//给myul对象添加子元素,添加到最后子元素后面。
//
// var firstChild=myul.firstElementChild;//获得第一个子元素。
// myul.appendChild(firstChild);//返回的是被添加的对象。把第一个子节点移动到对象myul元素中最后一个//子元素后面。这里并没有复制。而是移动。
// var obj=myul.appendChild(firstChild);//这里并没有再次移动第一个子元素。只是做一次读取操作。
// console.log(obj);//显示:<li>1</li> 该li对象。返回被添加的对象。
//ul.insertBefore(newLi,liTwo); 指定在某个父元素ul里面,把newLi元素对象添加到指定liTwo元素对象前面。如果第二个参数对象为null,那么直接把对象newLi对象添加到父元素里面最后面的子元素后面,类似于:ul.appendChild(newLi);
// var ul=document.getElementById("myul");//获取ul对象
// var newLi=document.createElement("li");//创建li元素对象
// var txt=document.createTextNode("4");//创建文本节点对象
// newLi.appendChild(txt);//把文本节点添加到元素节点li对象中。
// var liTwo=ul.children[1];//获取ul对象的第二个子节点对象
//var liTwo=ul.children.item(1);//获取ul对象的第二个子节点对象
// var ret=ul.insertBefore(newLi,liTwo);//把li元素节点添加到ul的第二个子节点之前。ul.insertBefore(newObj,obj),insertBefore方法跟两个数,newObj是添加的对象,obj被指定位置前面添加的对象。即:在指定的父级元素ul对象里面,把某个对象加到指定对象的前面。
// console.log(ret);//返回添加的对象:<li>4</li>
// console.log(ret.innerHTML);//返回对象里面的文本内容。
// ul.insertBefore(newLi,null);//把newLi直接添加到ul里面最后子元素的后面。
//ul.insertBefore(newLi,ul.firstElementChild);//把newLi直接添加到ul第一个子节点前面。
//ul.insertBefore(newLi,ul.lastElementChild);//把newLi直接添加到ul中最后一个子节点前面。
//ul.replaceChild(newLi,li2); 指定父元素ul下面,用新创建的对象newLi,把指定的li2对象替换掉,如果ul父元素中不存在li2对象,那么就会报错。
// var myUl=document.getElementById("myUl");//获取ul对象。
// var newLi=document.createElement("li");//创建li对象
// var txt=document.createTextNode("5");//创建文本节点对象
// newLi.appendChild(txt);//把文本节点txt装填到li元素对象中。
// var ret=myUl.replaceChild(newLi,myUl.children.item(1));//用newLi元素对象替换ul中的第二个子元素对象。
// console.log(ret);//返回:被替换的子元素对象<li>2</li>,在firefox中可以查看各种属性,在chrome中只显示对象本省。
//ul.cloneNode(boolean);可以跟一个布尔值,默认是false可以省略,false:表示只复制当前节点对象,不复制子节点和孙子节点;true:表示深度复制。包括所有子节点以及孙子节点。cloneNode( )方法克隆所有属性以及他们的值,如果需要克隆所有后代 需要把deep参数设置为true,默认是 false
// var myUl=document.getElementById("myUl");
// var cloneUl=myUl.cloneNode();//只复制当前节点对象,不复制子节点和孙子节点值为false时,可以省略。
// console.log(cloneUl);//控制台打印所复制的节点
//document.body.insertBefore(cloneUl,null);// 把复制的节点添加到文档中的body子元素的末尾。
// document.body.appendChild(cloneUl);
//div.normalize();//将相邻的两个文本节点合并。方法移除空的文本节点,并连接相邻的文本节点
// var myDiv=document.createElement("div");//创建div元素对象
// var txt1=document.createTextNode("woaini");//创建第一个文本节点对象
// myDiv.appendChild(txt1);//将文本节点txt1添加到div元素对象中。
// var txt2=document.createTextNode("我爱你");//创建第二个文本节点.
// myDiv.appendChild(txt2);//将文本节点txt2添加到div元素对象中。
// document.body.appendChild(myDiv);
// console.log(myDiv.childNodes.length);//获取所有子节点包括空节点,即:没有html标签的文字节点,所以这里的值为:2;
// console.log(myDiv.childElementCount); 只获取有html标签的节点,以上都是文本节点,所以这里的值为:0.
// myDiv.normalize();//将相邻的两个文本节点合并。
// console.log(myDiv.childNodes.length);//返回1.
// console.log(myDiv.firstChild.wholeText);//输出第一个子节点的内容。
//技巧:如果想要了解某个对象的属性,可以直接使用firefox或者chrome在网页控制台中输出该对象,点击该对象即可查看所有的属性。如上data可以,使用console.log(myDiv.firstChild)点击该对象查看属性,想要得到该对象的值,可以查看后使用:data: "woaini我爱你",nodeValue: "woaini我爱你",textContent: "woaini我爱你",wholeText: "woaini我爱你"
//splitText()方法将在指定的 offset 处把 Text 节点分割成两个节点。原始的 Text 节点将被修改,使它包含 offset 指定的位置之前的文本内容(但不包括文本内容)。新的 Text 节点将被创建,用于存放从 offset 位置(包括该位置上的字符)到原字符结尾的所有字符。新的 Text 节点是该方法的返回值。splitText() 方法按照指定的 offset 把文本节点分割为两个节点
// var myDiv=document.createElement("div");
// var txt=document.createTextNode("我爱你woaini");
// myDiv.appendChild(txt);
// document.body.appendChild(myDiv);
// var newTxt= myDiv.firstChild.splitText(1);//把myDiv的第一个文本节点以索引1前面拆分为两个文本对象。
// console.log(newTxt);//返回:索引从1到最后的文本对象:"爱你woaini"。
// console.log(myDiv.childNodes);//获取拆分后的所有节点对象 NodeList(2) [text, text] text表示文本对象
// console.log(myDiv.childNodes[0]);//获取第一个子元素文本节点 "我"
// console.log(myDiv.childNodes[1]);//获取第二个子元素文本节点 "我爱你woaini" 计算所有子节点对象,包括空节点和文本节点(类数组对象)
//console.log(myDiv.children[1]);只计算有html标签的对象,这里没有
//div.removeChild(index);必须传入一个索引参数,否则报错,如果需要删除所有子元素,则可使用遍历删除所有子元素。
// var myUl=document.getElementById("myUl");//获取ul对象
// console.log(myUl.childNodes.length);//返回:7 获取子节点长度。包括空文本。
// var remove=myUl.removeChild(myUl.childNodes[1]);//返回删除myUll的第几个子节点。childNodes返回的是类数组对象,该对象包括空文本对象。返回的是被删除的对象。这是第一套DOM操作API
// console.log(remove);
// console.log(myUl.childElementCount);//获取非空子节点长度。这里子节点总数为:3,只有3个html标签元素
// console.log(myUl.removeChild(myUl.children[2]));//返回被删除的对象:<li>3</li>,移除下标为2的元素对象。这里使用的第二套DOM操作 API。
// console.log(myUl.childNodes.length);//返回:7 删除后的myUl对象的所有子元素长度。
//!表示相反,+表示转换为Number,"\v":IE表示为字符串"v",非IE表示为一个垂直制表符:可以理解为一个空格。1表示1。 !+"\v1",IE解析为:Number("v1")返回isNaN,!isNaN就是真,其他浏览器返回false
// if (!+"\v1") {
// alert("love");//IE浏览器显示
// }else{
// alert("you");//非IE浏览器显示
// }
//removeNode(deep);这是IE私有实现方法。deep深度,true/false,true深度删除子节点,false只删除本身节点,不删除子节点以及孙子节点。
// var myUl=document.getElementById("myUl");
// var rem=myUl.removeNode(true);//返回被删除的对象(包括子节点和孙子节点),删除myUl对象本身
// console.log(rem.outerHTML);//console.log(rem.tagName);
//body.removeChild(document.getElementById("span"));//移除子节点,只有在IE6-IE8中才会返回一个文档碎片对象,久而久之会引发内存泄露的问题,其他浏览器则不会,因为返回值是null。
// var div=document.createElement("div");//创建div对象
// console.log(div.parentNode);//创建div对象而没有进行装填到DOM树上,获取它的父元素节点时,所有的浏览器都返回null。
//将div对象添加到DOM树上再移除,只在IE6-IE8会返回一个文档碎片对象,可以重复使用该对象,久而久之会存在一个内存溢出的现象。其他浏览器则不会,因为返回值是null。
// document.body.removeChild(document.body.appendChild(div));//添加div后在移除div对象。
// console.log(div.parentNode);//IE6-IE8返回一个Object对象,用户可以操作,时间一久IE6-IE8会出现内存泄露,其他浏览器则不会,因为返回值是null。
//console.log(div.parentNode.nodeType);//直接报错
// //body.innerHTML="";表示删除body标签内的所有子元素以及孙子元素。
// var myUl=document.getElementById("myUl");//获取ul对象
// document.body.innerHTML="";//删除body里面的所有内容。
// console.log(myUl.parentNode);//返回null,获取myUl的父节点。
var myUl2=document.getElementById("myUl2");
myUl2.parentNode.removeChild(myUl2);//获取myUl2的父元素删除myUl2元素对象
//使用removeChild在IE6-IE8中,删除对象以及后代节点,但是该节点是可以访问的,并不是完全删除,但是不在内存中。所以myUl2.innerHTML正常打印。
console.log(myUl2.id+"---"+myUl2.innerHTML);//打印被删除对象的id和内容
var myUl=document.getElementById("myUl");
myUl.parentNode.innerHTML="";//清空对象myUl里面的子节点以及孙子节点
//使用innerHTML在IE6-IE8中,会把对象里面的所有子节点以及孙子节点全部清空,不可再访问。所以下面的myUl.innerTHML是空的,访问不到。
console.log(myUl.id+myUl.innerHTML);//打印被删除对象的id和内容
})
</script>
</head>
<body id="body">
<ul id="myUl">
<li>1<a>1</a></li>
<li>2</li>
<li>3</li>
</ul>
<ul id="myUl2">
<li>1<a>1</a></li>
<li>2</li>
<li>3</li>
</ul>
</body>
转载于:https://www.cnblogs.com/Knowledge-is-infinite/p/10884031.html
javascript---操作节点相关推荐
- 雀雀JavaScript操作节点
JavaScript操作节点 2018年4月22日星期日 节点的属性 previousSibling 属性返回同一树层级中指定节点的前一个节点. 被返回的节点以 Node 对象的形式返回. 注释:如果 ...
- JavaScript的节点操作 —— 增加节点
目录 JavaScript中的节点操作分为:增.删.改.查(获取),四大类型. 我们直接利用案例来学习: HTML布局代码: JavaScript代码实现: 第一步:获取所有要用到的元素对象(可以利用 ...
- javascript中节点操作、节点属性、节点获取、创建节点、删除节点、克隆节点
节点操作 节点操作实际是利用DOM树把节点划分为不同的层次关系,常见父子兄弟级关系 节点属性: 节点一般有三个属性:nodeType节点类型(其中元素节点值为1,属性节点值为2,文本节点值为3).no ...
- Javascript操作DOM常用API总结
文本整理了javascript操作DOM的一些常用的api,根据其作用整理成为创建,修改,查询等多种类型的api,主要用于复习基础知识,加深对原生js的认识. 基本概念 在讲解操作DOM的api之前, ...
- JavaScript操作DOM对象
目录 一.DOM操作 (一).DOM操作分类 (二).节点和节点的关系 (三).访问节点 (四).节点信息 二.操作节点 (一)操作节点的属性 (二).创建和插入节点 (三).删除和替换节点 (四). ...
- 【repost】Javascript操作DOM常用API总结
Javascript操作DOM常用API总结 文本整理了javascript操作DOM的一些常用的api,根据其作用整理成为创建,修改,查询等多种类型的api,主要用于复习基础知识,加深对原生js的认 ...
- javascript操作表格案例讲解
本案例是一个简单表格,通过javascript DOM相关技术,实现对表格的删除更改.案例代码详细的表达了思路分析,适合DOM初学者. <!doctype html> <html l ...
- jQuery对象,jQuery查找标签,层级选择器,属性选择器,表单筛选器,操作节点标签事件...
目录 jQuery jQuery介绍 jQuery的优势 jQuery版本 jQuery内容: jQuery对象 jQuery基础语法 查找标签 基本选择器 层级选择器: 基本筛选器: 属性选择器 表 ...
- JavaScript操作DOM对象 Day05
JavaScript操作DOM对象 0 核心 浏览器网页就是一个Dom树形结构! 获取Dom节点:得到Dom节点 更新:更新Dom节点 添加:添加一个新的节点 删除:删除一个Dom节点 要操作一个Do ...
- JavaScript基础——第三章,JavaScript操作DOM对象
JavaScript操作DOM对象 DOM:Document Object Model (文档对象模型) 节点和节点的关系 访问节点 使用getElement系列方法访问指定节点 根据层次关系访问节点 ...
最新文章
- Linux常用命令及技巧2
- 软件开发有多少种方式
- 实践 Network Policy - 每天5分钟玩转 Docker 容器技术(172)
- 计算机用于尖端科技,【判断题】用演绎法教问句的方法适用于中高级型学生
- JavaWeb_检查用户是否登录的过滤器
- .net core 一个避免跨站请求的中间件
- 2017年个人年终总结
- 买房贷款被拒,该如何补救?
- #define宏定义形式的函数导致的bug
- 「递归」的正确打开方式,看不懂你打我~
- 移动端安卓IOS系统判断,用js判断 iPhone6 iPhone6 plus iphonex?
- 2018-2019-2 20165312《网络攻防技术》Exp7 网络欺诈防范
- 润乾报表 - 细节问题
- WTL学习笔记(5)系统皮肤管理
- java2实用教程 第6版(课后习题总结)
- 关于黑莓8700刷ROM4.5后使用五笔输入法出现问号的处理
- 任务态fMRI的实验设计方法及注意事项有哪些?—重温经典文章的点滴思考
- amr文件怎么转换成mp3
- Animation.css动画效果属性
- Android Studio 导入图片标红错误
热门文章
- 【计算机问题】 火狐浏览器不能下载东西
- 如何交接(接手)一个前端项目
- 山东大学为“学伴”道歉了,但很多质疑仍未回应
- windows10 环境变量设置
- iphone android短信中心号码,iPhone发不了短信(设置短信中心号码)的解决办法
- 重量级开发环境:Homestead
- 如何在html网页中插入视频(以及让视频自动播放的问题)
- 【Python计量】独立混合横截面数据与邹氏检验
- VS2019 C++ 编译项目错误:无法打开包括文件:“graphics.h”: No such file or directory
- 医学分割论文:nnU-Net: Self-adapting Framework for U-Net-Based Medical Image Segmentation