javascript_basics
/
12.DOM结构操作.html

<!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>dom结构操作</title>
</head>
<body>
  <div id="div1">
123123
  </div>
  <p id="p2">p22222</p>
  <script>
    /*
      1、新增节点
      2、获取父元素
      3、获取子元素
      4、删除节点
    */

   //新增节点
   var div1 = document.getElementById('div1')
   //创建元素
   var p1 = document.createElement('p')
   p1.innerHTML = 'this is p1'
   //将创建的元素添加到div1
   div1.appendChild(p1)

   //移动已有节点
   var p2 = document.getElementById('p2')
   div1.appendChild(p2)


   //获取父元素
   var div1 = document.getElementById('div1')
   var parent = div1.parentElement
   console.log(parent) //body

   //获取子元素
   var div11 = document.getElementById('div1')
   var bodyChile = div11.childNodes//获取子元素
   console.log(bodyChile) //NodeList(3) [text, p, p#p2]


   //删除子元素
   div11.removeChild(bodyChile[0])
  </script>
</body>
</html>