前言：
现时同学们对“节点操作有几种”大概比较注重，兄弟们都想要分析一些“节点操作有几种”的相关文章。那么小编在网上网罗了一些对于“节点操作有几种””的相关资讯，希望我们能喜欢，大家一起来学习一下吧！nextElementSibling
●作用：nextElementSibling：获取某一个节点的 下一个元素节点
●语法：元素对象.nextElementSibling
<body> <ul> <li id="a">hello</li> <li id="b">world</li> <li id="c">!!!</li> </ul> <script> // 这个 oLi 获取的是页面中的 li 元素，就是一个元素节点 var oLi = document.querySelector('#b') console.log(oLi.nextElementSibling) // <li id="c">!!!</li> </script></body>●只获取一个节点，不在是伪数组
●获取的是 id="b" 这个 li 的下一个兄弟元素节点
●因为 id="b" 的下一个兄弟元素节点就是 id="c" 的 li，是一个元素节点
previousElementSibling
●作用：previousElementSibling：获取某一个节点的 上一个元素节点
●语法：元素对象.previousElementSibling
<body> <ul> <li id="a">hello</li> <li id="b">world</li> <li id="c">!!!</li> </ul> <script> // 这个 oLi 获取的是页面中的 li 元素，就是一个元素节点 var oLi = document.querySelector('#b') console.log(oLi.previousElementSibling) // <li id="a">hello</li> </script></body>●只获取一个节点，不在是伪数组
●获取的是 id="b" 这个 li 的上一个兄弟元素节点
●因为 id="b" 的上一个兄弟元素节点就是 id="a" 的 li，是一个元素节点
parentNode
●作用：parentNode：获取某一个节点的 父节点
●语法：元素对象.parentNode
<body> <ul> <li id="a">hello</li> <li id="b">world</li> <li id="c">!!!</li> </ul> <script> // 这个 oLi 获取的是页面中的 li 元素，就是一个元素节点 var oLi = document.querySelector('#b') console.log(oLi.parentNode) // <ul>...</ul> </script></body>●只获取一个节点，不在是伪数组
●获取的是当前这个 li 的父元素节点
●因为这个 li 的父亲就是 ul，所以获取到的就是 ul，是一个元素节点
parentElement
●作用：parentElement获取某一节点的父元素节点
●语法：元素对象.parentElement
<body> <ul> <li id="a">hello</li> <li id="b">world</li> <li id="c">!!!</li> </ul> <script> // 这个 oLi 获取的是页面中的 li 元素，就是一个元素节点 var oLi = document.querySelector('#b') console.log(oLi.parentNode) // <ul>...</ul> </script></body>●只获取一个节点，不在是伪数组
●获取的是当前这个 li 的父元素节点
●因为这个 li 的父亲就是 ul，所以获取到的就是 ul，是一个元素节点
attributes
●作用：attributes：获取某一个 元素节点 的所有 属性节点
<body> <ul> <li id="a" a="100" test="test">hello</li> </ul> <script> // 这个 oLi 获取的是页面中的 li 元素，就是一个元素节点 var oLi = document.querySelector('#a') console.log(oLi.attributes) /* NamedNodeMap {0: id, 1: a, 2: test, id: id, a: a, test: test, length: 3} 0: id 1: a 2: test length: 3 a: a id: id test: test __proto__: NamedNodeMap */ </script></body>●获取的是一组数据，是该元素的所有属性，也是一个伪数组
●这个 li 有三个属性，id / a / test 三个，所以就获取到了这三个
节点属性
●在文档对象模型 (DOM) 中，每个节点都是一个对象。DOM 节点有三个重要的属性
○nodeType
○nodeName
○nodeValue
●我们已经知道节点会分成很多种，而且我们也能获取到各种不同的节点
●接下来我们就来聊一些各种节点之间属性的区别
●我们先准备一段代码
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title></head><body> <div class="box"> hello world <!-- 你好 世界 --> </div> <script> // 0. 拿到四种节点 var ele = document.querySelector('div') var attr = ele.attributes[0] var text = ele.firstChild var comment = ele.childNodes[1] console.log('元素节点 : ', ele) console.log('属性节点 : ', attr) console.log('文本节点 : ', text) console.log('注释节点 : ', comment) </script></body></html>nodeType●nodeType：获取节点的节点类型，用数字表示
console.log('元素节点 : ', ele.nodeType) // 1console.log('属性节点 : ', attr.nodeType) // 2 console.log('文本节点 : ', text.nodeType) // 3console.log('注释节点 : ', comment.nodeType) // 8●nodeType === 1 就表示该节点是一个 元素节点
●nodeType === 2 就表示该节点是一个 属性节点
●nodeType === 3 就表示该节点是一个 文本节点
●nodeType === 8 就表示该节点是一个 注释节点
nodeName
●nodeName：获取节点的节点名称
console.log('元素节点 : ', ele.nodeName) // DIVconsole.log('属性节点 : ', attr.nodeName) // classconsole.log('文本节点 : ', text.nodeName) // #textconsole.log('注释节点 : ', comment.nodeName) // #comment●元素节点的 nodeName 就是 大写标签名
●属性节点的 nodeName 就是 属性名
●文本节点的 nodeName 都是 #text
●文本节点的 nodeName 都是 #comment
nodeValue
●nodeValue： 获取节点的值
console.log('元素节点 : ', ele.nodeValue) // null console.log('属性节点 : ', attr.nodeValue) // boxconsole.log('文本节点 : ', text.nodeValue) // hello worldconsole.log('注释节点 : ', comment.nodeValue) // 你好 世界●元素节点没有 nodeValue返回的是null
●属性节点的 nodeValue 就是 属性值
●文本节点的 nodeValue 就是 文本内容
●文本节点的 nodeValue 就是 注释内容
操作 DOM 节点
●我们所说的操作无非就是 增删改查（CRUD）
●创建一个节点（因为向页面中增加之前，我们需要先创建一个节点出来）
●向页面中增加一个节点
●删除页面中的某一个节点
●修改页面中的某一个节点
●获取页面中的某一个节点
创建一个节点
●createElement：用于创建一个元素节点
●语法：document.createElement('要创建的标签')
○要创建的标签可以是W3C规范内的标签，也可以的自定义标签
// 创建一个 div 元素节点var oDiv = document.createElement('div')console.log(oDiv) // <div></div>//创建一个自定义元素节点var newName = document.createElement('hello')console.log(newName); //<hello></hello>●创建出来的就是一个可以使用的 div 元素
●createTextNode：用于创建一个文本节点
●语法：document.createTextNode('要写的文本内容')
●返回值：就是一个文本节点, 不是字符串
// 创建一个文本节点var oText = document.createTextNode('我是一个文本')console.log(oText) // "我是一个文本"console.log(typeof oText);//object插入一个节点●appendChild：是向一个元素节点的末尾追加一个节点
●语法： 父节点.appendChild(要插入的子节点)
// 创建一个 div 元素节点var oDiv = document.createElement('div')var oText = document.createTextNode('我是一个文本')// 向 div 中追加一个文本节点oDiv.appendChild(oText)console.log(oDiv) // <div>我是一个文本</div>●insertBefore：向某一个节点前插入一个节点
●语法： 父节点.insertBefore(要插入的节点，插入在哪一个节点的前面)
<body> <div> <p>我是一个 p 标签</p> </div> <script> var oDiv = document.querySelector('div') var oP = oDiv.querySelector('p') // 创建一个元素节点 var oSpan = document.createElement('span') // 将这个元素节点添加到 div 下的 p 的前面 oDiv.insertBefore(oSpan, oP) console.log(oDiv) /* <div> <span></span> <p>我是一个 p 标签</p> </div> */ </script></body>删除一个节点removeChild
●removeChild：移除某一节点下的某一个节点
●语法：父节点.removeChild(要移除的子节点)
<body> <div> <p>我是一个 p 标签</p> </div> <script> var oDiv = document.querySelector('div') var oP = oDiv.querySelector('p') // 移除 div 下面的 p 标签 oDiv.removeChild(oP) console.log(oDiv) // <div></div> </script></body>remove●remove：移除某个节点，那个节点要移除直接调用这个方法
●语法：元素节点.remove('要移除的节点')
<body> <body> <div> <p>我是一个 p 标签</p> </div> <script> var oDiv = document.querySelector('div') var oP = oDiv.querySelector('p') // 移除 div 下面的 p 标签 var deOp = oP.remove() console.log(oDiv) // <div></div> </script> </body>替换一个节点●replaceChild：将页面中的某一个节点替换掉
●语法： 父节点.replaceChild(新节点，旧节点)
<body> <div> <p>我是一个 p 标签</p> </div> <script> var oDiv = document.querySelector('div') var oP = oDiv.querySelector('p') // 创建一个 span 节点 var oSpan = document.createElement('span') // 向 span 元素中加点文字 oSpan.innerHTML = '我是新创建的 span 标签' // 用创建的 span 标签替换原先 div 下的 p 标签 oDiv.replaceChild(oSpan, oP) console.log(oDiv) /* <div> <span>我是新创建的 span 标签</span> </div> */ </script></body>克隆一个节点●cloneNode()把已经存在的节点一模一样的复制一份
●语法：节点对象.cloneNode(参数)
○参数是一个布尔值true或者false,不写就是默认的参数是false
○false代表只克隆本身的标签，标签里面的所有节点不可隆，也就的不可隆后代节点
○true代表全部可隆，本身节点以及所有的后代节点
●返回值：就的克隆好的一个新节点
<body> <div class="box" id="box"> <span>div 内部的 span 标签</span> </div> <script> // 获取元素 var div = document.querySelector('div') // 不带参数 不克隆后代节点, 只克隆 div 本身 var cloneDiv = div.cloneNode() // 带参数 连带后代节点一起克隆 var cloneDiv1 = div.cloneNode(true) console.log(div) console.log(cloneDiv) console.log(cloneDiv1); </script></body>消息队列RabbitMQ安装配置详解
前端路由+原生JS实现SPA
Linux安装详细步骤（Mac版本）
Synchronized中使用Integer带来的问题解决方案
标签： #节点操作有几种
