如何通过JavaScript获取类的内容

Question

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

- BrokenCode

Answer 1

您应该通过选择 className 来选择元素，而不是选择 id ：

document.getElementsByClassName('project_username')[0].innerHTML

实时演示

请注意，在旧版的IE版本中没有实现document.getElementsByClassName...

---

另一种方法：

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这样实现（几乎）所有css选择器的JavaScript库，例如：源

$('.project_username').html();

- gdoron is supporting Monica

---

非常感谢大家。我选择了可能有些懒惰的方法，加入了jQuery，效果非常好。 - BrokenCode

@Jashwant。我认为一个好的程序员是一个能够解决问题的程序员...而当你是一名JavaScript开发者时，你需要有很多这样的人才... :) - gdoron

没错，当你成为CSS开发者后，你就开始信奉上帝了。（清除缓存......刷新页面......求求上帝了，这次一定可以......天啊，又出问题了 :D） - Jashwant

我尝试使用IE打开https://security.googleblog.com/2015/09/https-support-coming-to-blogspot.html。我使用检查元素并想要显示带有其值的警报。 alert(document.getElementsByClassName('post-header')[0].innerHTML);但是什么也没发生。你能告诉我为什么吗？ - Raspi Surya

@RaspiSurya 能否创建一个带有问题的 jsfiddle？ - gdoron

Answer 2

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

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");

- Sampson

---

请注意，页面中可能会有大量的<span>标签，最好的做法是通过选择其父元素来减少选择范围。 - gdoron

@gdoron 你说得对；我本意是故意省略它以保持代码简洁，但后来意识到它并不会增加太多冗余，所以我已经把它加回去了。 - Sampson

Answer 3

尝试：

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

或者使用jQuery更容易：

var project_username = $('.project_username');
alert(project_username);

- Vishal

Answer 4

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;

- Software Engineer