JS的操作DOM节点

* 操作DOM节点

<div class="box"><p>我是通过html手写出来的p标签</p></div>

    // 0.获取元素
    var myDiv = document.querySelector('div')
    var myDiv = document.getElementsByClassName('box')[0]
    var oP = document.querySelector('p')

* 常规意义上'增删改查'
     * 在向页面增加一个节点，首先应该先有一个节点

* 1.在JS中创建一个节点

• 语法:document.clearElement('要创建的标签名')

    // 1.1 在JS中创建一个元素节点
    var oDiv = document.createElement('div')
    console.log(oDiv)
    var oSpan = document.createElement('span')
    console.log(oSpan)
    // 1.2 在JS中创建一个文本节点
    var oText = document.createTextNode('我是通过JS 创建出来的文本节点')
    console.log(oText)
    //1.3 将刚才创建的文本节点添加到元素节点内 元素.appendChild(要添加的节点)
    oDiv.appendChild(oText)
    oSpan.innerText = '我是通过innerText直接赋值的字符串'

* 2.向页面增加一个节点

• 语法1：元素.appendChild(要添加的节点)
  • 作用：向元素的末尾追加一个节点

    myDiv.appendChild(oDiv)
    myDiv.appendChild(oSpan)

• 语法2：元素.insertBefore(要插入的节点, 插入到哪个节点的前面)
  • 注意：两个参数都是必填项
    • 第二个参数传递正常节点时，代表插入到这个节点的前面
    • 第二个参数传递的是null时，表示插入到"元素"的末尾

    myDiv.insertBefore(oDiv, oP) 
    //将我们通过JS创建的div标签,插入到页面的Р标签前边
    myDiv.insertBefore(oSpan, null) 
    //第二个参数传递null代表插入到‘元素’的末尾

* 3.删除页面某一个节点

• 语法1：父节点.removeChild(要删除的子节点)

    box.removeChild(oP)

• 语法2: 节点.remove()

    box.remove()

<div class="box"><p>我是第一个p标签</p><p>我是第二个p标签</p></div>

    // 0.获取节点
    var box = document.querySelector('.box')
    var oP = document.querySelector('p') //满足条件的第一个p标签

* 4.修改页面的某一个节点

• 语法：父节点.replaceChild(新节点, 旧节点/要被修改的节点)

    var oSpan = document.createElement('span') //创建一个span标签
    oSpan.innerHTML = '我是通过JS创建出来的span标签' //给span标签添加文字
    box.replaceChild(oSpan, oP) //用刚刚创建出来的span标签,替换原本的p标签

* 5.获取页面的某一个节点

 * 之前的获取元素的方法

* 6.克隆一个节点 (把一个节点复制出一个一模一样的)

• 语法:节点.cloneNode(参数)
  • 参数:
    • 默认是false，表示不克隆后代节点
    • 选填是true，表示克隆后代节点

    // var cloneP = oP.cloneNode() 
    //克隆出来一个和 oP这个节点一模一样的新节点 不包含后代节点
    var cloneP = oP.cloneNode(true) 
    //克隆出来一个和 oP这个节点一摸一样的新节点 包含后代节点
    console.log(cloneP)
/**
 * box.appendChild(oP)
 * 错误理解:将oP这个节点，添加到 box的末尾，然后页面就有3个Р标签了
 * 正确理解:将oP这个节点，添加到box的末尾
 *     因为DoM节点在页面中只会具有一个核心
 *     所以这一步相当于将原本排列在box内部第一个的p标签,移动到了box内部的最后一个
 * */ 

* 获取非行内样式(了解)

 * 语法:window.getComputedStyle(元素).要查询的cSS属性名
 * 
 * IE的语法:元素.currentStyle.要查询的css属性名(了解)