웹 페이지에서 이미 존재하는 HTML 태그를 자바스크립트로 가져오는 방법에는 다음과 같은 메서드를 통해 가져온다.
getElementById(id) : 태그의 id속성이 id와 일치하는 문서 객체를 가져온다.
getElementsByName(name) : 태그의 name속성이 name과 일치하는 문서의 객체를 배열로 가져온다.
getElementsByTagName(tagName) : tagName과 일치하는 문서 객체를 배열로 가져온다.
getElementById(id)
<body>
<h1 id="header-1">Header</h1>
<h1 id="header-2">Header</h1>
</body>위와 같이 구성된 body태그에서 id속성을 갖는 태그만 가져온다.
window.onload = function() {
var header1 = document.getElementById('header-1');
var header2 = document.getElementById('header-2');
}document객체의 getElementById( ) 메서드는 id속성을 갖는 태그만 가져올 수 있기 때문에 매개변수에 가져올 요소노드의 id속성을 입력하여 문서객체를 가져온다.
header1과 header2는 문서 객체이므로 뒤에 .점을 찍어주면 문서객체의 속성과 메서드를 사용할 수 있게된다.
window.onload = function() {
var header1 = document.getElementById('header-1');
var header2 = document.getElementById('header-2');
header1.innerHTML = 'with getElementById()';
header1.2nnerHTML = 'with getElementById()';
}다음과 같이 구성하면 innerHTML 속성에 의해 header-1 id를 가진 header1객체 즉, <h1 id="header-1"></h1> 태그 사이에 텍스트노드가 추가된다.
getElementsByName(name)
<body>
<h1 name="header1">Header</h1>
<h1 name="header2">Header</h1>
</body>window.onload = function() {
var header1 = document.getElementByName('header1');
var header2 = document.getElementByName('header2');
}getElementById( ) 메서드의 원리와 같이 문서객체로 부터 name속성을 갖는 요소노드를 모두 가져와 변수에 저장하여 배열형태의 객체로 관리가 가능하다.
차이는 getElementsById( )는 유일하게 하나만 가져오고 getElementsByName( )은 복수개의 배열로 가져온다.
만약 중복된 id값을 가진 복수개의 요소노드 태그를 getElementById( )로 가져오게 된다면 가장 최상위로 찾아진 태그만 가져온다.
메서드 명에서만 봐도 차이가 있다. getElementById는 Element인데 getElementsByName은 Elements 이다.
복수형을 뜻하는 알파벳 s가 붙으니 사용할때 주의하도록 하자!
getElementsByTagName(tagName)
<!DOCTYPE html>
<html>
<head>
<title>Index</title>
<script>
window.onload = function () {
var headers = document.getElementByTagName('h1');
}
</script>
</head>
<body>
<h1>Header</h1>
<h1>Header</h1>
</body>
</html>변수 headers는 복수개의 문서객체를 갖는 배열이며, h1태그가 순서대로 저장된다.
headers 배열 안에 있는 문서객체를 사용할 때는 반복문으로 사용이 가능하다.
window.onload = function () {
var headers = document.getElementsByTagName('h1');
for (var i = 0; i < headers.length; i++) {
headers[i].innerHTML = 'with getElementByTagName()';
}
}여기서 주의할 점은 for in 반복문은 사용이 안된다는것.
for in 반복문을 사용하면 문서객체 이외의 속성이나 메서드에도 접근하기 때문이다.
window.onload = function () {
var headers = document.getElementsByTagName('h1');
for (var i in headers) {
headers[i].innerHTML = 'with getElementByTagName()';
}
}우선 적용은 된다.
window.onload = function () {
var headers = document.getElementsByTagName('h1');
var output = '';
for (var i in headers) {
output += i + '\n';
headers[i].innerHTML = 'with getElementByTagName()';
}
}코드를 위와같이 구성하면 console에 출력되는 결과는 다음과 같다
0과 1은 인덱스 요소라 상관이 없지만 나머지 속성들은 다음과 같다.
getElementsByClass(class)
이 밖에 class 속성으로도 값을 불러오는 메서드가 존재하며 getElementsByName과 getElementsByTagName 메서드와 사용법이 동일하고 똑같이 복수개의 배열 형태로 가져와 관리한다.
CSS 선택자 메서드
querySelector(선택자) : 선택자로 가장 처음 선택되는 문서 객체를 가져온다.
querySelectorAll(선택자) : 선택자로 선택되는 문서 객체를 배열로 가져온다.
<!DOCTYPE html>
<html>
<head>
<title>Index</title>
<script>
window.onload = function() {
var header1 = document.querySelector('#header-1');
var header2 = document.querySelector('#header-2');
header1.innerHTML = 'with getElementById()';
header1.2nnerHTML = 'with getElementById()';
}
</script>
</head>
<body>
<h1 id="header-1">Header</h1>
<h1 id="header-2">Header</h1>
</body>
</html>css선택자는 기본적으로 id일경우 속성값 앞에 #을 붙히고 class일 경우 속성값 앞에 .을 붙히며 TagName인 경우 아무것도 붙히지 않는다.
getElementById( ) 메서드도 querySelector( ) 메서드와 같이 가장 처음 선택되는 메서드만 가져왔다.
만약 중복되는 복수개의 id선택자를 가진 태그들을 가져오기 위해서는 querySelectorAll( )을 사용하면 된다.
'JavaScript > DOM & Event' 카테고리의 다른 글
| 이벤트 - DOM Level 0 : 고전 이벤트 모델 (0) | 2022.01.20 |
|---|---|
| 문서객체 스타일조작, 제거 removeChild( ), parentNode, appendChild( ), childNode (0) | 2022.01.19 |
| 문서 객체 만들기 (DOM) createElement , createTextNode , appendChild, setAttribute , getAttribute , innerHTML, textContent속성 (0) | 2022.01.18 |
| 문서객체 DOM (Document Object Model) (0) | 2022.01.18 |
| window객체와 이벤트 (BOM/DOM) window.onload (0) | 2022.01.18 |