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中将“node”强制转换为“element”？

更新

我在上面尝试完成的代码是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代码，它可以满足您的需求。但要注意：

符合标准的浏览器也将空白视为节点。
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为您提供"a line"，previousSibling获取<i>标记，然后firstChild返回"just"。您正在尝试将样式应用于文本节点，而您无法对其进行样式设置。

您正尝试将该样式应用于nodeValue。那是一个字符串。您可以使用parentNode从文本节点转到<i>标记。

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

DEMO：http://jsfiddle.net/NTICompass/4mXrd/2/

如何将一些样式应用于JavaScript“节点”对象

2 个答案: