[JavaScript] id 추가 , 수정 , 삭제

 

 

1. id 추가

 

<div class="sample">
 
</div>

 

document.querySelector('.sample').id = 'test';

 

추가하려는 class명을 찾아 id 명을 입력해주면,

해당 위치에 id가 추가 된다.

 

<div id="test" class="sample">
 
</div>

 

 

2. id 수정

 

document.querySelector('.sample').setAttribute("test", "test2");

 

기존 id 명을 원하는 id 명으로 수정 한다.

 

<div id="test2" class="popup">
 
</div>

 

 

3. id 삭제

 

document.querySelector('.sample').removeAttribute('test2');

 

해당하는 class명이 존재하는 곳의 id가 삭제 된다.

 

<div class="sample">
 
</div>

 

removeAttribute() 메서드는 하나의 속성만 제거할 수 있다.

모든 속성을 제거하고 싶다면 반복문을 이용해야 한다.

 

 

1)

const cellCheck = document.querySelectorAll('#test2');

for (let i=0; i < cellCheck.length; i++) {
    cellCheck[i].removeAttribute('id');
}

 

2)

const cellCheck = document.getElementById("test2");

[...cellCheck.attributes].forEach((attr) =>
  cellCheck.removeAttribute(attr.name)
);

 

3)

const cellCheck = document.getElementById("test2");

while (cellCheck.attributes.length > 0) {
  cellCheck.removeAttribute(cellCheck.attributes[0].name);
}