📔 대부분의 속성은 '요소 노드 속 같은 이름의 프로퍼티'로 액세스 가능
: 요소 노드 속 동일한 이름의 프로퍼티로 액세스가 가능 하다.
var url = link.href; // 취득
link.href = 'http://www.wings.msn.to/'; // 설정: 일부 속성명과 프로퍼티명이 일치하고 있지 않는 경우
<p class="summary">샘플</p> // HTML
node.className = 'summary'; // JavaScript(DOM): 속성과 프로퍼티 이름의 차이를 의식하고 싶지 않다면 getAttribute(attribute), setAttribute(attribute, value) 메소드
elem.getAttribute(name)
elem.setAttribute(name, value)
elem : 요소 객체 name : 속성명 value : 속성값ar url = link.getAttribute('href');
link.setAttribute = ('href', 'http://www.wings.msn.to/'); 🔸 불특정 속성 취득하기 - attrubutes 프로퍼티
: 특정의 요소 노드에 속하는 모든 속성을 취득하고 싶은 경우
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title> </title>
<script type="text/javascript">
<!--
document.addEventListener('DOMContentLoaded', function() {
var logo = document.getElementById('logo'); // <img id="logo">를 취득
var attrs = logo.attributes; // <img> 태그에 포함되는 속성 리스트를 취득
for (var i = 0; len = attrs.length; i < len; i++) {
var attr = attrs.item(i);
console.log(attr.name + ':' + attr.value);
}
}, false);
//-->
</script>
</head>
<body>
<img id="logo" src="http://www.wings.msn.to/image/wings.jpg"
height="67" width="215" alt="WINGS(Www INtegrated Guide om Server-architecture)" />
</body>
</html>
-
attributes 프로퍼티
: 요소 노드에 포함되는 전체 속성의 리스트를 NameNodeMap 객체로 반환한다. -
NameNodeMap 객체
: 개별의 노드에 이름과 인덱스 번호 중 어떠한 것을 사용해도 액세스할 수 있다.
🔸 텍스트 취득 및 설정하기 - innerHTML/textContent
: 모든 요소에 존재하는 textContent, innerHTML을 통해 node나 element의 텍스트값을 읽어오고 설정할 수 있다는 점이 비슷하다.
: 해당 요소 밑의 자식 요소/텍스트를 완전히 대체하고 있다.
<div id="result_text">
<p style="color: Red;">설정되어 있지 않다!</p>
</div>
<div id="result_html">
<p style="color: Red;">설정되어 있지 않다!</p>
</div>
document.addEventListener('DOMContentLoaded', function() {
document.getElementById('result_text').textContent =
'<a href="http://www.wings.msn.to/">WINGS프로젝트</a>';
document.getElementById('result_html').innerHTML =
'<a href="http://www.wings.msn.to/">WINGS프로젝트</a>';
}, false);
- innerHTML
: HTML로 텍스트를 삽입하기 때문에 링크가 활성화
: 대상 요소 아래를 HTML 문자열로 반환
- textContent
: 일반 텍스트로 포함하기 때문에 태그 문자열이 그대로 표시됨
: 자식 요소 각각에서 텍스트만 추출하여 연결한 것을 반환
