1. 조회 API
지금까지는 document.getElement(s)By 를 통해 엘리먼트를 조회하고 제어했다.
이것은 document라는 객체에 대한 메소드이다.
document 객체는 문서 전체를 의미한다.
따라서 document.getElement(s)By 이것은 해당 문서의 모든 엘리먼트들을 대상으로 조회를 하는 것이다.
만약 찾고자하는 엘리먼트가 어떤 엘리먼트의 하위에 해당되는 엘리먼트라면,
즉 조회의 범위를 좁히고자 한다면 찾고자 하는 엘리먼트들을 속한 상위 엘리먼트에서 getElement(s)By 메소드를 사용한다.
코드로 확인해본다.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<ul>
<li class="EPL">ManChester United</li>
<li class="EPL">Chelsea</li>
<li id="EPL">Tottenham
<ul>
<li class="EPL">Son</li>
<li class="EPL">Kane</li>
</ul>
</li>
</ul>
<script>
var a = document.getElementsByClassName('EPL');
console.group('a');
for(i=0; i<a.length; i++){
console.log(a[i].textContent);
}
console.groupEnd();
var b = document.getElementById('EPL');
var c = b.getElementsByClassName('EPL');
console.group('b')
for(i=0; i<c.length; i++){
console.log(c[i].textContent);
}
console.groupEnd();
</script>
</body>
</html>class 와 id를 EPL 로 지정한 li 엘리먼트들을 만들었다.
그중 Son, Kane 의 텍스트를 포함한 li 엘리먼트는 id가 EPL인 Tottenham 텍스트를 가진 li 엘리먼트에 속해있다.
콘솔창에 a 그룹으로 묶인 부분은 document 객체로 조회한 내용이다.
즉, 문서 전체에서 Class 명이 EPL 인것을 찾는것이다.
b 그룹으로 묶인 부분은 엘리먼트 id가 EPL 인 엘리먼트에.서. class명이 EPL 인것을 조회한 것이다.
2. 속성 API
<a id="test" href="http://naver.com">Naver</a>위와 같은 HTML 엘리먼트가 있다고 하면,
<a> </a> 와 같은 것들은 태그이름이고 태그 안에있는 내용들(id, href 등)이 속성이다.
태그이름만으로는 정보를 다 표현하는 것이 부족할 때 속성이라는 것을 통해 부가적인 정보를 표현한다.
이 태그안에있는 속성들을 제어하는 것을 코드로 확인해본다.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<a id="sjh" href="localhost">localhost</a>
<script>
var sjh = document.getElementById('sjh');
console.log(sjh.getAttribute('id'));
sjh.setAttribute('title', 'sjh');
console.log(sjh.getAttribute('title'));
sjh.setAttribute('href', 'http://naver.com');
sjh.removeAttribute('title');
console.log(sjh.getAttribute('href'));
console.log(sjh.hasAttribute('title'));
</script>
</body>
</html>먼저 id가 sjh 인 엘리먼트를 sjh 이라는 변수에 담고,
getAttirbute('id') 로 id 속성값을 조회한다.
그 다음 setAttribute('title', 'sjh') 로 title이라는 속성값을 sjh로 세팅한 후 조회한다.
마찬가지로 setAttribute('href', 'http://naver.com') 으로 href 속성값을 수정하여 href 값을 console.log로 확인한다.
title 이라는 속성을 removeAttribute로 지운 뒤 마지막 hasAttribute 로 title 속성이 있는지 없는지를 확인하여 true, false를 반환한다.