js查找元素的亲戚节点 副节点 子节点 兄弟节点

正文

function getChildren(){
  //childNodes 节点有三种：文本节点、html节点、注释
  var arr = document.getElementById("d1").childNodes;
  alert(arr.length);
  for(var i=0;i < arr.length;i++){
    alert(arr[i]);
  }
}

function getChildren2(){
  //children html节点
  var arr = document.getElementById("d1").children;
  alert(arr.length);
  for(var i=0;i < arr.length;i++){
    alert(arr[i]);
  }
}

function getParent(){
  var parent = document.getElementById("d1").parentNode;
  alert(parent.innerHTML);
}

function getBrother(){
  var brother = document.getElementById("d1").previousElementSibling;
  alert(brother.innerHTML);
}

function getBrother2(){
  var brother = document.getElementById("d1").nextElementSibling;
  alert(brother.innerHTML);
}
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title></title>
    <script src="js/index4.js"></script>
  </head>
  <body>
    <input type="button" value="找儿子" onclick="getChildren()"/>
    <input type="button" value="找儿子2" onclick="getChildren2()"/>
    <input type="button" value="找爸爸" onclick="getParent()"/>
    <input type="button" value="找哥哥" onclick="getBrother()"/>
    <input type="button" value="找弟弟" onclick="getBrother2()"/>
    <div>
      爸爸
      <div >哥哥</div>
      <div id="d1">
      <span >1</span>
      <span>2</span>
      <span>3</span>
      </div>
      <div>弟弟</div>
    </div>
  </body>
</html>

js查找元素的亲戚节点 副节点 子节点 兄弟节点_html