我真的很想独自找到这个...抱歉问这个问题。我刚开始学习HTML,CSS和JavaScript。
我想通过图img
访问我的人物figcaption
和id
。
<div id="grid">
<figure id="hg">
<img src="sml1.png"/>
<figcaption>0</figcaption>
</figure>
</div>
我尝试使用 document.getElementById("hg").children
,但这似乎对我不起作用。也许我用错了?
我想做甚么可能吗?我真的不想给img和figcaption元素赋予id
属性。
答案 0 :(得分:1)
您可以使用queryselector:
document.querySelector('#hg img');
答案 1 :(得分:1)
尝试document.getElementById("hg").firstElementChild
或document.getElementById("hg").children[0]
Node.children
返回实时HTMLCollection,而不是单个元素。 MDN。
答案 2 :(得分:0)
您可以查看Node.childNodes以检查您的元素是否包含子项。
Node.childNodes
只读属性返回给定元素的子节点的实时集合,其中第一个子节点被指定为索引0。
var myfigure = document.getElementById('hg');
// does you ID exists ?
if (myfigure.hasChildNodes()) // has it got any child ?
{
var children = myfigure.childNodes;
// if it does, get them
for (var i = 0; i < children.length; i++) {
// go through all children
if (children[i].nodeName == 'IMG') {
// is it an img tag
children[i].style.border = "solid"; // apply some style or whatever else
}
// another test
if (children[i].nodeName == 'FIGCAPTION') {
children[i].style.color = "red";
}
}
}
<div id="grid">
<figure id="hg">
<img src="http://dummyimage.com/200&text=sml1.png" />
<figcaption>caption</figcaption>
</figure>
</div>
节点集合中的项目是对象而不是字符串。要从节点对象获取数据,请使用其属性(例如
)elementNodeReference.childNodes[1].nodeName
获取名称