是否可以在由 javascript 创建的元素上使用 getElementByClassName() - Mapbox

Question

是否可以使用 getElementByClassName() 来获取由 javascript 创建的元素？

我试图获得与 Mapbox 的距离（仅使用纯 js）。 看图片=>图片

我试图获得那个 h1 元素。 见图片 =>由 mapbox javascript 创建的 H1 值

我的代码：

<script type="text/javascript">
function myFunction() {
var code = document.getElementsByTagName('h1')[2].innerHTML;
document.getElementById("km").value = code; } </script>

我试图用上面的方法获取 h1 元素的内容，但是没有用。

有什么解决办法吗？

Answer 1

要获取类mapbox-directions-component的元素的子元素 h1，您可以使用getElementsByClassName ，然后从该 dom 位置链接getElementsByTagName 。 请注意，两个选择器都返回一个元素集合。 因此，如果您知道它是具有该 class 的第一个元素以及该元素的子元素的第一个标签，您可以使用：

document.getElementsByClassName("mapbox-directions-component")[0].getElementsByTagName("h1")[0].innerHTML

然而，在我看来，更直接的方法是使用querySelector ： MDN Document.querySelector()

document.querySelector(".mapbox-directions-component h1").innerHTML