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 回答