7

HTMLの例：

<div id="video-quality" style="">
<a class="low bttn" href="">
<span>Low Quality</span>
</a>
</div>

JavaScriptを使用してアンカータグをターゲットにし、現在のテキストである「低品質」を「高品質」に変更しようとしています。

JavaScriptについてはよくわかりませんが、これが私が思いついたものです。しかし、それは明らかに機能していません：

var vid_id=document.getElementById('video-quality');
var anchor=vid_id.getElementsByTagName('a');
anchor.innerHTML="High Quality";
4

4 に答える 4

7

にアンカーが1 つvideo-quality divしかないと仮定すると、それほど遠くありません。

var vid_id=document.getElementById('video-quality');
var anchor=vid_id.getElementsByTagName('a');
anchor[0].innerHTML="High Quality";
//    ^^^-- change here

（IE7以前をサポートする必要がない場合は、より短い方法があります。詳細については、 Davidの回答を参照してください。）

キーは名前にありましたgetElementsByTagName（複数形に注意してください）。NodeList要素ではなくを返します。ANodeListは (ショッキングなことに!) 一致するノードのリストです。この場合、一致するelementsです。innerHTMLは個々の要素のプロパティであるためNodeList、特定の要素にアクセスするには にインデックスを付ける必要があります。上記のコードは、一致する要素が少なくとも 1 つあると想定し、その HTML を更新します。防御力を高めたい場合：

var vid_id=document.getElementById('video-quality');
var anchors=vid_id.getElementsByTagName('a');
if (anchors[0]) {
    anchors[0].innerHTML="High Quality";
}

これにより、一致するアンカーがない可能性が考慮されます。

はアンカーの子孫であるspanため、これを行うことで要素を削除していることに注意してください。spanそれを避けたい場合spanは、アンカーの子孫として要素を探してくださいdiv.

FWIW、jQuery、YUI、Closure、または他のいくつかの. それらは多くのユーティリティ機能を提供し、いくつかのブラウザーの違いをスムーズにします。しかし、DOM を直接使用したい場合は、それも問題ありません。

于 2012-11-07T23:32:55.380 に答える
5

レガシー サポート (IE7-) が必要ない場合は、次のように記述できます。

document.querySelector('#video-quality a span').innerHTML = 'High Quality';

レガシー サポートが必要な場合は、jQuery などのライブラリを使用して、単一の広範な API から DOM ノードを簡単に選択できるようにすることをお勧めします。

于 2012-11-07T23:44:06.940 に答える
3

プレーンな JavaScript:

var vid_id = document.getElementById('video-quality');
var span = vid_id.getElementsByTagName('span');
span[0].innerText='High Quality'

または、jQuery を使用することもできます。

$('#video-quality span').text('High Quality');

お役に立てれば。

于 2012-11-07T23:39:51.100 に答える