blocks|key|1426406|text|哪种浏览器支持哪种方法？|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1426407|仅当元素具有id='targetvalue'时，document.getElementById才有效。上面的示例显示了class属性中的值，而不是id中的值。|offset|length|style|CODE|1426408|您可以使用getElementsByClassName，但在IE8或更低版本中不支持。还有document.querySelectorAll，它在IE中的支持稍好一些。|1426409|嗯，浏览器支持-图表很漂亮|1426410|您可以在http://www.quirksmode.org/dom/w3c_core.html#gettingelements上查看浏览器对在线获取元素的各种方法的支持。|1426411|独自做这件事的繁琐|1426412|制定一个广泛的跨浏览器兼容的解决方案可能会很繁琐：|1426413|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;
++++}
++}
}|code-block|syntax|javascript|1426414|使用优秀工具的简洁性|1426415|或者你可以使用像jQuery这样的东西来减轻你的挫败感：|1426416|var+$element+=+$(".project_username");|1426417|entityMap|0|LINK|mutability|MUTABLE|url|http://www.quirksmode.org/dom/w3c_core.html#gettingelements^0|0|6|G|O|N|1N|5|21|2|0|5|M|19|P|0|0|4|1N|0|0|0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|1A|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|1B|8|@$D|1C|E|1D|F|G]|$D|1E|E|1F|F|G]|$D|1G|E|1H|F|G]|$D|1I|E|1J|F|G]]|9|@]|A|$]]|$1|H|3|I|5|6|7|1K|8|@$D|1L|E|1M|F|G]|$D|1N|E|1O|F|G]]|9|@]|A|$]]|$1|J|3|K|5|6|7|1P|8|@]|9|@]|A|$]]|$1|L|3|M|5|6|7|1Q|8|@]|9|@$D|1R|E|1S|1|1T]]|A|$]]|$1|N|3|O|5|6|7|1U|8|@]|9|@]|A|$]]|$1|P|3|Q|5|6|7|1V|8|@]|9|@]|A|$]]|$1|R|3|S|5|T|7|1W|8|@]|9|@]|A|$U|V]]|$1|W|3|X|5|6|7|1X|8|@]|9|@]|A|$]]|$1|Y|3|Z|5|6|7|1Y|8|@]|9|@]|A|$]]|$1|10|3|11|5|T|7|1Z|8|@]|9|@]|A|$U|V]]|$1|12|3|-4|5|6|7|20|8|@]|9|@]|A|$]]]|13|$14|$5|15|16|17|A|$18|19]]]]

<h3>Which Browser Supports Which Method(s)?</h3>

<code>document.getElementById</code> only works when the element has <code>id='targetvalue'</code>. Your example above shows the value being in the <code>class</code> attribute, rather than the <code>id</code>.

You could use <code>getElementsByClassName</code>, though this isn't supported in IE8 or lower. There's also <code>document.querySelectorAll</code>, which has slightly better support in IE.

<h3>Mmm, Browser Support-Charts are Pretty</h3>

You can check the browser support for various methods of getting elements online at <a href="http://www.quirksmode.org/dom/w3c_core.html#gettingelements" rel="nofollow">http://www.quirksmode.org/dom/w3c_core.html#gettingelements</a>.

<h3>The Verbosity of Doing it Alone</h3>

Making a broad cross-browser compatible solution could be verbose:

<pre><code>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;
 }
 }
}
</code></pre>

<h3>The Brevity of Using Great Tools</h3>

Or you could use something like jQuery to reduce your frustration:

<pre><code>var $element = $(".project_username");
</code></pre>

blocks|key|1427071|text|当您需要按className选择时，您可以选择by+id|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|1427072|document.getElementsByClassName('project_username')[0].innerHTML|code-block|syntax|javascript|1427073|1427074|请注意，在旧的IE版本中没有实现document.getElementsByClassName+...|1427075|1427076|另一种方式：|1427077|document.getElementById('project_user')
++++++++.getElementsByTagName('span')[0].innerHTML;|1427078|1427079|1427080|您可以使用此“补丁”在旧浏览器中定义此函数：|1427081|if+(!document.getElementsByClassName)+{
++++document.getElementsByClassName+=+function(classname)+{
++++++++var+elArray+=+[];
++++++++var+tmp+=+document.getElementsByTagName("*");
++++++++var+regex+=+new+RegExp("(%5E%7C\\s)"+%2B+classname+%2B+"(\\s%7C$)");
++++++++for+(var+i+=+0;+i+<+tmp.length;+i%2B%2B)+{
++++++++++++if+(regex.test(tmp[i].className))
++++++++++++++++elArray.push(tmp[i]);
++++++++}

++++++++return+elArray;
++++};
}​|1427082|1427083|1427084|或者使用实现(几乎)所有css选择器的javascript库，例如：jQuery：|1427085|$('.project_username').html();|1427086|entityMap^0|5|9|Q|2|0|0|0|G|V|0|0|0|0|0|0|0|0|0|0|Y|6|0|0^^$0|@$1|2|3|4|5|6|7|16|8|@$9|17|A|18|B|C]|$9|19|A|1A|B|C]]|D|@]|E|$]]|$1|F|3|G|5|H|7|1B|8|@]|D|@]|E|$I|J]]|$1|K|3|-4|5|6|7|1C|8|@]|D|@]|E|$]]|$1|L|3|M|5|6|7|1D|8|@$9|1E|A|1F|B|C]]|D|@]|E|$]]|$1|N|3|-4|5|6|7|1G|8|@]|D|@]|E|$]]|$1|O|3|P|5|6|7|1H|8|@]|D|@]|E|$]]|$1|Q|3|R|5|H|7|1I|8|@]|D|@]|E|$I|J]]|$1|S|3|-4|5|6|7|1J|8|@]|D|@]|E|$]]|$1|T|3|-4|5|6|7|1K|8|@]|D|@]|E|$]]|$1|U|3|V|5|6|7|1L|8|@]|D|@]|E|$]]|$1|W|3|X|5|H|7|1M|8|@]|D|@]|E|$I|J]]|$1|Y|3|-4|5|6|7|1N|8|@]|D|@]|E|$]]|$1|Z|3|-4|5|6|7|1O|8|@]|D|@]|E|$]]|$1|10|3|11|5|6|7|1P|8|@$9|1Q|A|1R|B|C]]|D|@]|E|$]]|$1|12|3|13|5|H|7|1S|8|@]|D|@]|E|$I|J]]|$1|14|3|-4|5|6|7|1T|8|@]|D|@]|E|$]]]|15|$]]

You select by <code>id</code> while you need to select by the <code>className</code>:

<pre><code>document.getElementsByClassName('project_username')[0].innerHTML
</code></pre>

<a href="http://jsfiddle.net/QVq9z/1/" rel="noreferrer">Live DEMO</a> 

Note that <code>document.getElementsByClassName</code> is not implemented in old IE versions...

<hr>

Another way:

<pre><code>document.getElementById('project_user')
 .getElementsByTagName('span')[0].innerHTML;
</code></pre>

<a href="http://jsfiddle.net/QVq9z/" rel="noreferrer">Live DEMO</a>

<hr>

You can use this "patch" to define this function in old browsers:

<pre><code>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 &lt; tmp.length; i++) {
 if (regex.test(tmp[i].className))
 elArray.push(tmp[i]);
 }

 return elArray;
 };
}​
</code></pre>

<a href="https://stackoverflow.com/a/5149557/601179">source</a>

<hr>

Or use a javascript library like <code>jQuery</code> that implements (almost) all css selectors, example:

<pre><code>$('.project_username').html();
</code></pre>

blocks|key|748008|text|尝试：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|748009|var+project_username+=+document.getElementById('project_user').getElementsByClassName('project_username')[0].innerHTML;
alert(project_username);|code-block|syntax|javascript|748010|或者使用jQuery要容易得多：|748011|var+project_username+=+$('.project_username');
alert(project_username);|748012|entityMap^0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|M|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|N|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|O|8|@]|9|@]|A|$]]|$1|I|3|J|5|D|7|P|8|@]|9|@]|A|$E|F]]|$1|K|3|-4|5|6|7|Q|8|@]|9|@]|A|$]]]|L|$]]

Try:

<pre><code>var project_username = document.getElementById('project_user').getElementsByClassName('project_username')[0].innerHTML;
alert(project_username);
</code></pre>

Or using jQuery it is much easier:

<pre><code>var project_username = $('.project_username');
alert(project_username);
</code></pre>

blocks|key|748042|text|document.getElementsByClassName()不是跨浏览器兼容的，就像IE8不支持它一样，你可能不得不在不支持它的地方编写自己的getElementsByClassName()。|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|748043|下面是一个备选方案：|748044|var+projUser+=+document.getElementById('project_user');
var+projUsername+=+projUser.getElementsByTagName('span')[0];+//+If+you+need+1st+span's+content
var+userame+=+projUsername.innerHTML;|code-block|syntax|javascript|748045|您也可以将其写在一行中。|748046|var+userame+=+document.getElementById('project_user').getElementsByTagName('span')[0].innerHTML;|748047|entityMap^0|0|X|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|S|8|@$9|T|A|U|B|C]]|D|@]|E|$]]|$1|F|3|G|5|6|7|V|8|@]|D|@]|E|$]]|$1|H|3|I|5|J|7|W|8|@]|D|@]|E|$K|L]]|$1|M|3|N|5|6|7|X|8|@]|D|@]|E|$]]|$1|O|3|P|5|J|7|Y|8|@]|D|@]|E|$K|L]]|$1|Q|3|-4|5|6|7|Z|8|@]|D|@]|E|$]]]|R|$]]

<code>document.getElementsByClassName()</code> 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.

Here is an alternate:

<pre><code>var projUser = document.getElementById('project_user');
var projUsername = projUser.getElementsByTagName('span')[0]; // If you need 1st span's content
var userame = projUsername.innerHTML;
</code></pre>

You can also write it in one line.

<pre><code>var userame = document.getElementById('project_user').getElementsByTagName('span')[0].innerHTML;
</code></pre>

I need to use JavaScript to get the username which is posted in the following way:

<pre><code>&lt;div id="project_user"&gt;
 &lt;p class="project_user"&gt;
 by &lt;span class="project_username"&gt;&lt;?php echo $OwnerName; ?&gt;&lt;/span&gt;
 &lt;/p&gt;
&lt;/div&gt;
</code></pre>

How do I do it?

I tried the following but it didn't work:

<pre><code>document.getElementById('project_username').innerHTML
</code></pre>

How to get contents of class through JavaScript

翻译质量差，导致语言生硬或混乱。

没有提供实际的解决方法或示例。

解答不清晰，无法理解或解决问题。

页面排版不美观，阅读体验差。

文章

问答

视频

学习中心

腾讯云实验室

直播

竞赛

腾讯云代码分析专区

腾讯iOA零信任安全管理系统专区

腾讯云架构师技术同盟交流圈

腾讯云数据库专区

腾讯云顾问专区

腾讯云原生专区

腾讯混元专区

腾讯云TCE专区

腾讯云Lighthouse专区

腾讯云HAI专区

腾讯云Edgeone专区

腾讯云存储专区

腾讯云智能专区

腾讯轻联专区 

腾讯云开发专区

TAPD专区

腾讯轻量云游戏服专区

腾讯云最具价值专家

腾讯云架构师技术同盟

腾讯云创作之星

腾讯云开发者先锋

腾讯云代码助手

云原生构建

TAPD 敏捷项目管理

Cloud Studio

SDK中心

API中心

命令行工具

涵盖代码开发、场景应用、自动测试全流程，助你从零构建专属AI助手

一站式MCP教程库，解锁AI应用新玩法

我需要使用JavaScript来获取用户名，该用户名通过以下方式发布：<div id="project_user"> by <?php echo $OwnerName; ?>...

问如何通过JavaScript获取类的内容
EN

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问如何通过JavaScript获取类的内容EN