3.3.1 关卡详解

优质

小牛编辑

120浏览

2023-12-01

关卡详解

仔细想想，下面代码块会输出什么结果呢？前3个挑战相比前一章节，代码仅仅是多了换行，结果会有什么不一样呢？

<!-- 挑战一 -->
<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);  // undefined
    document.writeln(d.lastChild.innerHTML);   // undefined   
</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);      // undefined
    document.writeln(d.previousSibling.innerHTML);  // undefined
</script>

<!-- 挑战四 -->
<body>
    <div id="t" class="content" style="background: red;" wife="sophie" onclick="alert('123');"></div>
</body>
<script> 
    var t = document.getElementById("t");    
    console.log(t.class);                   // undefined
    console.log(t.getAttribute("class"));   // "content"
    console.log(t.className);               // "content"
    console.log(t.getAttribute("className")); // null
    console.log(t.style);                   // [object MSStyleCSSPropertiesPrototype] 
    console.log(t.getAttribute("style"));   // "background: red;"
    console.log(t.style.background);        // "red"
    console.log(t.getAttribute("style.background")); // null
    console.log(t.wife);                    // undefined
    console.log(t.getAttribute("wife"));    // "sophie"
    console.log(t.onclick);                 // function onclick(event){ alert('123'); }
    console.log(t.getAttribute("onclick")); // "alert('123');"
</script>