[js] JS - 특정 클래스 갖는 자식요소의 부모요소에 사용자 지정 클래스 추가

<style>

div.shorts {

    margin-bottom:100px;

}
</style>

 

<div><iframe src="https://www.youtube.com/embed/HZJNBP74vM4" frameborder="0" class="shorts"></iframe></div>

<div><iframe src="https://www.youtube.com/embed/HZJNBP74vM4" frameborder="0" class="shorts"></iframe></div>

<div><iframe src="https://www.youtube.com/embed/HZJNBP74vM4" frameborder="0" class="shorts"></iframe></div>

<div><iframe src="https://www.youtube.com/embed/HZJNBP74vM4" frameborder="0" class="shorts"></iframe></div>

 

<script>

// .shorts 클래스를 가진 요소를 모두 선택

const shortsElements = document.querySelectorAll('.shorts');

// 각 .shorts 요소의 부모 요소에 .shorts 클래스 추가

shortsElements.forEach(shortsElement => {

  const parentElement = shortsElement.parentNode;

  parentElement.classList.add('shorts');

});

</script>

 

결과보기