Question

我正在学习如何将Javascript合并到Mac上的Objective-C应用程序中。我知道一些非常基本的HTML和非常少量的Javascript。 Apple的WebKit DOM编程指南概述了Javascript和DOM的一些简单用法，但我无法使用此示例代码：

<html>
 <head>
  <title>My Sample HTML file</title>
  <script language="javascript" type="text/javascript">

 var parasDiv = document.getElementById("allMyParas");
 var thirdPara = document.createElement("p");
 thirdPara.setAttribute("id", "thirdParagraph");
 parasDiv.appendChild(thirdPara);
 thirdPara.innerHTML = "This is my third paragraph.";
 parasDiv.style.borderBottom = "1px #000 solid";
 var parasInDiv = parasDiv.getElementsByTagName("p");
 for (var i = 0; i < parasInDiv.length; i++) {
  parasInDiv[i].style.backgroundColor = "lightgrey";

 }

   </script>
 </head>
 <body>
  <div id="allMyParas" style="border-top: 1px #000 solid;">
<p id="firstParagraph">
    This is my first paragraph.
</p>
<p id="secondParagraph">
    This is my second paragraph.
</p>

结果是我的浏览器顶部有一条黑线和两个原始段落，但不是应该创建的第三段。

我尝试过Chrome，Firefox和Safari。他们产生相同的结果？

有人可以解释为什么Apple的示例代码不起作用吗？

Answer 1

您的代码在allMyParas div之前执行，或者您尝试查找的任何元素都已创建您可以将代码放在正文的底部，以确保创建您尝试访问的元素。

<html>
 <head>
  <title>My Sample HTML file</title>
 </head>
 <body>
  <div id="allMyParas" style="border-top: 1px #000 solid;">
<p id="firstParagraph">
    This is my first paragraph.
</p>
<p id="secondParagraph">
    This is my second paragraph.
</p>
<script language="javascript" type="text/javascript">

 var parasDiv = document.getElementById("allMyParas");
 var thirdPara = document.createElement("p");
 thirdPara.setAttribute("id", "thirdParagraph");
 parasDiv.appendChild(thirdPara);
 thirdPara.innerHTML = "This is my third paragraph.";
 parasDiv.style.borderBottom = "1px #000 solid";
 var parasInDiv = parasDiv.getElementsByTagName("p");
 for (var i = 0; i < parasInDiv.length; i++) {
  parasInDiv[i].style.backgroundColor = "lightgrey";

 }

</script>

简单的Javascript DOM示例不起作用

1 个答案: