我要问的是为什么现在显示我的输出，您可以看看脚本中的内容吗？获取 div_id 为空的语法错误。此外，我的输出只是显示一个损坏的图像。真的需要一些帮助吗？
<!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>
最佳答案
在您的 HTML 中，没有以 ID 作为标题的元素。所以 document.querySelector("#heading"); 将返回 null。
所以 div_id.innerHTML = ("exampleEl"); 将抛出错误，因为 div_id 为空。
关于javascript - DOM 查询 javascript，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/43740126/