
DOM에서 속성, 클래스 및 스타일을 수정하는 방법
2022-06-01 last update
29 minutes reading JavaScript Development소개
이전 series 강좌 "How To Make Changes to the DOM"에서는 내장 방법을 사용하여 문서 객체 모델(DOM)에서 요소를 생성, 삽입, 교체 및 삭제하는 방법을 설명했습니다.DOM 작업의 숙련도를 향상시켜 자바스크립트의 상호작용 기능을 더욱 잘 활용하고 웹 요소를 수정할 수 있다.
이 강좌에서는 HTML 요소 노드의 스타일, 클래스 및 기타 속성을 수정하여 DOM을 수정하는 방법을 학습합니다.이렇게 하면 DOM의 기본 요소를 어떻게 조작하는지 더 잘 이해할 수 있습니다.
선택 요소 검토
최근까지 jQuery이라는 유행하는 자바스크립트 라이브러리는 DOM의 요소를 선택하고 수정하는 데 가장 많이 사용되었다.jQuery는 하나 이상의 요소를 선택하고 모든 요소에 변경 사항을 적용하는 과정을 간소화합니다.'How To Access Elements in the DOM'에서 우리는 vanilla JavaScript에서 노드를 얻고 처리하는 DOM 방법을 되돌아보았다.
document.querySelector()
및 document.getElementById()
은 개별 요소에 액세스하는 방법입니다.다음 예에서 div
속성을 가진 id
을 사용하면 우리는 어떤 방식으로든 이 요소에 접근할 수 있다.<div id="demo-id">Demo ID</div>
querySelector()
방법은 모든 종류의 선택기를 통해 페이지의 요소를 선택할 수 있기 때문에 더욱 건장합니다.// Both methods will return a single element
const demoId = document.querySelector('#demo-id');
개별 요소에 액세스하면 요소의 일부(예: 내부 텍스트)를 쉽게 업데이트할 수 있습니다.// Change the text of one element
demoId.textContent = 'Demo ID text updated.';
그러나 공공 선택기 (예를 들어 특정 클래스) 를 통해 여러 요소에 접근할 때, 우리는 목록의 모든 요소를 훑어보아야 한다.아래 코드에서 우리는 두 개의 div
원소를 가지고 있는데, 그것들은 공공 클래스 값을 가지고 있다.<div class="demo-class">Demo Class 1</div>
<div class="demo-class">Demo Class 2</div>
querySelectorAll()
을 사용하여 demo-class
을 적용한 모든 요소를 가져오고 forEach()
을 사용하여 변경 사항을 순환합니다.또한 querySelectorAll()
을 사용하여 특정 요소에 접근할 수 있습니다. 방법은 사용 그룹과 같습니다. - 괄호 표현을 사용합니다.// Get a NodeList of all .demo elements
const demoClasses = document.querySelectorAll('.demo-class');
// Change the text of multiple elements with a loop
demoClasses.forEach(element => {
element.textContent = 'All demo classes updated.';
});
// Access the first element in the NodeList
demoClasses[0];
이것은 jQuery에서 vanilla JavaScript로 발전할 때 주의해야 할 가장 중요한 차이 중의 하나이다.많은 수정 요소의 예시에서 이러한 방법과 속성을 여러 요소에 적용하는 과정을 설명할 수 없다.클릭, 정지 또는 다른 트리거에 응답하기 위해 본고의 속성과 방법은 보통 event listeners에 추가됩니다.
참고: 메서드
getElementsByClassName()
및 getElementsByTagName()
은 forEach()
에 액세스할 수 없는 querySelectorAll()
메서드의 HTML 컬렉션을 반환합니다.이러한 경우, 당신은 표준적인 for
loop을 사용하여 집합을 교체해야 합니다.속성 수정
속성은 HTML 요소에 대한 추가 정보를 포함하는 값입니다.일반적으로 이름/값 쌍으로 나타나며 요소에 따라 필요할 수 있습니다.
일부 가장 흔히 볼 수 있는 HTML 속성은
src
표기의 img
속성, href
표기의 a
속성, class
속성, id
속성과 style
속성을 포함한다.HTML 속성의 전체 목록은 Mozilla 개발자 네트워크의 attribute list을 보십시오.HTML 표준에 속하지 않는 사용자 정의 요소는 data-
을 접두사로 사용합니다.JavaScript에서는 요소 속성을 수정하는 네 가지 방법이 있습니다.
방법
묘사
인스턴스
hasAttribute()
true
또는 false
부울 값 반환element.hasAttribute('href');
getAttribute()
지정된 속성의 값 또는 null
반환element.getAttribute('href');
setAttribute()
지정된 속성의 값 추가 또는 업데이트element.setAttribute('href', 'index.html');
removeAttribute()
요소에서 속성 제거element.removeAttribute('href');
img
태그와 속성이 있는 새 HTML 파일을 만듭니다.사용할 수 있는 공용 이미지에 URL을 통해 링크되지만 오프라인으로 작업하는 경우 대체 로컬 이미지로 대체할 수 있습니다.속성html
<!DOCTYPE html>
<html lang="en">
<body>
<img src="https://js-tutorials.nyc3.spaces.com/shark.png">
</body>
</html>
위의 HTML 파일을 현대 웹 브라우저에 로드하고 내장된 Developer Console을 열면 다음과 같은 내용을 볼 수 있습니다.
현재, 우리는 모든 속성 방법을 동적 테스트할 수 있다.
// Assign image element
const img = document.querySelector('img');
img.hasAttribute('src'); // returns true
img.getAttribute('src'); // returns "...shark.png"
img.removeAttribute('src'); // remove the src attribute and value
src
속성 및 img
과 연관된 값이 삭제되지만 이 속성을 재설정하고 img.setAttribute()
이 있는 대체 이미지에 값을 지정할 수 있습니다.img.setAttribute('src', 'https://js-tutorials.nyc3.spaces.com/octopus.png');

마지막으로, 우리는 새로운 값을 요소의 속성으로 분배하여,
src
을 shark.png
파일로 설정하여 속성을 직접 수정할 수 있다img.src = 'https://js-tutorials.nyc3.spaces.com/shark.png';
모든 속성은 이런 방식과 상술한 방법으로 편집할 수 있다.hasAttribute()
과 getAttribute()
방법은 일반적으로 conditional statements과 함께 사용되며, setAttribute()
과 removeAttribute()
방법은 직접 DOM을 수정하는 데 사용된다.클래스 수정
class 속성은 CSS class selectors에 대응합니다.이것은 ES6 classes과 혼동할 수 없습니다. 후자는 특수한 유형의 자바스크립트 함수입니다.
CSS 클래스는 여러 요소에 스타일을 적용하는 데 사용되며, ID처럼 페이지당 한 번만 존재할 수 있는 것은 아닙니다.JavaScript에서 우리는
className
과 classList
속성을 사용하여class 속성을 처리합니다.메서드/속성
묘사
인스턴스
className
클래스 값 가져오기 또는 설정element.className;
classList.add()
하나 이상의 클래스 값 추가element.classList.add('active');
classList.toggle()
클래스 열기 또는 닫기element.classList.toggle('active');
classList.contains()
클래스 값 확인element.classList.contains('active');
classList.replace()
새 클래스 값으로 기존 클래스 값 대체element.classList.replace('old', 'new');
classList.remove()
클래스 값 삭제element.classList.remove('active');
두 요소와 여러 클래스를 포함하는 클래스 방법을 사용할 다른 HTML 파일을 만들 것입니다.수업.html
<!DOCTYPE html>
<html lang="en">
<style>
body {
max-width: 600px;
margin: 0 auto;
font-family: sans-serif;
}
.active {
border: 2px solid blue;
}
.warning {
border: 2px solid red;
}
.hidden {
display: none;
}
div {
border: 2px dashed lightgray;
padding: 15px;
margin: 5px;
}
</style>
<body>
<div>Div 1</div>
<div class="active">Div 2</div>
</body>
</html>
웹 브라우저에서 classes.html
파일을 열면 다음과 같은 렌더링을 받을 수 있습니다.
className
속성을 도입한 것은 JavaScript 및 DOM에 액세스할 수 있는 다른 언어의 class
키워드와 충돌하는 것을 방지하기 위해서입니다.className
을 사용하여 값을 클래스에 직접 부여할 수 있습니다.// Select the first div
const div = document.querySelector('div');
// Assign the warning class to the first div
div.className = 'warning';
warning
CSS 값에 정의된 classes.html
클래스를 첫 번째 div
에 할당했습니다.다음 출력을 받게 됩니다.
요소에 이미 클래스가 존재하면 덮어씁니다.
className
속성을 사용하여 공백으로 구분된 여러 클래스를 추가할 수도 있고, 값 연산자를 사용하지 않은 상태에서 그것을 사용하여 요소의 클래스 값을 얻을 수도 있습니다.또 다른 수정 유형의 방법은
classList
속성을 통해 이 속성은 유용한 방법을 첨부했다.이 방법들은 jQuery addClass
, removeClass
, toggleClass
방법과 유사하다.// Select the second div by class name
const activeDiv = document.querySelector('.active');
activeDiv.classList.add('hidden'); // Add the hidden class
activeDiv.classList.remove('hidden'); // Remove the hidden class
activeDiv.classList.toggle('hidden'); // Switch between hidden true and false
activeDiv.classList.replace('active', 'warning'); // Replace active class with warning class
위의 방법을 실행하면 웹 페이지는 다음과 같습니다.
className
의 예와 달리 classList.add()
을 사용하면 기존 클래스 목록에 새 클래스를 추가합니다.쉼표로 구분된 문자열로 여러 클래스를 추가할 수도 있습니다.setAttribute
을 사용하여 요소의 클래스를 수정할 수도 있습니다.스타일 수정
style 속성은 HTML 요소의 내연 스타일을 나타냅니다.일반적으로 스타일은 스타일시트를 통해 요소에 적용됩니다. 우리가 본문 앞에서 한 것처럼, 그러나 때때로 우리는 직접 내연 스타일을 추가하거나 편집해야 합니다.
JavaScript의 편집 스타일을 보여주는 간단한 예제를 만들 것입니다.다음은
div
이 포함된 새 HTML 파일로 사각형을 표시하기 위한 내부 연결 스타일이 적용됩니다.스타일html
<!DOCTYPE html>
<html lang="en">
<body>
<div style="height: 100px;
width: 100px;
border: 2px solid black;">Div</div>
</body>
</html>
웹 브라우저에서 열 때 styles.html
의 모양은 다음과 같습니다.
스타일 편집 옵션 중 하나는
setAttribute()
입니다.// Select div
const div = document.querySelector('div');
// Apply style to div
div.setAttribute('style', 'text-align: center');
그러나 이것은 요소에서 기존의 내연 스타일을 모두 삭제합니다.이것은 예상한 효과가 아닐 수 있으므로 style
속성을 직접 사용하는 것이 가장 좋다div.style.height = '100px';
div.style.width = '100px';
div.style.border = '2px solid black';
CSS 속성은 kebab 대소문자로 구분된 소문자 단어입니다.주의해야 할 것은 kebab case CSS 속성은 자바스크립트 스타일 속성에 사용할 수 없다는 것이다.반대로, 그것들은camelCase 등어로, 즉 첫 번째 단어는 소문자이고, 뒤이어 모든 단어는 대문자로 대체될 것이다.다시 말하면, 우리는 text-align
을 textAlign
이 아니라 자바스크립트 스타일 속성으로 사용할 것이다.// Make div into a circle and vertically center the text
div.style.borderRadius = '50%';
div.style.display = 'flex';
div.style.justifyContent = 'center';
div.style.alignItems = 'center';
위의 스타일 수정이 완료되면 styles.html
의 최종 렌더링에 원이 표시됩니다.
요소에 많은 스타일 변경을 적용하려면 스타일을 클래스에 적용하고 새 클래스를 추가하는 것이 가장 좋습니다.그러나 일부 상황에서 내연 스타일 속성을 수정하는 것은 필요하거나 더 직접적이다.
결론
HTML 요소는 일반적으로 속성 형식으로 추가 정보를 할당합니다.속성은 이름/값 쌍으로 구성될 수 있으며, 가장 흔히 볼 수 있는 속성은
class
과 style
이다.이 강좌에서는 일반 JavaScript를 사용하여 DOM의 HTML 요소에 대한 속성을 액세스, 수정 및 삭제하는 방법을 학습했습니다.또한 요소에 CSS 클래스를 추가, 삭제, 전환 및 교체하는 방법과 인라인 CSS 스타일을 편집하는 방법도 학습했습니다.자세한 내용은 Mozilla 개발자 네트워크의 attributes 문서를 참조하십시오.