Question

我问的是为什么我的输出现在显示你可以看看脚本中的什么？获取div_id为null的语法错误。我的输出也只是显示了一个破碎的图像。真的可以使用一些帮助吗？

<!DOCTYPE html>
<meta charset="utf-8"/>
//Gregory McConville DOM queries
<HTML>
<style type="text/css">

table {

}
p .example {
}
td {
    height: 50px;
    width: 50px;
    border: 1px solid;
}


</style>
<body>
<div id="example">Inside Content</div>
<div id="content">
    <table>
        <tr class="row1">
            <td>1</td>
            <td>2</td>
            <td id="first">3</td>
            <td class="last-column">4</td>
        </tr>
        <tr class="row2">
            <td>5</td>
            <td id="third">6</td>
            <td>7</td>
            <td class="last-column">8</td>
        </tr>
        <tr class="row-a">
            <td>9</td>
            <td>10</td>
            <td>11</td>
            <td class="last-column">12</td>
        </tr>
        <tr id="last-row" class="row-b">
            <td>13</td>
            <td id="last">14</td>
            <td>15</td>
            <td class="last-column">16</td>
        </tr>
    </table>
</div>
<p>
Please select the following and output it's results using console.log(). Once you select the element console.log() the element object. When asked for the value also console.log() the value of the element using the innerHTML property. An example of both is provided in the console.
</p>

<p>APIs you will use in this Assignment:</p>
<ol>
<li>getElementById</li>
<li>getElementsByClassName</li>
<li>querySelector</li>
<li>querySelectorAll</li>
</ol>


<p>Not using querySelector or querySelectorAll:</p>
<ol>
<li>An element with the ID of "last-row". Also output the value of this element</li>
<li>Select the elements with that have the Class of "last-column"</li>
</ol>

<p>Using the querySelector or querySelectorAll:</p>
<ol>
<li>Select elements that have both the Class of "row2" and "last-column" and output it. Be careful what order you select the classes in</li>
<li>Select the element with the ID of "last". Also output the value of this element</li>
<li>Select the element that is the "Table" element</li>
</ol>

<p>Output:</p>
<img src="imgs/Assignment-dom-queries-output.png" />
</p>
</body>
<script type="text/javascript">
var exampleEl = document.getElementById('example');
console.log("exampleEl");
console.log("exampleEl.innerHTML");

   if (typeof example !== 'undefined') {
    }
        var div_id = document.querySelector("#heading");
        div_id.innerHTML = ("exampleEl");

        var div_id = document.querySelectorAll("p .example");
        console.log("div id");

       var div_id= document.getElementById("exampleEL");
    console.log("div id");
    //ctrl+shft+i
    div_id.innerHTML = ("exampleEL");

        var tr_class = document.getElementsByClassName("last-column");
        console.log(last-column);
        // HTMLCollection
        console.log(nameEls[14]);
        for (var i = 14; i < nameEls.length; i++) {
            tr_class[i].innerHTML = ("example");
        };

</script>
        <div> id="example"(Inside Content);</div>
        <tr> id="last-row" class="row-b"</tr>
[td.last-column, td.last-column, td.last-column, td.last-column]
<td><class="last-column">(8)</td>
<td><id="last">(14)</td>
14
<table></table>
</HTML>

Answer 1

在HTML中，没有带ID的元素作为标题。所以document.querySelector("#heading");将返回null。所以div_id.innerHTML = ("exampleEl");将抛出错误，因为div_id为null。

Answer 2

您收到该错误，因为在上面的代码段中没有ID 标题的DOM元素。

根据图像，唯一可能的原因是路径错误

DOM queires javascript

2 个答案: