▼ HTML, JavaScript 문서
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>Documnet</title>
</head>
<body>
<div>
<h1>오늘 할 일</h1>
<ol id="today">
<li class="item">자바스크립트 공부</li>
<li class="item">고양이 화장실 청소</li>
<li class="item">고양이 장난감 쇼핑</li>
</ol>
<h1>내일 할 일</h1>
<ol id="tomorrow" href="https://www.google.com">
<li class="item"><a href="https://developer.mozilla.org/ko/docs/Web/JavaScript">자바스크립트 공부</a></li>
<li class="item">뮤지컬 공연 예매</li>
<li class="item">유튜브 시청</li>
</ol>
</div>
<script src="index.js"></script>
</body>
</html>// HTML 속성 (HTML attribute)
const tomorrow = document.querySelector('#tomorrow');
const item = tomorrow.firstElementChild;
const link = item.firstElementChild;
// id 속성
console.log(tomorrow);
console.log(tomorrow.id);
// class 속성
console.log(item);
console.log(item.className);
// href 속성
console.log(link);
console.log(link.href);
console.log(tomorrow.href);DOM은 HTML 문서를 객체로 표현한 것이라고 했을 때,
브라우저가 콘텐츠를 화면에 보여주기 위해서 HTML 문서를 해석할 때 DOM 객체가 만들어진다.
이 때 HTML 태그들이 가지고 있는 각각의 속성들은 요소 노드의 프로퍼티가 된다.
대부분의 HTML 속성들은 이름 그대로 요소 노드의 프로퍼티로 생성이 되는데,
한 가지 주의해야 될 점은 모든 HTML 속성이 요소 노드의 프로퍼티로 생성되지는 않는다.
위에 HTML 문서를 보면 tomorrow라는 id를 가진 <ol> 태그에 href 속성이 있을 때,
<ol id="tomorrow" href="https://www.google.com">이 <ol> 태그에 href 속성을 추가하는 건 HTML 표준이 아니다.
그래서 JavaScript 파일에서 tomorrow의 href 속성에 접근해보면 undefined가 출력되는 것을 볼 수 있다.
// href 속성
console.log(link);
console.log(link.href);
console.log(tomorrow.href);
그리고 HTML 태그의 클래스 속성은 className이라는 이름으로 프러퍼티가 생성된다는 뜻이며
// class 속성
console.log(item);
console.log(item.className);클래스 속성은 이름이 살짝 변하기 때문에 주의해야한다.
아무튼 <ol> 태그 안의 href 속성 처럼 모든 HTML 태그의 속성들이 전부 요소 노드의 프로퍼티가 되지는 않는다.
그렇다면 HTML 표준이 아닌 속성은 어떻게 접근 할까?
요소 노드의 메소드를 활용하여 HTML 태그가 가지고 있는 속성들을 다뤄보자
1. 메소드를 통하여 속성에 접근하기 - getAttribute
프로퍼티의 직접 접근하는 방식으로는 비표준 속성에 접근할 수 없지만
getAttribute 메소드를 활용하면 표준과 비표준 관계없이 HTML 문서에서 해당 태그에 추가된
모든 속성들에 접근할 수 있다.
▼ getAttribute (속성)
// HTML 속성 (HTML attribute)
const tomorrow = document.querySelector('#tomorrow');
const item = tomorrow.firstElementChild;
const link = item.firstElementChild;
//elem.getAttribute('속성') - 속성에 접근하기
console.log(tomorrow.getAttribute('href'));
console.log(item.getAttribute('class'));
이렇게 getAttribute 메소드를 활용해서 해당하는 속성에 접근했는데
클래스 속성은 프로퍼티 이름으로 접근할 때는 'className' 이지만
getAttribute를 활용할 때는 class라는 문자열을 그대로 전달해 줘야 한다.
2. 메소드를 통하여 속성 추가하기 - setAttribute
첫 번째 파라미터의 추가할 속성 이름을 작성하고 두 번째 파라미터에 값을 전달한다.
기존에 없었던 속성인 경우에는 추가가 되며
이미 존재하는 속성인 경우는 수정되는 형태로 동작한다.
▼ setAttrubute (속성 , 값)
// HTML 속성 (HTML attribute)
const tomorrow = document.querySelector('#tomorrow');
const item = tomorrow.firstElementChild;
const link = item.firstElementChild;
//elem.setAttribute('속성','값') - 속성 추가(수정)하기
tomorrow.setAttribute('class', 'list') // 추가
link.setAttribute('href', 'https://www.naver.com') // 수정
이렇게 tomorrow에는 list라는 클래스 속성이 추가된 것을 확인 할 수 있고
링크의 경우에는 주소가 네이버 주소로 바뀐 것을 확인 할 수 있다.
3. 메소드를 통하여 속성 삭제하기 - removeAttribute
파라미터에 문자열로 속성 이름을 전달하면 해당 속성을 제거할 수 있다.
▼ removeAttribute ('속성')
// HTML 속성 (HTML attribute)
const tomorrow = document.querySelector('#tomorrow');
const item = tomorrow.firstElementChild;
const link = item.firstElementChild;
//elem.setAttribute('속성','값') - 속성 추가(수정)하기
tomorrow.setAttribute('class', 'list') // 추가
link.setAttribute('href', 'https://www.naver.com') // 수정
console.log('-----------------------------------------');
//elem.removeAttribute('속성') - 속성 제거하기
tomorrow.removeAttribute('href')
tomorrow.removeAttribute('class')
이렇게 tomorrow의 href 속성과 class 속성이 삭제된 것을 볼 수 있다.
이 세 가지 메소드 모두 속성 이름들은 대소문자를 구분하지 않으며
HTML 표준 속성은 모두 소문자이기 때문에
만약 속성 이름에 대문자를 섞어 사용하더라도
//elem.removeAttribute('속성') - 속성 제거하기
tomorrow.removeAttribute('hReF')
tomorrow.removeAttribute('ClAsS')소문자로 변환돼서 동작하기 때문에 실행해도 결과는 같다.
이렇게 HTML 속성이 DOM 프로퍼티가 된다는 것과
DOM의 메소드를 활용해서 HTML 속성을 다뤄보았다.
▶ GitHub
https://github.com/SeopE9611/JavaScript_soloPlay/tree/main/interactive_JS/10.HTML%EC%86%8D%EC%84%B1
JavaScript_soloPlay/interactive_JS/10.HTML속성 at main · SeopE9611/JavaScript_soloPlay
Contribute to SeopE9611/JavaScript_soloPlay development by creating an account on GitHub.
github.com
▶Notion
https://purrfect-gargoyle-935.notion.site/HTML-120e9530b3e180008134c5ba8b117880?pvs=4
HTML 속성 다루기 | Notion
<!DOCTYPE html> <html lang=
purrfect-gargoyle-935.notion.site
'JS' 카테고리의 다른 글
| (12) Interactive JavaScript - 비표준 속성 (0) | 2024.11.05 |
|---|---|
| (11) Interactive JavaScript - Style (0) | 2024.10.16 |
| (9) Interactive JavaScript - 요소 노드 삭제 및 이동 (0) | 2024.10.14 |
| (8) Interactive JavaScript - 요소 노드 추가 (0) | 2024.10.11 |
| (7) Interactive JavaScript - 요소 노드 프로퍼티 (0) | 2024.10.10 |