3.2.1 关卡详解

优质

小牛编辑

116浏览

2023-12-01

关卡详解

仔细想想，下面代码块会输出什么结果呢？

<!-- 挑战一 -->
<body>
<div id = "t"><span>aaa</span><span>bbb</span><span>ccc</span></div>
</body>
<script> 
    var d = document.getElementById("t");  
    document.writeln(d.firstChild.innerHTML);  // aaa
    document.writeln(d.lastChild.innerHTML);   // ccc   
</script>

<!-- 挑战二 -->
<body name="ddd">
<div id = "t"><span>aaa</span><span>bbb</span><span>ccc</span></div>
</body>
<script> 
    var d = document.getElementById("t");  
    document.writeln(d.childNodes[1].innerHTML); // aaa
    document.writeln(d.parentNode.getAttribute("name")); // ddd
</script>

<!-- 挑战三 -->
<body name="ddd">
<div id = "t"><span>aaa</span><span>bbb</span><span>ccc</span></div>
</body>
<script> 
    var d = document.getElementById("t").childNodes[1];  
    document.writeln(d.nextSibling.innerHTML);      // ccc
    document.writeln(d.previousSibling.innerHTML);  // aaa
</script>