快捷键：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>

javascript---操作节点的更多相关文章

  1. javascript 操作节点的属性

    使用层次关系访问节点 parentNode:返回节点的父节点 childNodes:返回子节点集合,childNodes[i] firstChild:返回节点的第一个子节点,最普遍的用法是访问该元素的 ...

  2. 使用JavaScript操作DOM节点元素的常用方法(创建/删除/替换/复制等)

    getElementById(id)这是通过id来访问某一元素,最常用的之一,例:<html><body><div id="myid">test ...

  3. JavaScript的DOM操作(节点操作)

    创建节点createElement()var node = document.createElement(“div”);没什么可说的,创建一个元素节点,但注意,这个节点不会被自动添加到文档(docum ...

  4. JavaScript DOM–节点操作

    节点 节点至少拥有nodeType(节点类型).nodeName(节点名称)和nodeValue(节点值)这三个基本属性. 元素节点 nodeType  为1 属性节点 nodeType  为2 文本 ...

  5. JavaScript操作XML

    JavaScript操作XML (一) JavaScript操作XML是通过XML DOM来完成的.那么什么是XML DOM呢?XML DOM 是: 用于 XML 的标准对象模型 用于 XML 的标准 ...

  6. 用javascript操作xml

    用javascript操作xml 可以使用标准DOM操作. IE创建XML MSXML2.0DOMDocument function createXMLDOM(){ var version = [ ' ...

  7. JavaScript 操作 DOM 常用 API 总结

    文本整理了javascript操作DOM的一些常用的api,根据其作用整理成为创建,修改,查询等多种类型的api,主要用于复习基础知识,加深对原生js的认识. 基本概念 在讲解操作DOM的api之前, ...

  8. 使用原生 JavaScript 操作 DOM

    原文:https://www.sitepoint.com/dom-manipulation-vanilla-javascript-no-jquery/ 微软官方放弃了 IE10-,所以现在可以放心使用 ...

  9. Python javascript操作DOM

    文档对象模型(Document Object Model,DOM)是一种用于HTML和XML文档的编程接口.它给文档提供了一种结构化的表示方法,可以改变文档的内容和呈现方式.我们最为关心的是,DOM把 ...

  10. javaScript操作DOM对象（看三遍，敲三遍，写三遍！ 不会你找我）！！

    DOM是Document Object Model的缩写,即文档对象模型,是基于文档编程的一套API 使用javaScript操作DOM对象通常分为三类:1.DOM CORE        2.HTM ...

随机推荐

  1. gdb 常用命令总结（精优）

    格式说明: [xxx]:可选参数,即可以指定可以不指定,实际输入的内容是 xxx <xxx>:占位参数,即必须指定的参数,实际输入的内容是 xxx gdb 常用命令: gdb [file] ...

  2. C++:标准模板库map

    一:介绍 map是STL的关联式容器,以key-value的形式存储,以红黑树(平衡二叉查找树)作为底层数据结构,对数据有自动排序的功能. 命名空间为std,所属头文件<map> 注意:不 ...

  3. 笔试2019-GRANDSTREAM

    程序阅读 随机,因为局部变量在栈中,值随机. 上面那个题在x86上都是12因为x86是大端模式 但是在ARM架构的处理器,因为它们是小端模式,则输出x078 判断回文 int hui(const ch ...

  4. python实现文件搜索工具（简易版）

    在python学习过程中有一次需要进行GUI 的绘制, 而在python中有自带的库tkinter可以用来简单的GUI编写,于是转而学习tkinter库的使用. 学以致用,现在试着编写一个简单的磁文件 ...

  5. scratch少儿编程第一季——04、想要做到有的放矢，瞄准方向很重要

    各位小伙伴大家好: 上期我们学习了动作模块的前面三个指令,今天我们继续学习下面的5个指令. 首先来看第一个(控制方向): 面向90方向默认就是屏幕的右边. 点击白色文本框上面的▼可以打开下拉菜单. 大 ...

  6. Vue解决项目白屏

    第一步:  vue-cli项目根目录下面新建Vue.config.js文件  proxy反向代理    module.exports = {   devServer: {     proxy: {   ...

  7. Codeforces 1249 D2. Too Many Segments (hard version)

    传送门 贪心 对于第一个不合法的位置,我们显然要通过删除几个覆盖了它的区间来使这个位置合法 显然删右端点更靠右的区间是更优的,所以就考虑优先删右端点靠右的,然后再考虑下一个不合法位置 用一个 $set ...

  8. sql注入测试(3)---现象分析

    那为什么出现以上问题呢?这是程序代码层控制不当导致的.如果web前端对输入数据控制严格,会对数据库进行操作的字符串,在客户端做敏感字符转义处理,或者在操作数据库的dao层,使用动态参数的sql,不使用 ...

  9. C#如何调用C++(基础篇)

    闲暇之余,记一下笔记!记录一下c#如何调用C++的动态库(dll). 步骤: 一.创建一个C++类,例如: AddOperate.h extern _declspec(dllexport) int S ...

  10. Asp.net core中间件实现原理及用法解说

    简述asp.net core中间件的实现思路 原文地址:https://www.cnblogs.com/shengyu-kmust/p/11583974.html 一次http请求的过程,就是对一个R ...