children

时间:2023-03-09 14:52:13
children
<!DOCTYPE html>

<html>
<head>
    <meta charset="utf-8"/>
</head>
<body>
  <div id="cotent">
      <div>我的主页</div>
      <div>聆听我的</div>
      <div>私人领地</div>
  </div>
  <script type="text/javascript">
    //js
        var mydiv2=document.getElementById("cotent").getElementsByTagName("div");//捕获#cotent的直接子元素div>子子元素div>...(相当于JQ的find)
        console.log(mydiv2.innerHTML);//【undefined】子元素的内容-->会报错因为是个集合,如果需要全显示需要遍历,单个用[]指定
        mydiv2.style.color="red";//【Uncaught TypeError: Cannot set property 'color' of undefined】子元素设置样式-->会报错因为是个集合,如果需要全设置需要遍历

    //jq
        var mydiv1=$("#cotent").children("div");//捕获#cotent的直接子元素(而find则会捕获#content直接子元素div>子子元素div>...)
        console.log(mydiv1.html());//【我的主页】子元素的内容-->会显示第一个,如需要全显示需要遍历,单个用eq指定(不符合情理)。本来jQuery如果也这么写,就会报错,所以为了不报错,就返回第一个了
        mydiv1.css({"color":"red"});//【字都变红】子元素设置样式-->会作用到所有子元素,无需便利(不符合情理)
  </script>
 </body>
</html>