179

前に JavaScript に手を出したことがありますが、私が書いた中で最も便利なものは CSS スタイル スイッチャーです。だから私はこれにやや慣れていません。次のような HTML コードがあるとします。

<div id="foo">
    <div class="bar">
        Hello world!
    </div>
</div>

に変更Hello world!するにはどうすればよいGoodbye world!ですか?

document.getElementsByClassName方法と作業は知っていますdocument.getElementByIdが、より具体的に知りたいです。これが以前に尋ねられた場合は申し訳ありません。

4

8 に答える 8

310

まず、 のような関数で要素を選択する必要がありますgetElementById。

var targetDiv = document.getElementById("foo").getElementsByClassName("bar")[0];

getElementById1 つのノードのみを返しますgetElementsByClassNameが、ノード リストを返します。そのクラス名を持つ要素は 1 つしかないため (私が知る限り)、最初の要素を取得するだけです (これが の[0]目的であり、配列のようなものです)。

次に、でhtmlを変更できます.textContent。

targetDiv.textContent = "Goodbye world!";


var targetDiv = document.getElementById("foo").getElementsByClassName("bar")[0];
targetDiv.textContent = "Goodbye world!";
<div id="foo">
    <div class="bar">
        Hello world!
    </div>
</div>

于 2011-10-19T00:47:49.983 に答える
18

次のように実行できます。

var list = document.getElementById("foo").getElementsByClassName("bar");
if (list && list.length > 0) {
    list[0].innerHTML = "Goodbye world!";
}

または、エラーチェックを減らして簡潔にしたい場合は、次のように1行で実行できます。

document.getElementById("foo").getElementsByClassName("bar")[0].innerHTML = "Goodbye world!";

説明では：

  1. で要素を取得しid="foo"ます。
  2. 次に、そのオブジェクトに含まれているオブジェクトを見つけますclass="bar"。
  3. それは配列のようなnodeListを返すので、そのnodeListの最初の項目を参照します
  4. 次に、その項目の を設定しinnerHTMLて内容を変更できます。

警告: 一部の古いブラウザーはサポートしていませんgetElementsByClassName(IE の古いバージョンなど)。その機能が欠落している場合は、所定の位置にシムすることができます。

ここでは、ブラウザーの互換性について自分で心配するよりも、組み込みの CSS3 セレクターをサポートするライブラリーを使用することをお勧めします (すべての作業は他の人に任せてください)。ライブラリだけでそれを行いたい場合は、Sizzle が最適です。Sizzle では、これは次のように行われます。

Sizzle("#foo .bar")[0].innerHTML = "Goodbye world!";

jQuery には Sizzle ライブラリが組み込まれており、jQuery では次のようになります。

$("#foo .bar").html("Goodbye world!");
于 2011-10-19T00:46:59.317 に答える
7

これが IE 7 以下で機能する必要がある場合は、getElementsByClassName がすべてのブラウザーに存在するわけではないことに注意してください。このため、独自の getElementsByClassName を作成するか、これを試すことができます。

var fooDiv = document.getElementById("foo");

for (var i = 0, childNode; i <= fooDiv.childNodes.length; i ++) {
    childNode = fooDiv.childNodes[i];
    if (/bar/.test(childNode.className)) {
        childNode.innerHTML = "Goodbye world!";
    }
}
于 2011-10-19T00:53:10.663 に答える
-6

document.getElementByIDは使用しないでください。これは、クライアント側でのみ機能し、どの ID が固定されているかを制御するためです。以下の例のように、代わりに jquery を使用する必要があります。

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>                                                                                                             
<div id="foo">
   <div class="bar"> 
          Hello world!
     </div>
</div>

これを使って ：

$("[id^='foo']").find("[class^='bar']")

// do not forget to add script tags as above

操作を削除したい場合は、「。」を追加するだけです。背後にいて、操作を行います

于 2015-08-01T18:22:11.413 に答える