5

我需要使用 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
4

4 回答 4

9

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;
    };
}​

来源

或者使用这样的 javascript 库jQuery来实现（几乎）所有 css 选择器，例如：

$('.project_username').html();
于 2012-05-20T18:11:20.063 回答
1

哪种浏览器支持哪种方法？

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");
于 2012-05-20T18:11:01.197 回答
0

尝试：

var project_username = document.getElementById('project_user').getElementsByClassName('project_username')[0].innerHTML;
alert(project_username);

或者使用 jQuery 更容易：

var project_username = $('.project_username');
alert(project_username);
于 2012-05-20T18:15:09.743 回答
0

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;
于 2012-05-20T18:47:06.567 回答