我正在尝试获取带有标签 <figure>
的第一个元素使用 getElementByTagName().firstChild[0].innerHTML
但是我在将它添加到内容时遇到了一些问题,我得到 undefined
.
这是我正在使用的 javascript。
function loopImage()
{
var value = document.getElementById("loopvalue").value;
var content = document.getElementById("contained");
if(value >= 1)
{
content.innerHTML = '<br><input type="button" value="Search" onClick="loopImage()"><input type="text" id="loopvalue"><br><br>';
for(var i =0;i< value; i++)
{
content.innerHTML = content.innerHTML + content.getElementByTagName('figure').firstChild[0].innerHTML;
}
content.innerHTML = content.innerHTML + '<style>figure:nth-of-type(2n+2){background:black;color:red;}</style>';
}
else if(value == "") location.reload();
else if(value <= 0) alert("Positive Numbers only!");
else alert("Are you sure that was a number?")
}
这是我试图从中获取内容的 HTML,
<div class="container" id="contained">
<br>
<input type="button" value="Search" onClick="loopImage()">
<input type="text" id="loopvalue">
<br><br>
<figure>
<a href="photos/DSC01049.JPG">
<img src = "photos/DSC01049.JPG" alt="City view" height="200" width="200">
</a>
<figcaption>City View</figcaption>
</figure>
<figure>
<a href="photos/DSC01066.JPG">
<img src = "photos/DSC01066.JPG" alt="City view" height="200" width="200">
</a>
<figcaption>Ferris Wheel</figcaption>
</figure>
<figure>
<a href="photos/DSC02511.JPG">
<img src = "photos/DSC02511.JPG" alt="City view" height="200" width="200">
</a>
<figcaption>Old Mates House</figcaption>
</figure>
<figure>
<a href="photos/DSC03810.JPG">
<img src = "photos/DSC03810.JPG" alt="City view" height="200" width="200">
</a>
<figcaption>City Skyline</figcaption>
</figure>
<figure>
<a href="photos/DSC05750.JPG">
<img src = "photos/DSC05750.JPG" alt="City view" height="200" width="200">
</a>
<figcaption>Beach</figcaption>
</figure>
</div>
最佳答案
您引用的代码存在两个问题:
content.getElementByTagName('figure').firstChild[0].innerHTML
// Missing s -----^ ^^^^^^^^^^^^^^--- there is no firstChild on the return value
所以理论上是可以的
content.getElementsByTagName('figure')[0].innerHTML
...但是当您只想要第一个而根本不需要列表时,它会获取一个列表然后从中获取第一个。我可能只会得到第一个:
content.querySelector('figure').innerHTML
querySelector
查找 CSS 选择器的第一个匹配元素,如果没有匹配项,则为 null
。所有现代浏览器和 IE8 都支持它。 (它是 querySelectorAll
的亲戚,它返回 CSS 选择器的匹配元素列表。)
关于javascript - 使用 Javascript DOM 获取带有标签名称的第一个元素,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/31784117/