Question

我希望获得有关从父div按名称获取元素的帮助。

示例

<div class="Car">
    <div class="CarSepcification">
        <img src="Car.jpg" name="CarImg">
        <span class="CarName">BMW X5</span>
        <span class="CarDetails">BMW X5 4.4L 2016 Black</span>
        <div class="CarPrice">
            <span class="Price">38,750</span><span>EUR</span>
            <div>
                <input type="hidden" value="BMW" name="hdf_car"/>
                <img src="Add.jpg" onclick="AddCar(this)" />
            </div>
        </div>
    </div>
</div>

在上面的示例中，我有汽车的图像，名称和价格。如何通过函数getElementbyName中的Addcar()获取隐藏字段值的汽车名称，img和价格？

我希望使用Javascript而不是jQuery。

Answer 1

您可以使用类名访问元素。

希望这会有所帮助！

console.log(document.getElementsByName('CarImg')[0].src);
console.log(document.getElementsByClassName('CarName')[0].innerHTML)
console.log(document.getElementsByClassName('Price')[0].innerHTML)
console.log(document.getElementsByClassName('hidden')[0].value)

<div class="Car">
    <div class="CarSepcification">
        <img src="Car.jpg" name="CarImg">
        <span class="CarName">BMW X5</span>
        <span class="CarDetails">BMW X5 4.4L 2016 Black</span>
        <div class="CarPrice">
            <span class="Price">38,750</span><span>EUR</span>
            <div >
                <input class="hidden" type="hidden" value="BMW" name="hdf_car"/>//add a identifier to access the element from the DOM
                <img src="Add.jpg" onclick="AddCar(this)" />
            </div>
        </div>
    </div>
</div>

Answer 2

function AddCar(xxx) {
  console.log('This: ',xxx);
  var aCars = document.getElementsByClassName('Car');
  // console.log(aCars);
  for (var i =0; i < aCars.length; i++) {
    var car = aCars[i];
      // console.log(car);
      var obj = {
        img : car.getElementsByClassName('CarImg')[0].src,
          name : car.getElementsByClassName('CarName')[0].innerHTML,
          detail : car.getElementsByClassName('CarDetails')[0].innerHTML,
          price :car.getElementsByClassName('Price')[0].innerHTML,
          hidden :  car.getElementsByTagName('input')[0].value,
      }
      console.log(obj);

  }
}

<!DOCTYPE html>
<html>
<body>

<div class="Car">
    <div class="CarSepcification">
        <img src="Car.jpg" name="CarImg" class="CarImg">
        <span class="CarName">BMW X5</span>
        <span class="CarDetails">BMW X5 4.4L 2016 Black</span>
        <div class="CarPrice">
            <span class="Price">38,750</span><span>EUR</span>
            <div>
                <input type="hidden" value="BMW" name="hdf_car"/>
                <img src="Add.jpg" onclick="AddCar(this)" />
            </div>
        </div>
    </div>
</div>
<div class="Car">
    <div class="CarSepcification">
        <img src="Car.jpg" name="CarImg" class="CarImg">
        <span class="CarName">BMW X125</span>
        <span class="CarDetails">123BMW X5 4.4L 2016 Black</span>
        <div class="CarPrice">
            <span class="Price">138,750</span><span>EUR</span>
            <div>
                <input type="hidden" value="BMW2" name="hdf_car"/>
                <img src="Add.jpg" onclick="AddCar(this)" />
            </div>
        </div>
    </div>
</div>

</body>
</html>

更好？

Answer 3

这样做

let parentDiv = [...document.querySelectorAll('.Car')];
parentDiv.forEach((div) => {
   let carImg = 
   div.getElementByTagName('img').getAttribute('name');
   let carName = div.getElementByTagName('span'). 
   [0].innerText;
   let carDetails = div.getElementByTagName('span'). 
   [1].innerText;

  And so on

});

Answer 4

同时，莫妮卡的答案很好，当您引用DOM中的元素时，我觉得document.querySelector()更适合...所有内容。此外，getElementsByClassName()返回一个数组，在此示例中，该数组是无用的。另外，querySelector()非常熟悉，因为您像在CSS中一样引用ID或类或输入的名称。喜欢： document.querySelector(".Car");或document.querySelector("input[name='hdf_car']")。

如何在父div中获取元素

4 个答案: