更新和删除DOM节点 

<body>
 <div id="id1">

 </div>

 <script>
     var id1 = document.getElementById('id1');
     id1.innerText = 'abc'
 </script>

 <!--操作文本
    id1.innerText = '456' 修改文本的值如下在控制台进行操作！
      id1.innerText = '123'
        "123"
      id1.innerText = '456'
        "456"
      id1.innerHTML ='<strong>123</strong>'  可以解析HTML文本！
        "<strong>123</strong>"----会被转译为粗体123
      id1.innerText ='<strong>123</strong>'
         "<strong>123</strong>"----不会被转译还是显示此文字
-->

<!--操作JS
      以下是控制台操作
      id1.style.color='yellow'  //属性使用   字符串  包裹
      id1.style.fontSize = '200px'//  — 下滑线 转 驼峰命名问题
      id1.style.padding = '2em'

      在控制台操作搜索标签的修改页边距的具体操作
      document.getElementById('su')
         <input type=​"submit" id=​"su" value=​"百度一下" class=​"bg s_btn">​
      var ss = document.getElementById('su');
          undefined
      ss.style.padding = '10px'
         "10px"
-->
<!--删除节点
  删除节点的步骤：先获取父节点，在通过父节点删除自己-------相当于我要把它删除，我首先要找他的父亲再把他干掉
  <div id="father">
      <h1>标题一</h1>
      <p id="p1">p1</p>
      <p class="p2">p2</p>
  </div>
  <script>
    var self = document.getElementById('p1');
    var father = p1.parentElement    ----相当于var father 等于 p1它自己的父亲元素
    father.removeChild(self)
  </script>
   控制台操作如下：
   father.removeChild(self)
   <p id=​"p1">​p1​</p>​

   //删除是一个动态的过程：    如下控制台
    father.removeChild(father.children[0])
    father.removeChild(father.children[1])
    father.removeChild(father.children[2])
    注意：删除多个节点的时候，children是在时刻变化的，删除节点的时候一定要注意
  -->



</body>
posted @ 2022-05-31 21:33  LiLime  阅读(159)  评论(0)    收藏  举报