Languages/Java Script

[Js] 식별자 API | 조회 API | 속성 API

모든 포스팅은 인프런 [생활코딩] 자바스크립트 강의의 내용을 담고 있으며

출처는 아래의 주소로 "egoing Lee"님의 자료입니다.

상업적인 의도가 아닌 공부한 것을 정리해놓는 목적으로 포스팅 한 것입니다.

www.inflearn.com/course/javascript-%EC%9E%90%EB%B0%94%EC%8A%A4%ED%81%AC%EB%A6%BD%ED%8A%B8-%EA%B0%95%EC%A2%8C#

웹브라우저 Javascript (자바스크립트) - 인프런

생활코딩 자바스크립트 강좌 입니다. 웹브라우저를 직접 제어할 수 있는 자바스크립트 레퍼런스를 공부해 봅니다. 초급 웹 개발 프로그래밍 언어 JavaScript 온라인 강의 자바스크립트 강좌

www.inflearn.com

이번 포스팅은 강의의 "Element 객체" 중 식별자 API, 조회 API, 속성 API 강의를 모두 포함하여 작성하였습니다.

식별자 API

엘리먼트를 제어하기 위해서는 그 엘리먼트를 조회하기 위한 식별자가 필요하다. 본 수업에서는 식별자 API들에 대해서 알아보자.

HTML에서 엘리먼트의 이름과 id 그리고 class는 식별자로 사용된다. 식별자 API는 이 식별자를 가져오고 변경하는 역할을 한다.

Element.tagName

해당 엘리먼트의 태그 이름을 알아낸다. 태그 이름을 변경하지는 못한다.(즉 읽기 전용임 변경해도 다시 돌아옴)

<ul>
    <li>html</li>
    <li>css</li>
    <li id="active" class="important current">JavaScript</li>
</ul>
<script>
console.log(document.getElementById('active').tagName)
</script>

Element.id

문서에서 id는 단 하나만 등장할 수 있는 식별자다. 아래 예제는 id의 값을 읽고 변경하는 방법을 보여준다.

<ul>
    <li>html</li>
    <li>css</li>
    <li id="active">JavaScript</li>
</ul>
<script>
var active = document.getElementById('active');
console.log(active.id);
active.id = 'deactive';
console.log(active.id);
</script>

위처럼 입력하면 id값이 active에서 deactive로 변경된다. 콘솔창으로 출력해보면 바뀐 결과가 출력된다.

Element.className

클래스는 여러개의 엘리먼트를 그룹핑할 때 사용한다. 이 매소드 보다는 아래 표현을 더 많이 쓴다.

<ul>
    <li>html</li>
    <li>css</li>
    <li id="active">JavaScript</li>
</ul>
<script>
var active = document.getElementById('active');
// class 값을 변경할 때는 프로퍼티의 이름으로 className을 사용한다.
active.className = "important current";
console.log(active.className);
// 클래스를 추가할 때는 아래와 같이 문자열의 더한다.
active.className += " readed"
</script>

자바스크립트에서 예약어인 경우엔 html 속성이름과 프로퍼티 이름이 일치하지 않는 경우가 많다.

Element.classList

className에 비해서 훨씬 편리한 사용성을 제공한다. (편리한만큼 사용하기가 좀 까다로움)

<ul>
    <li>html</li>
    <li>css</li>
    <li id="active" class="important current">JavaScript</li>
</ul>
<script>
function loop(){
    for(var i=0; i<active.classList.length; i++){
        console.log(i, active.classList[i]);
    }
}
// 클래스를 추가
</script>
<input type="button" value="DOMTokenList" onclick="console.log(active.classList);" />
<input type="button" value="조회" onclick="loop();" />
<input type="button" value="추가" onclick="active.classList.add('marked');" />
<input type="button" value="제거" onclick="active.classList.remove('important');" />
<input type="button" value="토글" onclick="active.classList.toggle('current');" />

classList를 통해 add, remove가 가능하고, 있을 때 없애고 없을 땐 생기게 하고 싶다면 toggle을 사용하면 된다.

자세한 내용은 아래 영상을 참고해서 다시 한번 살펴보도록 하자!

www.youtube.com/watch?v=9XyowP9VjDo&feature=youtu.be

조회 API

지금까지 document.getElementsBy* 메소드를 통해서 엘리먼트를 조회했다. document 객체는 문서 전체를 의미하는 엘리먼트이기 때문에 document의 조회 메소드는 문서 전체를 대상으로 엘리먼트를 조회한다.

Element 객체 역시도 getElementsBy* 엘리먼트를 가지고 있는데 Element 객체의 조회 메소드는 해당 엘리먼트의 하위 엘리먼트를 대상으로 조회를 수행한다.

<!DOCTYPE html>
<html>
<head>
	<title> Object 확장</title>
</head>
<body>
<ul>
	<li class = "marked">html</li>
	<li>css</li>
	<li id="active">Javascript
		<ul>
			<li>JavaScript Core</li>	
			<li class="marked">DOM</li>
			<li class="marked">BOM</li>
		</ul>
	</li>
</ul>
<script>
	var list = document.getElementsByClassName('marked');
	console.group('document');//그룹 document
	for(var i = 0; i<list.length; i++){
		console.log(list[i].textContent);
	}
	console.groupEnd(); //document그룹 끝 

	console.group('active'); //그룹이름 
	var active = document.getElementById('active'); //active라는 객체로 담음. 즉 여기에 해당하는 하위만 list에 담기게 됨 
	var list = active.getElementsByClassName('marked');//active객체의 하위 객체들 중 class가 marked인 것!
	for(var i = 0; i<list.length; i ++){
		console.log(list[i].textContent);
	}
	console.groupEnd();
</script>
	
</body>
</html>

실행결과

document객체의 getElement.. 와 element 객체의 getElement ..가 다르게 출력되는 것을 확인 할 수 있다.

즉 document.getElementsByClassName으로 조회를 하면 전체 문서에서 조회가 되는 것이고,

특정한 element의 getElements 메소드를 사용하게 되면 그 객체의 하위 엘리먼트들만 조회하게 되는 것이다.

속성 API

속성은 HTML에서 태그명만으로는 부족한 부가적인 정보라고 할 수 있다. 이 속성을 어떻게 제어하는가 알아보자.

속성을 제어하는 API는 아래와 같다. 각각의 기능은 이름을 통해서 충분히 유추할 수 있을 것이다.

Element.getAttribute(name)
Element.setAttribute(name, value)
Element.hasAttribute(name); //해당하는 속성 값이 있는지 없는지 여부를 알려줌.
Element.removeAttribute(name);

<a id="target" href="http://opentutorials.org">opentutorials</a>
<script>
var t = document.getElementById('target');
console.log(t.getAttribute('href')); //http://opentutorials.org
t.setAttribute('title', 'opentutorials.org'); // title 속성의 값을 설정한다.
console.log(t.hasAttribute('title')); // true, title 속성의 존재여부를 확인한다.
t.removeAttribute('title'); // title 속성을 제거한다.
console.log(t.hasAttribute('title')); // false, title 속성의 존재여부를 확인한다.
</script>

값을 변수로 담아서 객체에 해당하는 값을 get메소드를 통해 가져올 수도 있고, set 메소드를 이용해서 속성에 해당하는 값을 변경할 수도 있다.

속성과 프로퍼티

속상과 프로퍼티는 조금 차이가 있다. 어떠한 차이가 있는지 알아보도록 하자.

모든 엘리먼트의 (HTML)속성은 (JavaScript 객체의) 속성과 프로퍼티로 제어가 가능하다. 예제를 보자.

<p id="target">
    Hello world
</p>
<script>
    var target = document.getElementById('target');
    // attribute 방식임. attribute에 접근 하는 것이 속성방식!
    target.setAttribute('class', 'important');
    // property 방식
    target.className = 'important';
</script>

setAttribute('class', 'important')와 className = 'important'는 같은 결과를 만든다.

하지만 전자는 attribute 방식(속성이라고 부르겠다)이고 후자는 property 방식이다. property 방식은 좀 더 간편하고 속도도 빠르지만 실제 html 속성의 이름과 다른 이름을 갖는 경우가 있다. 그것은 자바스크립트의 이름 규칙 때문이다.

프로퍼티 방식의 경우 몇가지 예외가 있기 때문에 기억하고 사용해야 한다.

심지어 속성과 프로퍼티는 값이 다를수도 있다. 아래 코드를 실행한 결과는 속성과 프로퍼티의 값이 꼭 같은 것은 아니라는 것을 보여준다.

<a id="target" href="./demo1.html">ot</a>
<script>
//현재 웹페이지가 http://localhost/webjs/Element/attribute_api/demo3.html 일 때 
var target = document.getElementById('target');
// http://localhost/webjs/Element/attribute_api/demo1.html 
console.log('target.href', target.href);
// ./demo1.html 
console.log('target.getAttribute("href")', target.getAttribute("href"));
</script>

미묘하게 다른 문제들이 있으니, 각각 상황에 맞게 사용하는 것이 좋은 방법이다.

'Languages > Java Script' 카테고리의 다른 글

[Js] Node 객체 \| Node 관계 API (0)	2021.02.10
[Js] jQuery 속성 제어 API \| jQuery 조회 범위 제한 \| javascript (0)	2021.02.10
[Js] Element 객체 \| Node \| 식별자 \| 조회 \| 엘리먼트 (0)	2021.02.08
[Js] jQuery 객체 \| map() \| jQuery API (0)	2021.02.08

Contents

새소식

인기 검색어