使用 javascript 将 class 添加到元素的第一个子元素

Question

New to js and trying to add a class to every section's first child automatically. I'm thinking something like:

    <script>
var element=document.getElementsByTagName(section p:first-child);
element.classList.add('firstp');
    </script>

but it's not producing any effect in the document. Any help?

Answer 1

• getElementsByTagName returns a collection, not an element, so you'd have to iterate over it
• To use a string, enclose the string in string delimiters, like '

• To use a selector string to select elements, use querySelectorAll . getElementsByTagName only accepts tag names (like p , or span - it's not flexible at all):

   var allFirstPs = document.querySelectorAll('section p:first-child'); allFirstPs.forEach((p) => { p.classList.add('firstp'); });

To support older browsers (since NodeList.prototype.forEach is a somewhat new method), use Array.prototype.forEach instead:

var allFirstPs = document.querySelectorAll('section p:first-child');
Array.prototype.forEach.call(
  allFirstPs,
  function(p) {
    p.classList.add('firstp');
  }
);

Answer 2

You could use querySelectorAll (to get the paragraphs) and forEach (to iterate over each paragraph) to accomplish this:

 var elements = document.querySelectorAll('section p:first-child'); elements.forEach((e) => { e.classList.add('firstp'); });

 .firstp { color: red; }

 <section> <p>1st</p> <p>2nd</p> <p>3rd</p> </section> <section> <p>1st</p> <p>2nd</p> <p>3rd</p> </section> <section> <p>1st</p> <p>2nd</p> <p>3rd</p> </section>

Answer 3

use querySelectorAll:

var elements = document.querySelectorAll('section p:first-child');

and iterate over result:

[...elements].forEach((element) => element.classList.add('firstp'));