Javascript 如何获取<span>值？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/12051898/
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
How to get < span > value？
提问by suannai
There are a piece of code,but can not use <id>tag.
有一段代码，但不能使用<id>标签。
So,how do I get to the <span> 1 2 3 4?
那么，我该如何到达<span> 1 2 3 4？
<div id="test">
<span>1</span>
<span>2</span>
<span>3</span>
<span>4</span>
<div>
回答by yogi
Try this
尝试这个
var div = document.getElementById("test");
var spans = div.getElementsByTagName("span");
for(i=0;i<spans.length;i++)
{
alert(spans[i].innerHTML);
}
回答by Florian Margaine
var test = document.getElementById( 'test' );
// To get the text only, you can use "textContent"
console.log( test.textContent ); // "1 2 3 4"
textContentis the standard way. innerTextis the property to use for legacy IE. If you want something as cross browser as possible, recursively use nodeValue.
textContent是标准方式。innerText是用于旧版 IE 的属性。如果你想要尽可能跨浏览器的东西，递归地使用nodeValue.
回答by Elias Van Ootegem
No jQuery tag, so I'm assuming pure JavaScript
没有 jQuery 标签，所以我假设纯 JavaScript
var spanText = document.getElementById('targetSpanId').innerText;
Is what you need
是你需要的
But in your case:
但在你的情况下：
var spans = document.getElementById('test').getElementsByTagName('span');//returns node-list of spans
for (var i=0;i<spans.length;i++)
{
console.log(spans[i].innerText);//logs 1 for i === 0, 2 for i === 1 etc
}
回答by pkurek
Pure javascript would be like this
纯 javascript 会是这样
var children = document.getElementById('test').children;
If you are using jQuery it would be like this
如果你使用 jQuery，它会是这样的
$("#test").children()
回答by Mihai Iorga
<div id="test">
<span>1</span>
<span>2</span>
<span>3</span>
<span>4</span>
</div>
<div id="test2"></div>
<script type="text/javascript">
var getDiv = document.getElementById('test');
var getSpan = getDiv.getElementsByTagName('span');???
var divDump = document.getElementById('test2');
for (var i=0; i<getSpan.length; i++) {
divDump.innerHTML = divDump.innerHTML + ' ' + getSpan[i].innerHTML;
}
</script>
?
?
回答by Vlad Bezden
You can use querySelectorAll to get all span elements and then use new ES2015 (ES6) spread operator convert StaticNodeList that querySelectorAll returns to array of spans, and then use map operator to get list of items.
您可以使用 querySelectorAll 获取所有 span 元素，然后使用新的 ES2015 (ES6) 扩展运算符将 querySelectorAll 返回的 StaticNodeList 转换为跨度数组，然后使用 map 运算符获取项目列表。
See example bellow
请参阅下面的示例
([...document.querySelectorAll('#test span')]).map(x => console.log(x.innerHTML))<div id="test">
<span>1</span>
<span>2</span>
<span>3</span>
<span>4</span>
<div>回答by Vishal Thakur
You need to change your code as below:-
您需要更改您的代码如下：-
<html>
<body>
<span id="span_Id">Click the button to display the content.</span>
<button onclick="displayDate()">Click Me</button>
<script>
function displayDate() {
var span_Text = document.getElementById("span_Id").innerText;
alert (span_Text);
}
</script>
</body>
</html>
After doing this you will get the tag value in alert.
执行此操作后，您将在警报中获得标签值。
