지난 포스트에서 노드를 취득했다면 이번에는 취득한 노드의 속성을 다루어볼려고 합니다.
0. 요소 노드의 속성명으로 접근하기
제일 기초적인 방법이자 직관적인 방법입니다. 바로 요소의 속성명을 프로퍼티로 접근하는 방법인데요 . 예를 들면 <a>요소에는 href라는 링크를 지정하는 속성이 있습니다. 이 태그로 예시를 들며 설명해나가겠습니다.
<a id="myBlog" href="https://bamtory29.tistory.com/">let linkA = document.getElementBtId('myBlog');
let url = linkA.href; //로 취득하거나
linkA.href = ""; //로 설정하기
이처럼 속성의 이름을 가지고 직접 접근할 수 있습니다. 직관적이지만 주의할점이 있는데요. 몇몇 키워드의 혼용으로 인해 속성명이 일치하지 않는 경우가 있습니다. 대표적으로 class인데요. class명령은 이미 자바스크립트에 존재하므로 사용할 수 없어 'className'이라는 이름으로 접근해야합니다.
<img class="album">let imgNode = document.getElementByClassName('album');
imgNode.className = 'thumbnail'; //class 속성은 className이라는 프로퍼티로 접근
1. getAttribute/setAttribute
위의 방법에서 className처럼 속성명과 일치하지 않아 경우를 배제하기 위해 Attribute를 사용합니다. 사용법은 이전의 메소드 사용법과 동일합니다.
요소.getAttribute(속성명);
요소.setAttribute(속성명, 속성 값);
이 방법은 접근 프로퍼티명을 생각하지 않아도 되고, 스크립트에서 문자열로 속성명을 변경할 수 있다는 장점을 가지고 있습니다.
2. attributes
글자 끝에 -s가 붙음에서 눈치챈 사람도 있겠지만 이 프로퍼티는 한 요소에 담긴 다수의 속성을 반환하는 프로퍼티입니다. 지난번 다수의 노드 취득의 HTMLCollection처럼 이것도 NamedNodeMap이라는 객체의 형식으로 반환됩니다. 프로퍼티도 유사합니다.단, attributes로부터 추출해낸 하나의 속성에 접근할때 속성명은 '.name', 속성 값은 '.value'프로퍼티로 접근합니다.
3. 텍스트 다루기 - innerHTML, textContent
이번에는 텍스트를 다루는 방법입니다. 텍스트라하면 다음을 말합니다.
<p>텍스트</p>우선 두 가지 방법 다 스크립트에서 요소의 텍스트를 변경해 준다. 라는 점을 공통으로 두고있습니다.
3-1. innerHTML
innerHTML은 주어지는 문자열을 HTML 문자열로 해석합니다. 그래서 문자열에 html태그가 포함되어있는 경우 그 태그를 html문서에 적용시켜 출력합니다.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Bam</title>
<link href="../CSS/css.css" rel="stylesheet" type="text/css">
</head>
<body>
<p id = 'text'>기존 텍스트</p>
<script src="../js/hello_world.js" type="text/javascript"></script>
</body>
</html>
document.addEventListener('DOMContentLoaded', function (){
document.getElementById('text').innerHTML = '<h1>innerHTML</h1>';
});
3-2. textContent
textContent는 innerHTML과 다르게 html문서로 해석과정 없이 문자열에 써져있는 문자열을 그대로 대입합니다. innerText라는것이 존재하는데 이것과 같은 역할을 합니다.
document.addEventListener('DOMContentLoaded', function (){
document.getElementById('text').textContent = '<h1>innerHTML</h1>';
});
'Programming > Javascript' 카테고리의 다른 글
| [Javascript] 노드 추가하기 (0) | 2021.03.29 |
|---|---|
| [Javascript] 폼 요소 접근 (0) | 2021.03.26 |
| [Javascript] 이벤트 (0) | 2021.03.24 |
| [Javascript] 노드 워킹 (0) | 2021.03.24 |
| [Javascript] 노드 취득 (0) | 2021.03.24 |
댓글