7

このコードを考えると：

Element elem  = new Element.html("<p>This is a paragraph.</p>");

document.body.append(elem);
document.body.children.add(elem);
document.body.nodes.add(elem);

addI tobody.childrenまたは toの場合、結果は同じbody.nodesです。2つの違いは何ですか？どちらが良いですか？

4

2 に答える 2

10

簡単に説明してみます。

次の HTML スニペットを想定してみましょう。

<div>
  Hey!
  <span>How is it going?</span>
</div>

さて、問題はchildrenプロパティがElementクラスから来るということです。Element他のオブジェクトのリストを返します:

List<Element> children

そのため、要素は要素である子を持つことができます。

しかし、クラスnodesに由来するプロパティがあります。他のオブジェクトNodeのリストを返します:Node

List<Node> nodes

したがって、ノードは、ノード自体でもある子ノードを持つことができます。

あなたが尋ねるべき質問は、ノードと要素の違いは何ですか?

前の HTML スニペットにコメントを追加さ​​せてください。

<div> <!-- Element -->
  Hey! <!-- Node -->
  <span> <!-- Element -->
    How is it going? <!-- Node -->
  </span>
</div>

Elementextendsを覚えておいてください。これは、とが要素であるだけでなく、ノードでもNodeあることを意味します! すべてが HTML のノードです。実際、コメントもノードです。<div><span><!-- foo -->

プロパティにアクセスするnodesと、ノードのリストが取得されます。これは基本的に、HTML コメントやテキストを含む、その下にあるすべてのリストです。

nodes上記の<div>タグの を取得すると、1 つ ("hey!") と 1 つ ( ) が返さNodeれElementます<span>。ただし、childrenプロパティを取得すると、単一のElement( <span>) を含むリストのみが返されます。

したがって、nodes要素、テキスト ノード、コメント、ドキュメント タイプなど、文字通りすべてが含まれます。

あなたの質問に今すぐ答えるには：

 document.body.append(elem);
 document.body.children.add(elem);

これら 2 つは同じです。1 つ目は便宜上の単なるラッパーです。

またはに追加すると、実際には大きな違いはありません。ただし、プロパティを取得すると、結果が異なる場合があります。期待以上の結果が得られるため、通常は使用することをお勧めします。nodeschildrenchildren

実装に関しては、Kyrra が述べたようにほとんど違いはありませんが、あまり気にする必要はありません。

于 2012-12-29T14:58:45.747 に答える
1

編集：カイの答えははるかに優れています。

ORIGINAL:
document.body.append(elem)の単なるラッパーですdocument.body.children.add(elem)。

同様に、document.body.elementsは単なるラッパーですdocument.body.children。

.nodes.childrenさまざまな基本クラスを使用して、それらの機能を実装します。機能的には、これら 2 つの子は同じ List 関数のセットを提供していました。sort、setRange、removeRange、insertRange、および のセッターの両方に実装がありませんlength。ただし、3 つの範囲機能は将来的に実装される可能性があります。

ノードと子の重要な違いは、子へのアクセスに遅延初期化nodesを使用することです。具体的には、そのコンストラクターは次のことを行います。

_ChildNodeListLazy(this._this);

のコンストラクターchildrenは次のことを行います。

_ChildrenElementList._wrap(Element element)
  : _childElements = element.$dom_children,
    _element = element;

このchildrenクラスは、構築時にすぐに $dom_children を呼び出します。これにより、DOM の子にアクセスできるようになります。このnodesクラスは、何か (項目の追加など) を行うまで、ネイティブの $dom_* 呼び出しを使用しません。

それを超えて、nodes同じchildrenようです。

どちらが優れているかは、ユースケースによって異なります。子リストへの参照を保存するが、すぐにアクセスしない場合は、nodesより優れています。しかし、 getterを呼び出すたびに と の getter がラッパー クラスの新しいインスタンスを作成するため、現時点ではどちらもそれほど効率的ではありません (呼び出すとnodes_ChildrenElementListクラスの新しいインスタンスが作成されます)。このため、 body の子に対して後続の呼び出しを多数行う場合は、表記法を使用することをお勧めします。childrenbody.children..

document.body.children
    ..add(a)
    ..add(b)
    ..add(c)
    ..add(d);

カスケード演算子の詳細については..、言語ツアーを参照してください。

于 2012-12-29T12:33:30.203 に答える