DOM에서 속성, 클래스 및 스타일을 수정하는 방법

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');

마지막으로, 우리는 새로운 값을 요소의 속성으로 분배하여, srcshark.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-aligntextAlign이 아니라 자바스크립트 스타일 속성으로 사용할 것이다.
// 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 요소는 일반적으로 속성 형식으로 추가 정보를 할당합니다.속성은 이름/값 쌍으로 구성될 수 있으며, 가장 흔히 볼 수 있는 속성은 classstyle이다.
이 강좌에서는 일반 JavaScript를 사용하여 DOM의 HTML 요소에 대한 속성을 액세스, 수정 및 삭제하는 방법을 학습했습니다.또한 요소에 CSS 클래스를 추가, 삭제, 전환 및 교체하는 방법과 인라인 CSS 스타일을 편집하는 방법도 학습했습니다.자세한 내용은 Mozilla 개발자 네트워크의 attributes 문서를 참조하십시오.