使用Javascript DOM获取带有标记名称的第一个元素(Using Javascript DOM to get first element with tag name)

使用Javascript DOM获取带有标记名称的第一个元素(Using Javascript DOM to get first element with tag name)

我试图使用getElementByTagName().firstChild[0].innerHTML来获取带有<figure>标签的第一个元素，但是在将其添加到内容时遇到了一些问题，我得到了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>

Im Trying to get the first element with the tag <figure> using the getElementByTagName().firstChild[0].innerHTML but I run into some problems when adding it to the content, i get undefined.

Here is the javascript that I'm using.

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?") }

And here is the HTML that I'm trying to get the content from,

<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选择器的匹配元素列表。）

Two issues with the code you've quoted:

content.getElementByTagName('figure').firstChild[0].innerHTML // Missing s -----^ ^^^^^^^^^^^^^^--- there is no firstChild on the return value

So in theory it could be

content.getElementsByTagName('figure')[0].innerHTML

...but that gets a list and then takes the first one from it, when you just want the first one and don't need the list at all. I'd probably just get the first one:

content.querySelector('figure').innerHTML

querySelector finds the first matching element for a CSS selector, or null if none matches. It's supported on all modern browsers, and also IE8. (It's a relative of querySelectorAll, which returns a list of matching elements for a CSS selector.)