如何通过JavaScript获取类的内容
How to get contents of class through JavaScript
我需要使用 JavaScript 来获取用户名,该用户名按以下方式发布:
<div id="project_user">
<p class="project_user">
by <span class="project_username"><?php echo $OwnerName; ?></span>
</p>
</div>
我该怎么做?
我尝试了以下方法,但没有用:
document.getElementById('project_username').innerHTML
您需要按id
选择,而需要按className
选择:
document.getElementsByClassName('project_username')[0].innerHTML
现场演示
请注意,document.getElementsByClassName
在旧的IE版本中没有实现...
另一种方式:
document.getElementById('project_user')
.getElementsByTagName('span')[0].innerHTML;
现场演示
您可以使用此"补丁"在旧浏览器中定义此功能:
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;
};
}
源
或者使用像jQuery
这样的javascript库来实现(几乎(所有css选择器,例如:
$('.project_username').html();
哪个浏览器支持哪种方法?
document.getElementById
仅在元素具有id='targetvalue'
时才有效。上面的示例显示了 class
属性中的值,而不是 id
。
您可以使用 getElementsByClassName
,尽管这在 IE8 或更低版本中不受支持。还有document.querySelectorAll
,它在IE中的支持稍好一些。
嗯,浏览器支持图表很漂亮
您可以在 http://www.quirksmode.org/dom/w3c_core.html#gettingelements 上查看浏览器对各种使元素联机的方法的支持。
独自完成的冗长
制作广泛的跨浏览器兼容解决方案可能很冗长:
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;
}
}
}
使用出色工具的简洁性
或者你可以使用类似jQuery的东西来减少你的挫败感:
var $element = $(".project_username");
尝试:
var project_username = document.getElementById('project_user').getElementsByClassName('project_username')[0].innerHTML;
alert(project_username);
或者使用jQuery要容易得多:
var project_username = $('.project_username');
alert(project_username);
document.getElementsByClassName()
不像IE 8不支持它那样跨浏览器兼容,你可能不得不在不支持的地方编写自己的getElementsByClassName((。
这是一个替代:
var projUser = document.getElementById('project_user');
var projUsername = projUser.getElementsByTagName('span')[0]; // If you need 1st span's content
var userame = projUsername.innerHTML;
您也可以将其写在一行中。
var userame = document.getElementById('project_user').getElementsByTagName('span')[0].innerHTML;
相关文章:
- 在JavaScript中通过索引从对象数组中获取值
- 通过ajax到php文件获取单选按钮值
- 通过id和class属性获取元素
- 通过从节点父级获取所有子级对节点进行排序(获取子级数组)
- Angularjs通过过滤器获取indexOf
- 使用angularjs中的rest调用通过id获取数据
- 如何通过adf中的document.getElementById获取inputText字段值
- 创建一个方法,通过一个窗口进行迭代并获取Titanium中的所有控件
- 通过mvc中的ajax动作链接获取关于成功的响应头
- 如何通过Jquery从具有相同名称但不同索引的输入中获取所有值
- 如何通过javascript或jquerycookie获取网页的刷新次数
- 通过字符串获取JSON对象
- 谷歌地图获取可以通过拖动图钉更改的当前位置
- 如何获取除通过JavaScript添加的文本之外的文本框(Twitch电视聊天)
- angular http获取请求通过服务需要刷新以显示数据
- 除了使用eval/handleAs之外,还有其他方法吗?动态获取脚本(通过XMLHttpRequest)
- 获取PDF通过REST API与头认证令牌,并显示在iframe
- 如何获取经纬度通过代码
- 通过javascript获取当前通过Active Directory认证的用户
- 指令's模板没有't获取's通过编译设置