如何通过 JavaScript 获取类的内容
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/10675862/
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 contents of class through JavaScript
提问by BrokenCode
I need to use JavaScript to get the username which is posted in the following way:
我需要使用 JavaScript 来获取以下列方式发布的用户名：
<div id="project_user">
<p class="project_user">
by <span class="project_username"><?php echo $OwnerName; ?></span>
</p>
</div>
How do I do it?
我该怎么做？
I tried the following but it didn't work:
我尝试了以下但没有奏效：
document.getElementById('project_username').innerHTML
回答by gdoron is supporting Monica
You select by idwhile you need to select by the className:
您选择 byid而您需要选择className:
document.getElementsByClassName('project_username')[0].innerHTML
Note that document.getElementsByClassNameis not implemented in old IE versions...
请注意，document.getElementsByClassName在旧的 IE 版本中未实现...
Another way:
其他方式：
document.getElementById('project_user')
.getElementsByTagName('span')[0].innerHTML;
You can use this "patch" to define this function in old browsers:
您可以使用此“补丁”在旧浏览器中定义此功能：
if (!document.getElementsByClassName) {
document.getElementsByClassName = function(classname) {
var elArray = [];
var tmp = document.getElementsByTagName("*");
var regex = new RegExp("(^|\s)" + classname + "(\s|$)");
for (var i = 0; i < tmp.length; i++) {
if (regex.test(tmp[i].className))
elArray.push(tmp[i]);
}
return elArray;
};
}?
Or use a javascript library like jQuerythat implements (almost) all css selectors, example:
或者使用这样的 javascript 库jQuery实现（几乎）所有 css 选择器，例如：
$('.project_username').html();
回答by Sampson
Which Browser Supports Which Method(s)?
哪个浏览器支持哪种方法？
document.getElementByIdonly works when the element has id='targetvalue'. Your example above shows the value being in the classattribute, rather than the id.
document.getElementById仅当元素具有id='targetvalue'. 上面的示例显示了class属性中的值，而不是id.
You could use getElementsByClassName, though this isn't supported in IE8 or lower. There's also document.querySelectorAll, which has slightly better support in IE.
您可以使用getElementsByClassName，尽管这在 IE8 或更低版本中不受支持。还有document.querySelectorAll，它在 IE 中的支持稍好一些。
Mmm, Browser Support-Charts are Pretty
嗯，浏览器支持图表很漂亮
You can check the browser support for various methods of getting elements online at http://www.quirksmode.org/dom/w3c_core.html#gettingelements.
您可以在http://www.quirksmode.org/dom/w3c_core.html#gettingelements 上查看浏览器对各种在线获取元素的方法的支持。
The Verbosity of Doing it Alone
独自做事的冗长
Making a broad cross-browser compatible solution could be verbose:
制作一个广泛的跨浏览器兼容的解决方案可能很冗长：
var parent = document.getElementById("project_user"),
element;
// If the browser supports querySelectorAll, use it.
if ( parent.querySelectorAll ) {
element = parent.querySelectorAll('.project_username')[0];
// Else, if getElementsByClassName is supported, use it.
} else if ( parent.getElementsByClassName ) {
element = parent.getElementsByClassName('project_username')[0];
// Else, roll up our sleeves, let's do this the hard way
} else {
var spans = parent.getElementsByTagName("span"),
spani = spans.length;
while ( spani-- ) {
if ( spans[spani].className === "project_username" ) {
element = spans[spani];
break;
}
}
}
The Brevity of Using Great Tools
使用伟大工具的简洁性
Or you could use something like jQuery to reduce your frustration:
或者你可以使用类似 jQuery 的东西来减少你的挫败感：
var $element = $(".project_username");
回答by Vishal
Try:
尝试：
var project_username = document.getElementById('project_user').getElementsByClassName('project_username')[0].innerHTML;
alert(project_username);
Or using jQuery it is much easier:
或者使用 jQuery 更容易：
var project_username = $('.project_username');
alert(project_username);
回答by Coder
document.getElementsByClassName()is not cross browser compatible like IE 8 doesn't support it, you may have to write your own getElementsByClassName()where it is not supported.
document.getElementsByClassName()不是跨浏览器兼容的，如 IE 8 不支持它，您可能必须在不支持的地方编写自己的getElementsByClassName()。
Here is an alternate:
这是一个替代方案：
var projUser = document.getElementById('project_user');
var projUsername = projUser.getElementsByTagName('span')[0]; // If you need 1st span's content
var userame = projUsername.innerHTML;
You can also write it in one line.
您也可以将其写在一行中。
var userame = document.getElementById('project_user').getElementsByTagName('span')[0].innerHTML;
