龙空技术网

JavaScript全解析——DOM节点操作

陆荣涛 145

前言:

今天姐妹们对“js获取节点值”大体比较关注,小伙伴们都需要了解一些“js获取节点值”的相关文章。那么小编同时在网摘上网罗了一些有关“js获取节点值””的相关文章,希望咱们能喜欢,姐妹们一起来了解一下吧!

●DOM 树就是我们 html 结构中一个一个的节点构成的

●不光我们的标签是一个节点,我们写的文本内容也是一个节点,注释,包括空格都是节点

DOM节点

●节点:页面的所有组成部分成为节点

●注意:标签是节点,但是节点并不一定是标签

●DOM 的节点我们一般分为常用的三大类 元素节点 / 文本节点 / 属性节点

●分类,比如我们在获取元素的时候,通过各种方法获取到的我们叫做元素节点(标签节点)

●比如我们标签里面写的文字,那么就是文本节点

●写在每一个标签上的属性,就是属性节点

元素节点

●我们通过 getElementBy... 获取到的都是元素节点

属性节点

●我们通过 getAttribute 获取的就是元素的属性节点

文本节点

●我们通过 innerText 获取到的就是元素的文本节点

获取节点

childNodes

●作用:childNodes:获取某一个节点下 所有的子一级节点

●语法:元素对象.childNodes

<body>  <div>    <p>hello</p>  </div>    <script>    // 这个 oDiv 获取的是页面中的 div 元素,就是一个元素节点      var oDiv = document.querySelector('div')        console.log(oDiv.childNodes)     /*        NodeList(3) [text, p, text]      0: text      1: p      2: text      length: 3      __proto__: NodeList    */  </script></body>

●我们会发现,拿到以后是一个伪数组,里面有三个节点

●一个 text:从

一直到

中间有一个换行和一堆空格,这个是第一个节点,是一个文本节点

●一个 p:这个 p 标签就是第二个节点,这个是一个元素节点

●一个 text:从

一直到

中间有一个换行和一堆空格,这个是第三个节点,是一个文本节点

●这个时候就能看到我们有不同的节点类型了

children

●作用:children :获取某一节点下所有的子一级 元素节点

●语法:元素对象.children

<body>  <div>    <p>hello</p>  </div>    <script>    // 这个 oDiv 获取的是页面中的 div 元素,就是一个元素节点      var oDiv = document.querySelector('div')        console.log(oDiv.children)     /*        HTMLCollection [p]      0: p      length: 1      __proto__: HTMLCollection    */  </script></body>

●我们发现只有一个节点了,因为 children 只要元素节点

●div 下面又只有一个元素节点,就是 p

●所以就只有一个,虽然只有一个,但是也是一个 伪数组

firstChild

●作用:firstChild:获取某一节点下子一级的 第一个节点

●语法:元素对象.firstChild

<body>  <div>    <p>hello</p>  </div>    <script>    // 这个 oDiv 获取的是页面中的 div 元素,就是一个元素节点      var oDiv = document.querySelector('div')        console.log(oDiv.firstChild) // #text   </script></body>

●这个是只获取一个节点,不再是伪数组了

●获取的是第一个

●第一个就是

一直到

的那个换行和空格,是个文本节点

lastChild

●作用:lastChild:获取某一节点下子一级的 最后一个节点

●语法:元素对象.lastChild

<body>  <div>    <p>hello</p>  </div>    <script>    // 这个 oDiv 获取的是页面中的 div 元素,就是一个元素节点      var oDiv = document.querySelector('div')        console.log(oDiv.lastChild) // #text   </script></body>

●只获取一个节点,不再是伪数组

●获取的是最后一个

●最后一个就是

一直到

之间的换行和空格,是个文本节点

firstElementChild

●作用:firstElementChild:获取某一节点下子一级 第一个元素节点

●语法:元素对象.firstElementChild

<body>  <div>    <p>hello</p>  </div>    <script>    // 这个 oDiv 获取的是页面中的 div 元素,就是一个元素节点      var oDiv = document.querySelector('div')        console.log(oDiv.firstElementChild) // <p>hello</p>  </script></body>

●只获取一个节点,不在是伪数组

●获取的是第一个 元素节点

●第一个元素节点就是 p 标签,是一个元素节点

lastElementChild

●作用:lastElementChild:获取某一节点下子一级 最后一个元素节点

●语法:元素对象.lastElementChild

<body>  <div>    <p>hello</p>    <p>world</p>  </div>    <script>    // 这个 oDiv 获取的是页面中的 div 元素,就是一个元素节点      var oDiv = document.querySelector('div')        console.log(oDiv.lastElementChild) // <p>world</p>  </script></body>

●只获取一个节点,不在是伪数组

●获取的是最后一个 元素节点

●最后一个元素节点是

world

,是一个元素节点

nextSibling

●作用:nextSibling:获取某一个节点的 下一个兄弟节点

●语法:元素对象.nextSibling

<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.nextSibling) // #text  </script></body>

●只获取一个节点,不在是伪数组

●获取的是 id="b" 这个 li 的下一个兄弟节点

●因为 id="b" 的下一个节点,是两个 li 标签之间的换行和空格,所以是一个文本节点

previousSibling

●作用:previousSibling:获取某一个节点的 上一个兄弟节点

●语法:元素对象.previousSibling

<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.previousSibling) // #text  </script></body>

●只获取一个节点,不在是伪数组

●获取的是 id="b" 这个 li 的上一个兄弟节点

●因为 id="b" 的上一个节点,是两个 li 标签之间的换行和空格,所以是一个文本节点

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>

标签: #js获取节点值