Question

如您所见，我有两个不同的音频文件，对应于id =＆＃34; 6.1＆＃34;。有没有办法使用只调用＆＃34;直接＆＃34;的getElementById？ Id的内容类？我知道您可以在Id中调用选项。我尝试了＃34; document.getElementById（＆＃39; 6.1＆＃39;）。options [0] .text.play（）＆＃34;，但这并没有奏效。（显然，我是新人。）任何人都有提示吗？

merge=internal:merge

Answer 1

.表示法用于表示类选择器，不应在id中使用。因此，选择器#6.1将选择ID为 6 且类 1 的元素。

将querySelector与attribute=value选择器一起使用。

document.querySelector('[id="6.1"] .straight').classList.add('green');

Demo

＆＃13;

document.querySelector('[id="6.1"] .straight').classList.add('green');

＆＃13;

.green {
  color: green;
  font-weight: bold;
}

＆＃13;

<div id="6.1"> <span class="straight">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Fuga, unde.</span>
  <span class="swing">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure
        dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</span>
</div>

＆＃13;

Answer 2

您可以使用jquery：

$("#6\\.1 .straight")[0]

或者如果你坚持使用纯JavaScript DOM：

document.getElementById("6.1").getElementsByClassName("straight");

但是，我不认为这实际上会做你想做的事。多个<source>应该是后备音频源，所有音频源都包含不同格式的相同音频（例如MP3，Ogg）。 HTML指定了一种算法，浏览器根据浏览器的播放内容来协商使用哪种替代方法。您不需要任何JavaScript来进行自动协商，浏览器应自动选择要播放的替代方案。

你到底想要做什么？

Answer 3

非常适合document.querySelector()或document.querySelectorAll()

这是一个简单的例子：

<h1>Div One</h1>
<h1>Div Two</h1>
<script>
    var elements = document.querySelectorAll('h1');
    elements[0].innerHTML = "Div One Works!";
    elements[1].innerHTML = "Div Two Works!";
</script>

<强> Demo

另一个优点是您可以一次查询多个属性。例如：

<div><p>Paragraph in a Div</p></div>
<script>
    document.querySelector('div p').innerHTML = "it works!";
</script>

有没有办法用getElementById调用Id中的类？

3 个答案: