2

次のようなステートメントがいくつかあると想像してください。

var n1 = oDiv.firstChild;
var n2 = oDiv.lastChild.previousSibling.firstChild; //know this crazy, but for knowledge sake

次のようなさまざまなスタイルを適用するにはどうすればよいですか（通常は「要素」タイプでのみ機能し、「ノード」タイプでは機能しません）。

//does not work
n1.style.borderWidth = "1px";
n1.style.borderColor = "#336699";
n2.style.borderStyle = "solid";

また、JavaScriptで「ノード」を「要素」に型キャストする方法はありますか？

アップデート：

私が上で達成しようとしているコードはここにありますhttp://jsfiddle.net/anthachetta/4mXrd/

4

2 に答える 2

1

DOMはHTMLとまったく同じように機能します。DOMはHTMLをオブジェクトとしてモデル化するように設計されているため、これは理にかなっています。それで、あなたが以下を太字にしたいなら、あなたは何をしますか：

Hello World

あなたのコードから、あなたがやろうとしていることは次のようなものです：

style=font-weight:bold Hello World

明らかに、それは有効なHTMLではないため、機能しません。あなたが通常することはこれです：

<span style='font-weight:bold;'>Hello World</span>

したがって、DOMでも同じことを行う必要があります。

// Assume you have a div "div" and the first child
// is the text node "Hello World"

var hello_world = div.firstChild;

// Now, you want to make Hello World bold.
// So you need to create a span:

var span = document.createElement('span');
span.style['font-weight'] = 'bold';

// Now wrap hello_world in the span:

span.appendChild(div.removeChild(hello_world));

上記は、実際に機能するDOMコードであり、必要な処理を実行します。ただし、注意してください。

  1. 標準に準拠したブラウザも、空白をノードとしてカウントします。
  2. IEは空白をノードとしてカウントしません。

たとえば、HTMLが次のようになっている場合：

<div>
    <span>Hi</span>
</div>

標準では、DOMは次のようになっている必要があります。

div +
    |---- text node (whitespace)
    '---- span +
               '---- text node (Hi)

しかし、IEはほとんどの人がおそらく期待することを行います。

div +
    '---- span +
               '---- text node (Hi)

これは、それがnode.firstChildあなたが期待しているものであるかどうかを確認せずに盲目的に信頼することはできないことを意味します。

于 2012-11-28T16:47:55.240 に答える
1

いくつかの問題があります。

lastChild.previousSibling.firstChild混乱とは何ですか？それはあなたを混乱させるだけです。

プロパティの混乱は、要素ではなくテキスト ノードを返します。

lastChildを与え、タグを"a line"取得previousSiblingしてから返します。スタイルをテキスト ノードに適用しようとしていますが、これはできません。要素のスタイルを設定する必要があります。<i>firstChild"just"

にスタイルを適用しようとしていますnodeValue。それは文字列です。を使用parentNodeして<i>、テキスト ノードからタグにアクセスできます。

oDiv.lastChild.previousSibling.firstChild.parentNode.style.color = "#FF0000";

デモ: http://jsfiddle.net/NTICompass/4mXrd/2/

于 2012-11-28T16:49:59.813 に答える