操作DOM节点

不死鸟107
114 阅读5分钟

DOM节点

分类

  • 元素
  • 文本
  • 属性节点

区别

  • 元素节点 => 通过 getElement.... 类似的方法获取到的
  • 文本节点 => 通过 innerText 获取到的就是文本节点
  • 属性节点 => 通过 getAttribute 获取到就是属性节点
    <div class="box" data-id="100" num="200">
        <div class="top"></div>
        <div class="text">
            <h1 class="title">这是一个标题</h1>
            <p class="content"></p>
        </div>
    </div>

// 获取元素节点
 var box = document.querySelector('.box')
 console.log(box.childNodes)
 //   NodeList(5) [text, div.top, text, div.text, text]  
//   box.childNodes: 获取某一节点下, 所有的 子级节点

获取子级节点

<div class="box" data-id="100" num="200">
        <p class="content1">
            <span></span>
        </p>
        <p class="content2">
            <i></i>
        </p>
    </div>

// 获取元素节点
var box = document.querySelector('.box')

// box.childNodes: 获取某一节点下, 所有的 子级节点
console.log(box.childNodes)
// NodeList(3) [text, p.content, text]
// 0 => text =>    从 div 的开始标签后到 p 标签的开始标签前的换行和空格, 文本节点
// 1 => p.content => p 标签, 元素节点
// 2 => text =>    从 p 的结束标签后到 div 的结束标签前的换行和空格, 文本节点

// 获取子级元素节点
console.log(box.children)
// HTMLCollection [p.content]  //获取到的还是一个伪数组


//  获取子级第一个节点
console.log(box.firstChild)
// #text
// 子级的第一个节点, 是一个文本节点, 所以此处打印的是 #text

//  获取子级最后一个节点
 console.log(box.lastChild)
 //#text

//  获取子级第一个元素节点
console.log(box.firstElementChild)
/*  
    <p class="content1">
        <span></span>
    </p>
*/

//  获取子级最后一个元素节点
console.log(box.lastElementChild)
/*  <p class="content2">
        <i></i>
    </p>
*/

获取兄弟节点

    <ul class="box" num="100">
        <li id="a">1</li>
        <li id="b">2</li>
        <li id="c">3</li>
    </ul>

// 获取兄弟节点
    var box = document.querySelector('.box')
    var li_b = document.getElementById('b')

    // 获取某一节点的 下一个兄弟节点
    console.log(li_b.nextSibling)

    // 获取某一个节点的 下一个兄弟元素节点
    console.log(li_b.nextElementSibling)

    // 上一个兄弟节点
    console.log(li_b.previousSibling)

    // 上一个兄弟元素节点
    console.log(li_b.previousElementSibling)

    // 获取某一节点的 父节点
    console.log(li_b.parentNode)

获取节点属性

  • 获取元素的属性节点; attributes
    1. 获取到的是一个伪数组, 所以是有下标和length的
    <ul name="我是ul的属性" class="box" text="XXXX">
        <li>我是li的文本</li>
    </ul>

   var ulEle = document.querySelector('.box')
//    获取元素


// 获取 ul 的属性节点
console.log(ulEle.attributes[0])//name="我是ul的属性"
console.log(ulEle.attributes[1])// class="box"
console.log(ulEle.attributes[2])//text="XXXX"

// 获取 ul 内的第一个属性节点
var attrNode = ulEle.attributes[0]
        console.log(attrNode);

        // 获取 ul 内的一个文本节点
var textNode = ulEle.firstChild
        console.log(textNode);

获取节点类型

nodeType

  • 获取节点类型, 用数字表示(一会打印的内容是数字)
    1. console.log('元素节点', eleNode.nodeType) // 1
    2. console.log('属性节点', attrNode.nodeType) // 2
    3. console.log('文本节点', textNode.nodeType) // 3

nodeName

  • 获取节点名称
  1. 元素节点: 大写的标签名
    console.log('元素节点', eleNode.nodeName)   // LI
  1. 属性节点: 这个属性对应的属性
    console.log('属性节点', attrNode.nodeName)  // name
  1. 文本节点: #text
    console.log('文本节点', textNode.nodeName)  // #text

nodeValue

  • 获取节点的值
  1. 元素节点: 元素节点没有 nodeValue 所以值为 null
    console.log('元素节点', eleNode.nodeValue)   // null
  1. 属性节点: 这个属性对应的属性值
    console.log('属性节点', attrNode.nodeValue)  // 我是ul的属性
  1. 文本节点: 就是这个文本内容
    console.log('文本节点', textNode.nodeValue)  // 一个换行和一堆空格, 但是看不到

操作节点

  • 操作一个 DOM 节点
    1. 创建一个 DOM 节点 (此时跟页面没有任何关系)
    2. 向页面中加入一个 DOM 节点 (此时跟页面产生了关联)
<ul class="box">
        <li>1</li>
        <li>2</li>
        <li>3</li>
    </ul>

// 0. 获取标签
        var box = document.getElementsByClassName('box')[0]

// 1. 创建一个 DOM 节点
        var newLi = document.createElement('li')    
        // 创建一个 li 标签, 存放到 newLi 这个变量中, 和页面没有关系
        var newDiv = document.createElement('div')    
        // 创建一个 li 标签, 存放到 newLi 这个变量中, 和页面没有关系
        console.log(newLi)
        console.log(newDiv)
// 1.1 创建一个 文本节点
        var newText = document.createTextNode('我是一个文本节点')

向页面中加入一个节点

  • appendChild 向一个元素节点末尾, 追加一个子节点
    1. 语法: 父节点.appendChild(要追加的子节点)
  • insertBefore 向父节点的指定位置添加一个 DOM 节点
    1. 语法: 父节点.inserBefore(要插入的节点, 插入在那个节点前)

注意点: 第二个参数必须书写, 但是如果传递的是 null, 则表示追加到父元素的末尾

    // 2.1.1 向 刚刚创建出来的 li 标签内添加一个 文本节点
        newLi.appendChild(newText)
        newDiv.innerText = '我是手动添加给 DIV 的文本'

        // // 2.1.2 将刚才的 li 标签追加到 box 的末尾
        // box.appendChild(newLi)
        // // 2.1.3 将 div 标签追加到 box 的末尾
        // box.appendChild(newDiv)


        // 2.2 insertBefore
        box.insertBefore(newLi, box.firstElementChild)
        // box.insertBefore(newLi, null)

    <div>
        <p>我是一个 P 标签</p>
    </div>
  • 删除页面中的某一个节点
  1. removeChild
box.removeChild(pEle)
  1. remove
    • 语法: 要删除的节点.remove()
 pEle.remove()
  • 修改页面中的某一个节点
    1. 修改页面中的某一个节点
      • 修改页面中的某一个节点
      • 语法: 父节点.replaceChild(新节点, 旧节点)
        var spanEle = document.createElement('span')
        spanEle.innerText = '我是通过 JS 创建出来的 span 标签'
        box.replaceChild(spanEle, pEle)
  • 克隆页面中的某一个节点
    • 克隆 注意: 页面中的 DOM 节点, 只会存在一个, 如果你需要这个标签多次出现, 只能通过 克隆
    1. 语法:节点.cloneNode(参数)
      • 参数是一个布尔值
        • 默认是 false, 表示不克隆后代节点
        • 传递的是 true, 表示克隆所有后代节点
      • 有一个返回值
        • 返回的是克隆出来的一个 DOM 节点
var oUl = document.querySelector('ul')
        var oLi = document.querySelector('li')

        // console.log(oUl)
        // console.log(oLi)

        // oUl.appendChild(oLi)

        var cloneLi = oLi.cloneNode(true)
        console.log(cloneLi)
        oUl.appendChild(cloneLi)

获取元素的非行内样式

  • window.getComputedStyle(要查询样式的DOM节点).要查询的CSS属性名
    1. 返回值就是这个 CSS 属性对应的属性值
  • 注意点:
    1. 这个方法能够获取到非行内的样式, 也能获取到行内的
    2. 这个方法是只读的, 也就是说我们能通过他获取到CSS样式, 但是不能修改, 修改的话还是需要使用 元素.style
    • 补充: 在 IE 浏览器中需要使用 currentStyle
      • 语法: 元素.currentStyle.要查询的 CSS 属性
<div style="width: 100px;"></div> 

var box = document.querySelector('div')

        console.log(window.getComputedStyle(box).width)
        console.log(window.getComputedStyle(box).height)

        // 不要这样书写, 会有报错
        // window.getComputedStyle(box).height = '500px'
avatar
文章
阅读
粉丝