innerHTML与元素对象的关系innerHTML 获取节点内容标签也会被获取也可以赋值改变内容 innerHTM

<body>

  <div class="wrap">

    <p>猜猜<span>我</span>是谁</p>

  </div>


  <script>

    //获取对象

    var oWrap = document.querySelector('.wrap')

    var oP = document.querySelector('p')

    //把标签实例化为元素对象 oP (魂 本体)

  


    //改变样式

    oP.style.color = 'red'

  

    //innerHTML 获取节点内容 标签也会被获取 也可以赋值改变内容

    console.log( oWrap.innerHTML)//拿到的是标签内部标签，文本字符串表现(皮)

    // oWrap.innerHTML = 'hah'

    // oWrap.innerHTML = oP.innerHTML + '我自己'

    // oWrap.innerHTML+= '我自己'

  

    oWrap.innerHTML=oWrap.innerHTML +  ''//什么都不加 还会是自己吗?

//***此处  魂没了 变成了皮+'' 还会正常显示 但魂还是被覆盖了

//'<p>猜猜<span>我</span>是谁</p> + '''

    console.log(oWrap.innerHTML)

  

    // oP.style.color = 'blue' //失效 op对应的p标签消失了

    //此时为红色还是蓝色

    //答案:蓝色  因为blue 没有生效

  


    //如何让blue生效 重新获取一边P

    //对新的p标签获取他的元素对象赋值给oP

    oP = document.querySelector('p')

    oP.style.color = 'blue'

  </script>