blocks|key|272493|text|使用doc.childNodes遍历每个span，然后过滤className等于4的那个|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|272494|var+doc+=+document.getElementById("test");
var+notes+=+null;
for+(var+i+=+0;+i+<+doc.childNodes.length;+i%2B%2B)+{
++++if+(doc.childNodes[i].className+==+"4")+{
++++++notes+=+doc.childNodes[i];
++++++break;
++++}++++++++
}|code-block|syntax|javascript|272495|​|272496|entityMap^0|2|E|K|4|T|9|14|1|0|0|0^^$0|@$1|2|3|4|5|6|7|O|8|@$9|P|A|Q|B|C]|$9|R|A|S|B|C]|$9|T|A|U|B|C]|$9|V|A|W|B|C]]|D|@]|E|$]]|$1|F|3|G|5|H|7|X|8|@]|D|@]|E|$I|J]]|$1|K|3|L|5|6|7|Y|8|@]|D|@]|E|$]]|$1|M|3|-4|5|6|7|Z|8|@]|D|@]|E|$]]]|N|$]]

<p>Use <code>doc.childNodes</code> to iterate through each <code>span</code>, and then filter the one whose <code>className</code> equals <code>4</code>:</p>

<pre><code>var doc = document.getElementById("test");
var notes = null;
for (var i = 0; i &lt; doc.childNodes.length; i++) {
    if (doc.childNodes[i].className == "4") {
      notes = doc.childNodes[i];
      break;
    }        
}
</code></pre>

<p>​</p>


blocks|key|272790|text|使用querySelector和querySelectorAll|type|unstyled|depth|inlineStyleRanges|entityRanges|data|272791|var+testContainer+=+document.querySelector('#test');
var+fourChildNode+=+testContainer.querySelector('.four');|code-block|syntax|javascript|272792|IE9和upper|272793|entityMap^0|0|0|0^^$0|@$1|2|3|4|5|6|7|K|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|L|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|M|8|@]|9|@]|A|$]]|$1|I|3|-4|5|6|7|N|8|@]|9|@]|A|$]]]|J|$]]

<p>Use querySelector and querySelectorAll</p>
<pre><code>var testContainer = document.querySelector('#test');
var fourChildNode = testContainer.querySelector('.four');
</code></pre>
<p>IE9 and upper</p>


blocks|key|490052|text|使用element.querySelector()。让我们假设：'myElement‘是你已经拥有的父元素。'sonClassName‘是你要找的孩子的班级。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|490053|let+child+=+myElement.querySelector('.sonClassName');|code-block|syntax|javascript|490054|如需更多信息，请访问：https://developer.mozilla.org/en-US/docs/Web/API/Element/querySelector。|offset|length|490055|entityMap|0|LINK|mutability|MUTABLE|url|https://developer.mozilla.org/en-US/docs/Web/API/Element/querySelector^0|0|0|B|1Y|0|0^^$0|@$1|2|3|4|5|6|7|S|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|T|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|U|8|@]|9|@$I|V|J|W|1|X]]|A|$]]|$1|K|3|-4|5|6|7|Y|8|@]|9|@]|A|$]]]|L|$M|$5|N|O|P|A|$Q|R]]]]

<p>Use element.querySelector().
Lets assume:
'myElement' is the parent element you already have.
'sonClassName' is the class of the child you are looking for.</p>

<pre><code>let child = myElement.querySelector('.sonClassName');
</code></pre>

<p>For more info, visit: <a href="https://developer.mozilla.org/en-US/docs/Web/API/Element/querySelector" rel="noreferrer">https://developer.mozilla.org/en-US/docs/Web/API/Element/querySelector</a></p>


blocks|key|272971|text|现代解决方案|type|unstyled|depth|inlineStyleRanges|entityRanges|data|272972|const+context+=+document.getElementById('context');
const+selected+=+context.querySelectorAll(':scope+>+div');|code-block|syntax|javascript|272973|documentation|offset|length|272974|entityMap|0|LINK|mutability|MUTABLE|url|https://developer.mozilla.org/en-US/docs/Web/CSS/:scope#Browser_compatibility^0|0|0|0|D|0|0^^$0|@$1|2|3|4|5|6|7|S|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|T|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|U|8|@]|9|@$I|V|J|W|1|X]]|A|$]]|$1|K|3|-4|5|6|7|Y|8|@]|9|@]|A|$]]]|L|$M|$5|N|O|P|A|$Q|R]]]]

<p>Modern solution</p>
<pre><code>const context = document.getElementById('context');
const selected = context.querySelectorAll(':scope &gt; div');
</code></pre>
<p><a href="https://developer.mozilla.org/en-US/docs/Web/CSS/:scope#Browser_compatibility" rel="noreferrer">documentation</a></p>


blocks|key|489672|text|您可以尝试：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|489673|notes+=+doc.querySelectorAll('.4');|code-block|syntax|javascript|489674|或|489675|notes+=+doc.getElementsByTagName('*');
for+(var+i+=+0;+i+<+notes.length;+i%2B%2B)+{+
++++if+(notes[i].getAttribute('class')+==+'4')+{
++++}
}|489676|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|$]]

<p>You could try:</p>

<pre><code>notes = doc.querySelectorAll('.4');
</code></pre>

<p>or</p>

<pre><code>notes = doc.getElementsByTagName('*');
for (var i = 0; i &lt; notes.length; i++) { 
    if (notes[i].getAttribute('class') == '4') {
    }
}
</code></pre>


blocks|key|272607|text|在我看来，你似乎想要第四个跨度。如果是这样的话，你可以这样做：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|272608|document.getElementById("test").childNodes[3]|code-block|syntax|javascript|272609|或|272610|document.getElementById("test").getElementsByTagName("span")[3]|272611|最后一个确保不会有任何隐藏的节点会把它搞乱。|272612|entityMap^0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|O|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|P|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|Q|8|@]|9|@]|A|$]]|$1|I|3|J|5|D|7|R|8|@]|9|@]|A|$E|F]]|$1|K|3|L|5|6|7|S|8|@]|9|@]|A|$]]|$1|M|3|-4|5|6|7|T|8|@]|9|@]|A|$]]]|N|$]]

<p>To me it seems like you want the fourth span. If so, you can just do this:</p>

<pre><code>document.getElementById("test").childNodes[3]
</code></pre>

<p>or</p>

<pre><code>document.getElementById("test").getElementsByTagName("span")[3]
</code></pre>

<p>This last one ensures that there are not any hidden nodes that could mess it up.</p>


blocks|key|272566|text|将id的名称与getElementById一起使用，前面没有#符号。然后，您可以使用getElementsByTagName获取span子节点，并遍历它们以找到具有正确类的子节点：|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|272567|var+doc+=+document.getElementById('test');

var+c+=+doc.getElementsByTagName('span');

var+e+=+null;
for+(var+i+=+0;+i+<+c.length;+i%2B%2B)+{
++++if+(c[i].className+==+'4')+{
++++++++e+=+c[i];
++++++++break;
++++}
}

if+(e+!=+null)+{
++++alert(e.innerHTML);
}|code-block|syntax|javascript|272568|演示：http://jsfiddle.net/Guffa/xB62U/|272569|entityMap|0|LINK|mutability|MUTABLE|url|http://jsfiddle.net/Guffa/xB62U/^0|7|E|U|1|16|K|1S|4|0|0|3|W|0|0^^$0|@$1|2|3|4|5|6|7|U|8|@$9|V|A|W|B|C]|$9|X|A|Y|B|C]|$9|Z|A|10|B|C]|$9|11|A|12|B|C]]|D|@]|E|$]]|$1|F|3|G|5|H|7|13|8|@]|D|@]|E|$I|J]]|$1|K|3|L|5|6|7|14|8|@]|D|@$9|15|A|16|1|17]]|E|$]]|$1|M|3|-4|5|6|7|18|8|@]|D|@]|E|$]]]|N|$O|$5|P|Q|R|E|$S|T]]]]

<p>Use the name of the id with the <code>getElementById</code>, no <code>#</code> sign before it. Then you can get the <code>span</code> child nodes using <code>getElementsByTagName</code>, and loop through them to find the one with the right class:</p>

<pre><code>var doc = document.getElementById('test');

var c = doc.getElementsByTagName('span');

var e = null;
for (var i = 0; i &lt; c.length; i++) {
    if (c[i].className == '4') {
        e = c[i];
        break;
    }
}

if (e != null) {
    alert(e.innerHTML);
}
</code></pre>

<p>Demo: <a href="http://jsfiddle.net/Guffa/xB62U/" rel="noreferrer">http://jsfiddle.net/Guffa/xB62U/</a></p>


blocks|key|490127|text|使用querySelector|type|unstyled|depth|inlineStyleRanges|entityRanges|data|490128|​|490129|var+doc=document.getElementById("test");
console.log(doc.querySelector('.two').innerHTML)|code-block|syntax|javascript|490130|<div+id="test">
+<span+class="one"></span>
+<span+class="two">two</span>
+<span+class="three"></span>
+<span+class="four"></span>
</div>|490131|使用querySelectorAll|490132|490133|490134|var+doc=document.getElementById("test");
console.log(doc.querySelectorAll('*')[1].innerHTML)|490135|<div+id="test">
+<span+class="one"></span>
+<span+class="two">two</span>
+<span+class="three"></span>
+<span+class="four"></span>
</div>|490136|490137|使用getElementsByTagNames|490138|490139|var+doc=document.getElementById("test");
console.log(doc.getElementsByTagName("SPAN")[1].innerHTML);|490140|<div+id="test">
+<span+class="one"></span>
+<span+class="two">two</span>
+<span+class="three"></span>
+<span+class="four"></span>
</div>
<span>ss</span>|490141|490142|使用getElementsByClassName|490143|490144|var+doc=document.getElementById("test");
console.log(doc.getElementsByClassName('two')[0].innerHTML)|490145|<div+id="test">
+<span+class="one"></span>
+<span+class="two">two</span>
+<span+class="three"></span>
+<span+class="four"></span>
</div>|490146|490147|entityMap^0|0|0|0|0|0|0|0|0|0|0|0|0|0|0|0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|1B|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|1C|8|@]|9|@]|A|$]]|$1|D|3|E|5|F|7|1D|8|@]|9|@]|A|$G|H]]|$1|I|3|J|5|F|7|1E|8|@]|9|@]|A|$G|H]]|$1|K|3|L|5|6|7|1F|8|@]|9|@]|A|$]]|$1|M|3|C|5|6|7|1G|8|@]|9|@]|A|$]]|$1|N|3|C|5|6|7|1H|8|@]|9|@]|A|$]]|$1|O|3|P|5|F|7|1I|8|@]|9|@]|A|$G|H]]|$1|Q|3|R|5|F|7|1J|8|@]|9|@]|A|$G|H]]|$1|S|3|C|5|6|7|1K|8|@]|9|@]|A|$]]|$1|T|3|U|5|6|7|1L|8|@]|9|@]|A|$]]|$1|V|3|C|5|6|7|1M|8|@]|9|@]|A|$]]|$1|W|3|X|5|F|7|1N|8|@]|9|@]|A|$G|H]]|$1|Y|3|Z|5|F|7|1O|8|@]|9|@]|A|$G|H]]|$1|10|3|C|5|6|7|1P|8|@]|9|@]|A|$]]|$1|11|3|12|5|6|7|1Q|8|@]|9|@]|A|$]]|$1|13|3|C|5|6|7|1R|8|@]|9|@]|A|$]]|$1|14|3|15|5|F|7|1S|8|@]|9|@]|A|$G|H]]|$1|16|3|17|5|F|7|1T|8|@]|9|@]|A|$G|H]]|$1|18|3|C|5|6|7|1U|8|@]|9|@]|A|$]]|$1|19|3|-4|5|6|7|1V|8|@]|9|@]|A|$]]]|1A|$]]

<p>using querySelector</p>
<p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
<div class="snippet-code">
<pre class="snippet-code-js lang-js prettyprint-override"><code>var doc=document.getElementById("test");
console.log(doc.querySelector('.two').innerHTML)</code></pre>
<pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div id="test"&gt;
 &lt;span class="one"&gt;&lt;/span&gt;
 &lt;span class="two"&gt;two&lt;/span&gt;
 &lt;span class="three"&gt;&lt;/span&gt;
 &lt;span class="four"&gt;&lt;/span&gt;
&lt;/div&gt;</code></pre>
</div>
</div>

Using querySelectorAll</p>
<p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
<div class="snippet-code">
<pre class="snippet-code-js lang-js prettyprint-override"><code>var doc=document.getElementById("test");
console.log(doc.querySelectorAll('*')[1].innerHTML)</code></pre>
<pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div id="test"&gt;
 &lt;span class="one"&gt;&lt;/span&gt;
 &lt;span class="two"&gt;two&lt;/span&gt;
 &lt;span class="three"&gt;&lt;/span&gt;
 &lt;span class="four"&gt;&lt;/span&gt;
&lt;/div&gt;</code></pre>
</div>
</div>
</p>
<p>using getElementsByTagNames</p>
<p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
<div class="snippet-code">
<pre class="snippet-code-js lang-js prettyprint-override"><code>var doc=document.getElementById("test");
console.log(doc.getElementsByTagName("SPAN")[1].innerHTML);</code></pre>
<pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div id="test"&gt;
 &lt;span class="one"&gt;&lt;/span&gt;
 &lt;span class="two"&gt;two&lt;/span&gt;
 &lt;span class="three"&gt;&lt;/span&gt;
 &lt;span class="four"&gt;&lt;/span&gt;
&lt;/div&gt;
&lt;span&gt;ss&lt;/span&gt;</code></pre>
</div>
</div>
</p>
<p>Using getElementsByClassName</p>
<p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
<div class="snippet-code">
<pre class="snippet-code-js lang-js prettyprint-override"><code>var doc=document.getElementById("test");
console.log(doc.getElementsByClassName('two')[0].innerHTML)</code></pre>
<pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div id="test"&gt;
 &lt;span class="one"&gt;&lt;/span&gt;
 &lt;span class="two"&gt;two&lt;/span&gt;
 &lt;span class="three"&gt;&lt;/span&gt;
 &lt;span class="four"&gt;&lt;/span&gt;
&lt;/div&gt;</code></pre>
</div>
</div>
</p>


blocks|key|272945|text|您可以通过添加以下行来获取父类。如果你有一个id，使用getElementById会更容易。尽管如此，|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|272946|var+parentNode+=+document.getElementsByClassName("progress__container")[0];|code-block|syntax|javascript|272947|然后，您可以在父<div>上使用querySelectorAll来获取类为.progress__marker的所有匹配div|272948|var+progressNodes+=+progressContainer.querySelectorAll('.progress__marker');|272949|querySelectorAll将获取每个具有progress__marker类的div|272950|entityMap^0|R|E|0|0|8|5|G|G|11|H|1N|3|0|0|0|G|N|G|15|3|0^^$0|@$1|2|3|4|5|6|7|S|8|@$9|T|A|U|B|C]]|D|@]|E|$]]|$1|F|3|G|5|H|7|V|8|@]|D|@]|E|$I|J]]|$1|K|3|L|5|6|7|W|8|@$9|X|A|Y|B|C]|$9|Z|A|10|B|C]|$9|11|A|12|B|C]|$9|13|A|14|B|C]]|D|@]|E|$]]|$1|M|3|N|5|H|7|15|8|@]|D|@]|E|$I|J]]|$1|O|3|P|5|6|7|16|8|@$9|17|A|18|B|C]|$9|19|A|1A|B|C]|$9|1B|A|1C|B|C]]|D|@]|E|$]]|$1|Q|3|-4|5|6|7|1D|8|@]|D|@]|E|$]]]|R|$]]

<p>You can fetch the parent class by adding the line below. If you had an id, it would be easier with <code>getElementById</code>. Nonetheless, </p>

<pre><code>var parentNode = document.getElementsByClassName("progress__container")[0];
</code></pre>

<p>Then you can use <code>querySelectorAll</code> on the parent <code>&lt;div&gt;</code> to fetch all matching <code>div</code>s with class <code>.progress__marker</code></p>

<pre><code>var progressNodes = progressContainer.querySelectorAll('.progress__marker');
</code></pre>

<p><code>querySelectorAll</code> will fetch every <code>div</code> with the class of <code>progress__marker</code></p>


blocks|key|273117|text|另一种方式|type|unstyled|depth|inlineStyleRanges|entityRanges|data|273118|const+result+=+[...(parentElement.children)].find(child+=>+{
++return+child.classList.contains('some-class-name');
});|code-block|syntax|javascript|273119|首先，我们扩展NodeList的元素以将其转换为Array，这样我们就可以使用find()方法。最后，find()将向我们返回其classList属性包含给定类名的第一个元素。|offset|length|style|CODE|273120|entityMap^0|0|0|7|8|O|5|13|6|1F|6|1S|9|0^^$0|@$1|2|3|4|5|6|7|O|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|P|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|Q|8|@$I|R|J|S|K|L]|$I|T|J|U|K|L]|$I|V|J|W|K|L]|$I|X|J|Y|K|L]|$I|Z|J|10|K|L]]|9|@]|A|$]]|$1|M|3|-4|5|6|7|11|8|@]|9|@]|A|$]]]|N|$]]

<p>Another way</p>
<pre><code>const result = [...(parentElement.children)].find(child =&gt; {
  return child.classList.contains('some-class-name');
});
</code></pre>
<p>First we spread the elements of the <code>NodeList</code> to turn it into an <code>Array</code> so we can make use of the <code>find()</code> method. Lastly, <code>find()</code> will return to us the first element whose <code>classList</code> property contains the given class name.</p>


blocks|key|272728|text|这是一个相对简单的递归解决方案。我认为广度优先的搜索在这里是合适的。这将返回与找到的类匹配的第一个元素。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|272729|function+getDescendantWithClass(element,+clName)+{
++++var+children+=+element.childNodes;
++++for+(var+i+=+0;+i+<+children.length;+i%2B%2B)+{
++++++++if+(children[i].className+&&
++++++++++++children[i].className.split('+').indexOf(clName)+>=+0)+{
++++++++++++return+children[i];
+++++++++}
+++++}
+++++for+(var+i+=+0;+i+<+children.length;+i%2B%2B)+{
+++++++++var+match+=+getDescendantWithClass(children[i],+clName);
+++++++++if+(match+!==+null)+{
+++++++++++++return+match;
+++++++++}
+++++}
+++++return+null;
}|code-block|syntax|javascript|272730|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|J|8|@]|9|@]|A|$E|F]]|$1|G|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|H|$]]

<p>Here is a relatively simple recursive solution.  I think a breadth-first search is appropriate here.  This will return the first element matching the class that is found.</p>

<pre><code>function getDescendantWithClass(element, clName) {
    var children = element.childNodes;
    for (var i = 0; i &lt; children.length; i++) {
        if (children[i].className &amp;&amp;
            children[i].className.split(' ').indexOf(clName) &gt;= 0) {
            return children[i];
         }
     }
     for (var i = 0; i &lt; children.length; i++) {
         var match = getDescendantWithClass(children[i], clName);
         if (match !== null) {
             return match;
         }
     }
     return null;
}
</code></pre>


blocks|key|490184|text|我相信这将最好地回答你的问题。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|490185|document.querySelector('*+>+span.four')|code-block|syntax|javascript|490186|这将匹配它找到的第一个子元素(任何父元素)，该元素是一个跨度，并且还设置了一个类“four|490187|但是，由于在您的示例中还有一个父元素，您可以通过id检索该元素，因此您也可以使用下面的代码|490188|document.querySelector('#test+>+span.four')|490189|如果您将父元素保存在变量中，并且希望搜索该元素的子树，那么使用:scope可能是您的最佳选择，正如Billizzard已经提到的那样|offset|length|style|CODE|490190|doc.querySelector(':scope+>+span.four');|490191|额外的一点:如果您要查找的子元素不是直接子后代，但在子树下的某个位置，您实际上可以省略>，如下所示|490192|document.querySelector('#test+span.four')|490193|entityMap^0|0|0|0|0|0|V|6|0|0|17|1|0|0^^$0|@$1|2|3|4|5|6|7|10|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|11|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|12|8|@]|9|@]|A|$]]|$1|I|3|J|5|6|7|13|8|@]|9|@]|A|$]]|$1|K|3|L|5|D|7|14|8|@]|9|@]|A|$E|F]]|$1|M|3|N|5|6|7|15|8|@$O|16|P|17|Q|R]]|9|@]|A|$]]|$1|S|3|T|5|D|7|18|8|@]|9|@]|A|$E|F]]|$1|U|3|V|5|6|7|19|8|@$O|1A|P|1B|Q|R]]|9|@]|A|$]]|$1|W|3|X|5|D|7|1C|8|@]|9|@]|A|$E|F]]|$1|Y|3|-4|5|6|7|1D|8|@]|9|@]|A|$]]]|Z|$]]

<p>I believe this would answer your question best</p>
<pre><code>document.querySelector('* &gt; span.four')
</code></pre>
<p>This will match the first child element (of any parent) it finds that is a span and also has a class &quot;four&quot; set to it</p>
<p>However since in your example you also had a parent element which you are able to retrieve by id, you could also use this instead</p>
<pre><code>document.querySelector('#test &gt; span.four')
</code></pre>
<p>If you have a parent element saved in a variable like in your example, and you wish to search the subtree of that element, using <code>:scope</code>, as Billizzard has mentioned already, is probably your best choice</p>
<pre><code>doc.querySelector(':scope &gt; span.four');
</code></pre>
<p>Little extra: If the child element you are looking for isn't a direct child descendent, but somewhere further down the subtree, you can actually just omit the <code>&gt;</code> like so</p>
<pre><code>document.querySelector('#test span.four')
</code></pre>


blocks|key|489963|text|2018年6月ES6更新|type|unstyled|depth|inlineStyleRanges|entityRanges|data|489964|++++const+doc+=+document.getElementById('test');
++++let+notes+=+null;
++++for+(const+value+of+doc)+{
++++++++if+(value.className+===+'4')+{
++++++++++++notes+=+value;
++++++++++++break;
++++++++}++++
++++}|code-block|syntax|javascript|489965|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|J|8|@]|9|@]|A|$E|F]]|$1|G|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|H|$]]

<p>June 2018 update to ES6</p>

<pre><code>    const doc = document.getElementById('test');
    let notes = null;
    for (const value of doc) {
        if (value.className === '4') {
            notes = value;
            break;
        }    
    }
</code></pre>


blocks|key|489721|text|YUI2有一个cross-browser+implementation+of+getElementsByClassName。|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|489722|entityMap|0|LINK|mutability|MUTABLE|url|http://developer.yahoo.com/yui/examples/dom/getelementsbyclassname.html^0|13|M|7|1I|0|0^^$0|@$1|2|3|4|5|6|7|N|8|@$9|O|A|P|B|C]]|D|@$9|Q|A|R|1|S]]|E|$]]|$1|F|3|-4|5|6|7|T|8|@]|D|@]|E|$]]]|G|$H|$5|I|J|K|E|$L|M]]]]

<p>YUI2 has a <a href="http://developer.yahoo.com/yui/examples/dom/getelementsbyclassname.html" rel="nofollow">cross-browser implementation of <code>getElementsByClassName</code></a>.</p>


blocks|key|489764|text|下面是我如何使用YUI选择器完成的。感谢Hank+Gay的建议。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|489765|notes+=+YAHOO.util.Dom.getElementsByClassName('four','span','test');|code-block|syntax|javascript|489766|其中four+=+classname，span+=元素类型/标记名，test+=父id。|489767|entityMap^0|0|0|0^^$0|@$1|2|3|4|5|6|7|K|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|L|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|M|8|@]|9|@]|A|$]]|$1|I|3|-4|5|6|7|N|8|@]|9|@]|A|$]]]|J|$]]

<p>Here is how I did it using the YUI selectors. Thanks to Hank Gay's suggestion.</p>

<pre><code>notes = YAHOO.util.Dom.getElementsByClassName('four','span','test');
</code></pre>

<p>where four = classname, span = the element type/tag name, and test = the parent id.</p>


blocks|key|489772|text|使用here中的YAHOO.util.Dom.getElementsByClassName()。|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|489773|entityMap|0|LINK|mutability|MUTABLE|url|http://developer.yahoo.com/yui/docs/YAHOO.util.Dom.html#method_getElementsByClassName^0|8|13|2|4|0|0^^$0|@$1|2|3|4|5|6|7|N|8|@$9|O|A|P|B|C]]|D|@$9|Q|A|R|1|S]]|E|$]]|$1|F|3|-4|5|6|7|T|8|@]|D|@]|E|$]]]|G|$H|$5|I|J|K|E|$L|M]]]]

<p>Use <code>YAHOO.util.Dom.getElementsByClassName()</code> from <a href="http://developer.yahoo.com/yui/docs/YAHOO.util.Dom.html#method_getElementsByClassName" rel="nofollow">here</a>.</p>


<p>I'm trying to get the child span that has a class = 4. Here is an example element:</p>

<pre><code>&lt;div id="test"&gt;
 &lt;span class="one"&gt;&lt;/span&gt;
 &lt;span class="two"&gt;&lt;/span&gt;
 &lt;span class="three"&gt;&lt;/span&gt;
 &lt;span class="four"&gt;&lt;/span&gt;
&lt;/div&gt;
</code></pre>

<p>The tools I have available are JS and YUI2. I can do something like this:</p>

<pre><code>doc = document.getElementById('test');
notes = doc.getElementsByClassName('four');

//or

doc = YAHOO.util.Dom.get('#test');
notes = doc.getElementsByClassName('four');
</code></pre>

<p>These do not work in IE. I get an error that the object (doc) doesn't support this method or property (getElementsByClassName). I've tried a few examples of cross browser implementations of getElementsByClassName but I could not get them to work and still got that error.</p>

<p>I think what I need is a cross browser getElementsByClassName or I need to use doc.getElementsByTagName('span') and loop through until I find class 4. I'm not sure how to do that though. </p>


How to get child element by class name?

我正在尝试获取class = 4的子跨度。下面是一个示例元素：<div id="test"> <span class="one"></span> <span class="two"></span> <span class="three"></span> <span class="four"></span></div>我可用的工具是JS和YUI2。我可以这样做：doc = document.getE

问如何通过类名获取子元素？
EN

回答 16

Stack Overflow用户

Stack Overflow用户

Stack Overflow用户

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问如何通过类名获取子元素？EN

回答 16

Stack Overflow用户

Stack Overflow用户

Stack Overflow用户

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问如何通过类名获取子元素？
EN