반응형
특정 요소에 접근할 수 있다면 해당 요소의 속성에도 접근이 가능
접근 시 거의 대부분 속성이름과 동일한 프로퍼티로 접근
예외 적인 속성 이름들이 존재한다. (ex. HTML class 속성은 DOM에서 className으로 접근)
만약 HTML속성이름과 DOM에서의 이름이 다른 경우 setProperty() / getProperty() 메서드를 사용하면 된다.
예)
|
1
2
|
var un1 = link.href;
link.href = https://www.naver.com/';
|
cs |
예)
|
1
2
3
|
<p c1ass="suninary">샘플</p> 4- HTML
node.className = 'sumary'; DOM
|
cs |
예)
|
1
2
|
요소 노드·getAttribute（'속성명'）
요소 노드.setAttnibute（'속성명', '속성값'）
|
cs |
만약 특정 노드에 속하는 모든 속성을 가져오려는 경우 attributes 프로퍼티를 사용한다.
attributestest.html
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
|
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>attributes프로퍼티</title>
<script type="text/javascript">
window.onload = function() {
var logo = document.getElementById('logo');
var attrs = logo.attributes;
var result = [];
for (var i = 0; i < attrs.length; i++) {
var attr = attrs.item(i);
if (attr.nodeValue) {
result.push(attr.nodeName + ':' + attr.nodeValue);
}
}
window.alert(result.join('\r\n'));
}
</script>
</head>
<body>
<img id="logo" src="http://www.wings.msn.to/image/wings.jpg"
height="67" width="215" border="0"
alt="WINGS（Www INtegrated Guide on Server-architecture）" />
</body>
</html>
|
cs |
attributes는 노드의 전체 속성을 NamedNodeMap타입으로 저장하고 있음
이름이나 인덱스 번호로 접근이 가능하며 각 속성은 nodeName과 nodeValue로 꺼내올 수 있다.
반응형
'교육자료 > Javascript' 카테고리의 다른 글
| 18-4. 스타일시트 조작하기 (0) | 2019.05.13 |
|---|---|
| 18-3. 노드 치환하기 (0) | 2019.05.13 |
| 18-2. DOM특정 노드 참조하기 (0) | 2019.05.13 |
| 18-1. DOM(Document Object Model) (0) | 2019.05.13 |
| 17-7. Screen 브라우저 객체 (0) | 2019.05.13 |