有没有一种方法可以用getElementById调用Id中的类

Is there a way to call a class within an Id with getElementById?

本文关键字：调用 getElementById Id 方法 一种 有没有      更新时间：2023-09-26

正如您所看到的，我有两个不同的音频文件，它们对应于id="6.1"。有没有一种方法可以使用getElementById来只调用id内容的"直"类？我知道你可以在Id中调用内的选项。我尝试过"document.getElementById（'6.1'）.options[0].text.play（）"，但没有成功。（很明显，我是这方面的新手。）有人有什么建议吗？

<audio id="6.1" preload='none'>
    <source class="straight" src='audio/6.1.mp3' type='audio/mpeg' />
    <source class="swing" src='audio/swing/6.1.mp3' type='audio/mpeg' />
</audio>
<button onclick="document.getElementById('6.1').play()">&#x25b6;</button>

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

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

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

演示

document.querySelector('[id="6.1"] .straight').classList.add('green');
.green {
  color: green;
  font-weight: bold;
}
<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>

您可以使用jquery:

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

或者，如果您坚持使用纯JavaScript DOM:

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

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

你到底想做什么？

这非常适合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>

演示

另一个优点是可以同时查询多个属性。示例：

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