<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>

</head>
<body>
<div id="dv">
  <ul id="uu">
    <li>第一个</li>
    <li>第二个</li>嘎嘎
    <li id="three">第三个</li>哈哈
    <li>第四个</li>
    <li>第五个</li>
  </ul>
</div>
<script src="common.js"></script>
<script>

  //ul的父级节点
  console.log(my$("uu").parentNode);
  //ul的父级元素
  console.log(my$("uu").parentElement);
  //ul的所有子级节点
  console.log(my$("uu").childNodes);
  //ul的所有的子元素
  console.log(my$("uu").children);
  //ul中第一个子节点
  console.log(my$("uu").firstChild);
  //ul中第一个子元素
  console.log(my$("uu").firstElementChild);
  //ul中最后一个子节点
  console.log(my$("uu").lastChild);
  //ul中最后一个子元素
  console.log(my$("uu").lastElementChild);
  //某个li的前一个兄弟节点
  console.log(my$("three").previousSibling);
  //某个li的前一个兄弟元素
  console.log(my$("three").previousElementSibling);
  //某个li的后一个兄弟节点
  console.log(my$("three").nextSibling);
  //某个li的后一个兄弟元素
  console.log(my$("three").nextElementSibling);

  //总结:获取节点的代码,谷歌是获取节点,获取元素的代码,谷歌是获取元素
  //但是,到了IE8中,获取节点的代码是获取元素,获取元素的代码,不支持
</script>

</body>
</html>

欢迎留言