了解DOM [英] Understanding the DOM
问题描述
<！DOCTYPE html>
< html>
< head>
< title> JavaScript程序员参考< / title>
< / head>
< body>
< p id =myParagraph>这是我的段落！ < span class =hideme1> Lorem ipsum< / span> dolor坐着。
< span>< / span>
< / p>
< p class =hideme2>另一段！< / p>
< script>
alert（document.childNodes [1] .childNodes [2] .childNodes [3] .className）; //将提醒hideme2
< / script>
< / body>
< / html>
现在，如果HTML（DOM？）是在树中组织的，那么引用document.childNodes [1] .childNodes [2] .childNodes [3]让我们看到正文中的第2段？警告显示'hideme2'。
我可以看到DOCTYPE是document.childNodes [0]而HTML块是document.childNodes [1]。我希望，然后是document.childNodes [1] .childNodes [1]，对吧？我不知道看看甚至有一个document.childNodes [1] .childNodes [2]，更不用说它下面的第三层了。
我显然在这里遗漏了一些东西但是只看到3个从属于主体的元素，2个段落和块。我希望第2段是document.childNodes [1] .childNodes [1] .childNodes [1]（假设一切都是0-像往常一样）。我在这里看不到什么？
谢谢，
CM
< b>我尝试过：< / b>
抓我的头并研究DOM引用。
尝试使用浏览器的开发人员工具。 Firefox有一个DOM浏览器可能有所帮助。或者，此在线DOM查看器 [ ^ ]效果很好。
document.childNodes：
[0] =<！DOCTYPE html>
[1] =< html>
.childNodes：
[0] =< head>
[1] = #whitespace＃
[2] =< body>
.childNodes：
[0] = #whitespace＃
[1] =< p id =myParagraph>
[2] = #whitespace＃
[3] =< p class =hideme2>
OK, guys, this one is driving me nuts. I'm doing a little bit of Javascript studying and trying to understand how the JS is resolving this. Here's the code fragment:
<!DOCTYPE html>
<html>
<head>
<title>JavaScript Programmer's Reference</title>
</head>
<body>
<p id="myParagraph">This is my paragraph! <span class="hideme1">Lorem ipsum</span> dolor sit amet.
<span></span>
</p>
<p class="hideme2">Another paragraph!</p>
<script>
alert(document.childNodes[1].childNodes[2].childNodes[3].className); // will alert "hideme2"
</script>
</body>
</html>
Now, if the HTML (DOM?) is organized in a tree then how does the reference "document.childNodes[1].childNodes[2].childNodes[3] get us to that 2nd paragraph in the body? The alert displays 'hideme2'.
I can see that DOCTYPE is document.childNodes[0] and the HTML block is document.childNodes[1]. I would expect , then to be document.childNodes[1].childNodes[1], right? I don't see how there is even a document.childNodes[1].childNodes[2], let alone a 3rd level under it.
I'm obviously missing something here but only see 3 elements that are subordinate to the body, 2 paragraphs and the block. I would expect the 2nd paragraph to, then, be document.childNodes[1].childNodes[1].childNodes[1] (Assuming everything is 0-based, as usual). What am I not seeing here?
Thanks,
CM
<b>What I have tried:</b>
Scratching my head and studying DOM references.
Try using the browser's developer tools. Firefox has a DOM explorer which might help. Alternatively, this online DOM viewer[^] works pretty well.
document.childNodes: [0] = <!DOCTYPE html> [1] = <html> .childNodes: [0] = <head> [1] = #whitespace# [2] = <body> .childNodes: [0] = #whitespace# [1] = <p id="myParagraph"> [2] = #whitespace# [3] = <p class="hideme2">
这篇关于了解DOM的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
