如何將一些樣式應用於 JavaScript 的“節點”對象

Question

想象一下，我有以下幾個陳述：

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/

Answer 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而不檢查它是否符合您的期望。

Answer 2

有幾個問題。

lastChild.previousSibling.firstChild是怎么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/