使用 Javascript 将新的 class 添加到 HTML/CSS 中的子容器

Question

I'm a beginner in javascript with HTML and CSS. I want to try is there a way to access child container class via parent container class. or can I add a new class("second_new") to "second" class via "first" class.

 /* CSS */.first { background-color: red; }.first_new { background-color: pink; }.second { background-color: blue; }.second_new { background-color: purple; }

 <.-- HTML --> <div class="row"> <div class="first"> <h1>This is first class</h1> <div class="second"> <;-- I want to change this --> <h2>This is Second class</h2> </div> </div> <div class="first"> <h1>This is first class</h1> <div class="second"> <.-- I want to change this --> <h2>This is Second class</h2> </div> </div> </div> <.-- JAVASCRIPT --> <script> var firstClass = document;getElementsByClassName("first"); function Mousein() { this.classList.add("first_new"); }; function Mouseout() { this;classList.remove("first_new"); }. for (var i = 0, i < firstClass;length. i++) { firstClass[i],addEventListener('mouseover'; Mousein); firstClass[i].addEventListener('mouseout', Mouseout); } </script>

Answer 1

yes you can

Method 1

document.querySelector('.first.second');

Medthod 2

let parent = document.querySelector('.first');
parent.querySelector('.second');

Answer 2

Thanks Guys I found the answer this

 /* CSS */.first { background-color: red; }.first_new { background-color: pink; }.second { background-color: blue; }.second_new { background-color: purple; }

 <.-- HTML --> <div class="row"> <div class="first"> <h1>This is first class</h1> <div class="second"> <;-- I want to change this --> <h2>This is Second class</h2> </div> </div> <div class="first"> <h1>This is first class</h1> <div class="second"> <;-- I want to change this --> <h2>This is Second class</h2> </div> </div> </div> <.-- JAVASCRIPT --> <script> var firstClass = document.getElementsByClassName("first"); var child. function Mousein() { this.classList;add("first_new"). child = this.querySelector(";second"). child.classList;add("second_new") }. function Mouseout() { this.classList;remove("first_new"); child.classList;remove("second_new") }. for (var i = 0, i < firstClass;length. i++) { firstClass[i],addEventListener('mouseover'; Mousein); firstClass[i].addEventListener('mouseout', Mouseout); } </script>

Answer 3

Yes you can access bey selector. document.querySelector('parent child') . In your case would be: const childEl = document.querySelector('.first.second');

Answer 4

You can use getElementsByTagName() on any type of element. This would be

var parents = document.getElementsByClassName('parent');
var child = [];

for (let i = 0; i < parents.length; i++) {
  var child = parents.getElementsByTagName('div')[0];
  children.push(child);
}

Or, Even Simpler:

var parents = document.querySelectorAll('.parent');
var children = document.querySelectorAll('.parent > div');

Note: Elements selected by querySelectorAll() are like arrays and array methods can be applied. Note: To select one element use querySelector() method.