0

DOM のトラバースをより適切に処理するために、いくつかの単純な HTML および JS コードをセットアップしました。

ここに私のHTMLがあります:

<!DOCTYPE html>
<html>
  <head>
    <title>Sandbox</title>
  </head>
  <body>
    <div>
      <h1 id="title">Sandbox</h1>
      <button id="clickMe" onclick="playingAroundWithNodes()">Play with nodes!</button>
    </div>
  </body>
  <script type="text/javascript" src="Sandbox3.js"></script>
</html>

そして、ここに私のJavaScriptがあります:

function playingAroundWithNodes() {

    //Getting a reference to some nodes!

    var theHtmlNode = document.childNodes[1];
    var theHeadNode = theHtmlNode.childNodes[0];
    var theBodyNode = theHtmlNode.childNodes[1];

    //Let's check out those nodes!

    console.log("theHtmlNode is a " + theHtmlNode.nodeName + " type node.");
    console.log("theHeadNode is a " + theHeadNode.nodeName + " type node.");
    console.log("theBodyNode is a " + theBodyNode.nodeName + " type node.");

}

ただし、取得するコンソールログは次のとおりです。

theHtmlNode is a HTML type node.
theHeadNode is a HEAD type node. 
theBodyNode is a #text type node.

何を与える？テキスト ノードは一体どこにあるのでしょうか。それはタイトル ノードではありませんか? 私は混乱していて、たくさん遊んでいます（jsによると、実際にはbodyノードがHEADの3番目の子であることがわかりましたが、HTMLを見ると意味がありません）。3番目の子孫か何かであることがわかりましたが、子供は直接の子供を意味すると思いました...助けていただければ幸いです!

4

3 に答える 3

2

まず、あなたは私に何か新しいことを考えました。documentプロパティがあることにまったく気づきませんでしたchildNodes(通常、ルート要素 (html) は 経由でアクセスされますdocument.documentElement)。

テキスト ノードに関しては、HTML ファイルのフォーマット方法に応じて発生します。上記のテキスト ノードは、おそらく改行文字か、終了</head>と開始の間のいくつかのスペースです<body>。

おそらくあなたが探しているのは (元々は非標準でしたが、最近標準化が提案されました)element.childrenです。John Resig が概要を説明しています。

したがって、上記のコードを次のように修正すると、期待どおりの結果が得られます。

var theHeadNode = theHtmlNode.children[0];
var theBodyNode = theHtmlNode.children[1];
于 2012-12-18T20:48:21.147 に答える
1

IE は、期待どおりに動作する唯一のブラウザーです。他のすべてのブラウザーは標準を実装しており、標準では、空白も DOM の一部でなければならないと述べています。

したがって、次のような HTML の場合:

<html>
    <body>
        <div>Hello</div>
    </body>
</html>

IE は次の DOM を作成します。

html +
     |____ body +
                |____ div +
                          |____ text("Hello")

ただし、他のすべてのブラウザーはこの DOM を作成します。

html +
     |____ text("\n    ")
     |
     |____ body +
     |          |____ text("\n        ")
     |          |
     |          |____ div +
     |          |         |____ text("Hello")
     |          |
     |          |____ text("\n        ")
     |
     |____ text("\n    ")

の前後にテキストノードがあるはずなので、どのように結果が得られたのかわかりません<html>。

とにかく、答えは標準がそれを要求するからです。したがって、ハードコーディングされたインデックスをやみくもに使用して childNode をトラバースしないでください。ミニファイアのようなものは、空白が原因で DOM を変更する可能性があるためです。すべての子をループして、必要なノードが見つかったら停止するか、getElementsByTagName を使用します。

于 2012-12-18T21:06:16.673 に答える
0

@mcabrams: @slebatman が言及したことに加えて、ボディ名に直接アクセスしたい場合は、単に次を使用します。

var bodyNode = document.body;  //it returns a refrence to the body node

それが役立つことを願っています。

于 2012-12-19T05:20:17.727 に答える