javascript - JavaScript を使用して最初の子にクラスを追加する

Question

このチェーンが機能しない理由はありますか? クラスは追加しません。

document.getElementsByTagName('nav')[0].firstChild.className = "current"

<a>発生しないnav 要素の最初の子を返す必要があります。

ご協力いただきありがとうございます！

Answer 1

これは、との間にテキスト ノードがあるためです。次の条件でフィルタリングできます。navanodeType

var childNodes = document.getElementsByTagName('nav')[0].childNodes;
for (var i = 0; i < childNodes.length; i++) {
    if (childNodes[i].nodeType !== 3) { // nodeType 3 is a text node
      childNodes[i].className = "current";  // <a>
      break;
    }        
}

奇妙に思えるかもしれませんが、たとえば、次のマークアップがあるとします。

<nav>
<a>afsa</a>
</nav>

ここにデモがあります。

なぜこれが起こるのですか？一部のブラウザーは、<nav>との間のスペースを追加のテキスト ノード<a>として解釈する場合があるためです。したがって、代わりにテキストノードを返すため、機能しなくなります。firstChild

次のマークアップがあれば、うまくいきます。

<nav><a>afsa</a></nav>

Answer 2

ステートメント:

document.getElementsByTagName('nav')[0].firstChild.className = "current"

想定されるドキュメント構造を変更するとコードが壊れるため、やや脆弱です。したがって、より堅牢にするには、次のようにします。

var links, 
    navs = document.getElementsByTagName('nav');

if (navs) links = nav[0].getElementsByTagName('a');

if (links) links[0].className = links[0].className + ' ' + 'current';

堅牢な addClassName および removeClassName 関数も必要です。

Answer 3

Jquery を使用すると、これを非常に簡単に行うことができます。

$("#nav:first-child").addClass("current");