我正在尝试获取带有标签的第一个元素<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 选择器的匹配元素列表。)
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)