6

JavaScript の勉強を始めて以来、Tim WrightのLearning JavaScriptという本を読んでいます。

この本で、DOM ツリー内の要素を移動してターゲットにする方法についての章を見つけました。そのうちの 1 つは、兄弟をターゲットとするプロパティを使用しています。

<ul id="nav">
  <li><a href="/" id="home">Home</a></li>
  <li><a href="/about" id="about">About Us</a></li>
  <li><a href="/contact" id="contact">Contact Us</a></li>
</ul>
<script>
   //Should add "next" class attribute to the "Contact Us" li tag.
   document.getElementById("about").parentNode.nextSibling.setAttribute("class", "next");
</script>

このコードをざっと見た後、経験豊富な開発者の誰かが私を助けて、これが正しく動作しない理由を説明してくれるかどうか疑問に思っていました. 何か間違ったことをしているのか、これらのプロパティに関する記事のスペルが間違っているのかがわからないため、混乱しています。

とにかく、お時間をいただきありがとうございます。

乾杯！

cs.アルメイダ

4

1 に答える 1

8

nextSibling要素の次の兄弟を選択します。次の兄弟ノードは、メソッドtextNodeを持たないの場合もありsetAttributeます。つまり、コードが試みているのは、次の兄弟の textNode にクラスを追加することです。li2 つの要素の間の改行やその他の隠し文字を削除すると、コードは期待どおりに機能します。

もう 1 つのオプションは、 のnextElementSibling代わりに プロパティを使用することです。これは、 を持つ次の兄弟ノード、つまり要素nextSiblingの次の兄弟ノードを選択します。nodeType1HTMLElement

document.getElementById("about")
        .parentNode
        .nextElementSibling
        .classList // https://developer.mozilla.org/en-US/docs/Web/API/Element/classList
        .add("next");
于 2015-03-01T23:02:38.513 に答える