Javascript：如何找到id为“map”的h3标头的内容？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/4353178/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Javascript: how to find the content of h3 header with id "map"?
提问by Alexander Farber
I have a web page with a Google Map which works well. Instead of having the city name hardcoded to "Bochum" there, I'd like to find the header
我有一个带有谷歌地图的网页，效果很好。我不想在那里将城市名称硬编码为“波鸿”，而是想找到标题
<h3 id="city"><i>Bochum</i></h3>
and use that value in my init() function.
并在我的 init() 函数中使用该值。
I'm probably missing something minor in the code below. Please help me and please refer me to the API reference for such a "child", my Javascript skills are very rusty.
我可能在下面的代码中遗漏了一些小东西。请帮帮我，请给我参考这样一个“孩子”的API参考，我的Javascript技能非常生疏。
Also I wonder, how could I pass one more value through my h3 header, like the color for my marker?
我也想知道，我怎么能通过我的 h3 标头再传递一个值，比如我标记的颜色？
Thank you! Alex
谢谢！亚历克斯
<html>
<head>
<style type="text/css">
h1,h2,h3,p { text-align: center; }
#map { width: 400; height: 200; margin-left: auto; margin-right: auto; }
</style>
<script type="text/javascript"
src="http://maps.google.com/maps/api/js?sensor=false">
</script>
<script type="text/javascript">
function init() {
for (var child in document.body.childNodes) {
child = document.body.childNodes[child];
if (child.nodeName == "H3")
alert(child);
}
// use the #city value here instead
city = 'Bochum';
if (city.length > 1)
findCity(city);
}
function createMap(center) {
var opts = {
zoom: 9,
center: center,
mapTypeId: google.maps.MapTypeId.ROADMAP,
};
return new google.maps.Map(document.getElementById("map"), opts);
}
function findCity(city) {
var gc = new google.maps.Geocoder();
gc.geocode( { "address": city}, function(results, status) {
if (status == google.maps.GeocoderStatus.OK) {
var pos = results[0].geometry.location;
var map = createMap(pos);
var marker = new google.maps.Marker({
map: map,
title: city,
position: pos,
});
}
});
}
</script>
<head>
<body onload="init();">
<h3 id="city"><i>Bochum</i></h3>
<div id="map"></div>
</body>
</html>
回答by Douglas
To include more data, you could use attributes:
要包含更多数据，您可以使用属性：
<h3 id="city" data-citycolor="red"><i>Bochum</i></h3>
And get them out like this:
像这样把它们弄出来：
var city = document.getElementById("city");
var name = city.textContent || city.innerText;
var color = city.getAttribute("data-citycolor");
I think that you would be better off using jQuery, even if it is a 26kb library file, since then you can simplify it to this:
我认为您最好使用 jQuery，即使它是一个 26kb 的库文件，从那时起您可以将其简化为：
var city = $("#city");
var name = city.text();
var color = city.data("citycolor");
Note that you used "#city" in you comment, and with jQuery, you can use that exact string in your code. That's a good win. It also makes it trivial to use $(".city") in the future, if you want to have more of these on one page.
请注意，您在注释中使用了“#city”，并且使用 jQuery，您可以在代码中使用该字符串。这是一个很好的胜利。如果您想在一页上拥有更多这些，那么将来使用 $(".city") 也变得很简单。
回答by Félix Saparelli
Well, the h3 has an ID, no?
嗯，h3 有一个 ID，不是吗？
var city = document.getElementById('city').innerText;
Or, using jQuery:
或者，使用 jQuery：
var city = $('#city').text();
回答by Alastair
The id attribute should be unique for the page - in other words you shouldn't have any other elements with id="city". Assuming that's the case, here's an example of what you could do:
id 属性对于页面应该是唯一的——换句话说，你不应该有任何其他带有 id="city" 的元素。假设是这种情况，以下是您可以执行的操作的示例：
<html>
<script type="text/javascript">
function init()
{
var node = document.getElementById("city");
var cityName = node.childNodes[0].innerHTML;
alert("Found city name: " + cityName);
}
</script>
<body onload="init();">
<h3 id="city"><i>Bochum</i></h3>
</body>
</html>
As a suggestion, I would lose the <i> and </i> tags, and instead add a style rule for your h3 node. In that case, the cityName would be just node.innerHTML.
作为建议，我会丢失 <i> 和 </i> 标签，而是为您的 h3 节点添加样式规则。在这种情况下，cityName 将只是 node.innerHTML。
回答by Dr.Molle
Assuming that the ID 'city' is unique(what an ID has to be):
假设 ID 'city' 是唯一的（ID 必须是什么）：
document.getElementById('city').getElementsByTagName('i')[0].firstChild.data
