javascript - javascript中如何从父元素中获取特定的子元素

Question

嗨，我在我的项目中使用了 javascript，当然对它还很陌生，在某种情况下，我想获取父元素的子元素的 ID，以便我可以仅更改该子元素的 css 类。

代码:

 <div id="section_container" class="col-md-3 section_container " onclick="handler(this)">
        <div id="content" class="col-md-10 leftone ">Make a complaint</div>
        <div class="rightone  col-md-2">
            <img id="arrow" class="arrow-image">
        </div>
    </div>
    <div id="section_container" class="col-md-3 section_container ">
        <div id="content" class="col-md-10 leftone ">Make a complaint</div>
        <div class="rightone  col-md-2">
            <img id="arrow" class="arrow-image">
            <a href="www.google.com" ></a>
        </div>
    </div>
    <div id="section_container" class="col-md-3 section_container ">
        <div id="content" class="col-md-10 leftone ">Make a complaint</div>
        <div class="rightone  col-md-2">
            <img id="arrow" class="arrow-image">
        </div>
    </div> 

在这里，我有三个相同的 div，我从中调用一个 javascript 函数处理程序，在处理程序中，我编写了代码，以便在单击部分容器时更改类

问题:
由于存在三个相同的元素section_container，我无法找到应该突出显示哪个元素(应该应用css类)。

具有 ID 的元素:内容箭头和section_container 获得新类。

问题:如何识别仅在已注册点击的 div 上突出显示。

Answer 1

是的，ID 必须是唯一的。我使用了纯 JavaScript，没有库

var elements = document.getElementsByClassName("section_container"),
  anIndex = 0;

if (elements && elements.length) {
  for (anIndex; anIndex < elements.length; anIndex++) {
    if (elements.hasOwnProperty(anIndex))
      elements[anIndex].addEventListener("click", cHandler);
  }
}

function cHandler(event) {
  for (anIndex = 0; anIndex < elements.length; anIndex++) {
    if (elements.hasOwnProperty(anIndex))
      elements[anIndex].classList.remove("highLight");
  }
  this.classList.add("highLight");
}

.highLight {
  background-color: red;
}

<div class="col-md-3 section_container ">
  <div id="content" class="col-md-10 leftone ">Make a complaint</div>
  <div class="rightone  col-md-2">
    <img id="arrow" class="arrow-image">
  </div>
</div>


<div class="col-md-3 section_container">
  <div id="content" class="col-md-10 leftone ">Make a complaint</div>
  <div class="rightone  col-md-2">
    <img id="arrow" class="arrow-image">
  </div>
</div>