简单的Javascript DOM示例不工作 [英] Simple Javascript DOM Example Not Working
问题描述
< HTML>
< head>
< title>我的示例HTML文件< / title>
< script language =javascripttype =text / javascript>
var parasDiv = document.getElementById（allMyParas）;
var thirdPara = document.createElement（p）;
thirdPara.setAttribute（id，thirdParagraph）;
parasDiv.appendChild（thirdPara）;
thirdPara.innerHTML =这是我的第三段。
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 =allMyParasstyle =border-top：1px＃000 solid;>
< p id =firstParagraph>
这是我的第一段。
< / p>
< p id =secondParagraph>
这是我的第二段。
< / p>
结果是我的浏览器顶部的黑线和两个原始段落，但不是第三个应该创建的段落。
我试过Chrome ，Firefox和Safari。他们产生相同的结果？
有没有人可以解释为什么苹果的示例代码不起作用？
您的代码在 allMyParas div之前执行创建您尝试查找的元素。
您可以将代码放在正文的底部，以确保您尝试访问的元素被创建。
< html>
< head>
< title>我的示例HTML文件< / title>
< / head>
< body>
< div id =allMyParasstyle =border-top：1px＃000 solid;>
< p id =firstParagraph>
这是我的第一段。
< / p>
< p id =secondParagraph>
这是我的第二段。
< / p>
< script language =javascripttype =text / javascript>
var parasDiv = document.getElementById（allMyParas）;
var thirdPara = document.createElement（p）;
thirdPara.setAttribute（id，thirdParagraph）;
parasDiv.appendChild（thirdPara）;
thirdPara.innerHTML =这是我的第三段。
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>
I am learning about how to incorporate Javascript into Objective-C applications on the Mac. I know some very basic HTML and a very minuscule amount of Javascript. Apple's WebKit DOM Programming Guide outlines some simple uses of Javascript and DOM, but I can't get this example code to work:
<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>
The result is a black line at the top of my browser and the two original paragraphs, but not the third that should have been created.
I've tried Chrome, Firefox, and Safari. They yield the same results?
Could anyone explain why Apple's example code doesn't work?
Your code is executed before the allMyParas div or any of the elements you try to lookup is created.
You can put your code at the bottom of the body to ensure the elements you try to access is created.
<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示例不工作的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
