logo标签列表

什么是元素的直接子元素和非直接子元素的区别？

htmlcss
4
具有class为“altfoo”的
是
的直接子元素吗？为什么或者为什么不是？我感到困惑，"immediate child" 意味着与 "direct child" 意思相同吗？
<div class="foo">
  <!-- 1 -->
  <p></p>
   <!-- 2 -->
  <p></p>
  <div class="altfoo">
    <!-- 3 -->
    <p></p>
 </div>
</div>
2个回答
2
是的，“immediate child”和“direct child”的意思是一样的，你的元素.altfoo既是.foo的直接子元素，也是它的立即子元素。可以使用child combinator >进行确认：
Original Answer翻译成: "最初的回答" 

.foo > .altfoo {
  color: red;
}
<div class="foo">
  <!-- 1 -->
  <p></p>
   <!-- 2 -->
  <p></p>
  <div class="altfoo">
    <!-- 3 -->
    Altfoo
    <p></p>
 </div>
</div>

你的例子中的<p></p>只是.altfoo的同级元素，并且它也是.foo的直接子元素。
一个直接子元素是指在层级上紧接着父级的子元素。也就是说，不是孙子元素或曾孙元素。
例如，注意当一个元素在层级中分隔这两个元素时，.foo > .altfoo CSS选择器不再针对该元素： 

.foo > .altfoo {
  color: red;
}
<div class="foo">
  <div class="middle">
    <div class="altfoo">
      Altfoo
    </div>
  </div>
</div>

0

有两种方法可以访问子元素。一种是使用DOM属性“children”，它仅提供类型为元素的直接子节点。而“childNodes”函数则提供所有级别的所有类型的节点，包括注释和文本节点。下面的示例代码可用于更好地理解该语句。

<htmL>
<head>
</head>
<body>
<div class="foo">
    <p></p>
    <p></p>
    <div class="altfoo">
        <p></p>
    </div>
</div>
</body>

<script type="text/javascript">
(function(){
var c = document.getElementsByClassName("foo")[0].children; 
//var c = document.getElementsByClassName("foo")[0].childNodes();


var i;
  for (i = 0; i < c.length; i++) {
    alert( c[i].outerHTML);
  }

})();
</script>

</html>
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接