getElementById
Document.getElementById() 메서드는 주어진 문자열과 일치하는 id 속성을 가진 요소를 찾고, 이를 나타내는 Element 객체를 반환한다. ID는 문서 내에서 유일해야 하기 때문에 특정 요소를 빠르게 찾을 때 유용하다.
반환 값
주어진 ID와 일치하는 DOM 요소를 나타내는 Element 객체. 문서 내에 주어진 ID가 없으면 null.
Document.querySelector()나 Document.querySelectorAll()과는 달리 getElementById()는 전역 document 객체의 메서드로만 사용할 수 있고, DOM의 다른 객체는 메서드로 가지고 있지 않다. ID 값은 문서 전체에서 유일해야 하며 "국지적"인 버전을 쓸 이유가 없기 때문.
문서에 없는 요소는 getElementById()가 팀색하지 않는다. 요소를 동적으로 생성해서 ID를 부여하더라도, Node.insertBefore()나 비슷한 메서드로 문서 트리에 삽입해야 getElementById()로 접근할 수 있다.
var element = document.createElement('div');
element.id = 'testqq';
var el = document.getElementById('testqq'); // el이 null!
getElementsByTagName & className
document.getElementsByTagName(' ex) p')
document.getClassName(' ex) myclass)
querySelector & querySelectorAll
Document.querySelector(css선택자) 는 제공한 선택자 또는 선택자 뭉치와 일치하는 문서 내 첫 번째 Element를 반환한다. 일치하는 요소가 없으면 null을 반환한다.
반환 값
제공한 CSS 선택자를 만족하는 첫 번째 Element 객체. 결과가 없다면 null.
선택자를 만족하는 모든 요소의 목록이 필요하다면 querySelectorAll()을 사용한다.
innerHTML & textContent & innerText
HTMLElement 인터페이스의 innerText 속성은 요소와 그 자손의 렌더링 된 텍스트 콘텐츠를 나타냅니다. innerText는 사용자가 커서를 이용해 요소의 콘텐츠를 선택하고 클립보드에 복사했을 때 얻을 수 있는 텍스트의 근삿값을 제공한다.
Node 인터페이스의 textContent 속성은 노드와 그 자손의 텍스트 콘텐츠를 표현한다.
innerText 과 textContent의 차이점
- 기본적으로, innerText는 텍스트의 렌더링 후 모습을 인식할 수 있지만, textContent는 그렇지않다.
- textContent는 <script>와 <style> 요소를 포함한 모든 요소의 콘텐츠를 가져옵니다. 반면 innerText는 "사람이 읽을 수 있는" 요소만 처리한다.
- textContent는 노드의 모든 요소를 반환합니다. 그에 비해 innerText는 스타일링을 고려하며, "숨겨진" 요소의 텍스트는 반환하지 않는다.
- 또한, innerText의 CSS 고려로 인해, innerText 값을 읽으면 최신 계산값을 반영하기 위해 리플로우가 발생합니다. (리플로우 계산은 비싸므로 가능하면 피해야 한다.)
<h3>원본 요소:</h3>
<p id="source">
<style>#source { color: red; }</style>
아래에서<br>이 글을<br>어떻게 인식하는지 살펴보세요.
<span style="display:none">숨겨진 글</span>
</p>
<h3>textContent 결과:</h3>
<textarea id="textContentOutput" rows="6" cols="30" readonly>...</textarea>
<h3>innerText 결과:</h3>
<textarea id="innerTextOutput" rows="6" cols="30" readonly>...</textarea>
<script>
const source = document.getElementById('source');
const textContentOutput = document.getElementById('textContentOutput');
const innerTextOutput = document.getElementById('innerTextOutput');
textContentOutput.innerHTML = source.textContent;
innerTextOutput.innerHTML = source.innerText;
</script>
원본 요소:
아래에서
이 글을
어떻게 인식하는지 살펴보세요.
textContent 결과:
innerText 결과:
innerHTML 과 textContent의 차이점
Element.innerHTML는 이름 그대로 HTML을 반환한다. 간혹 innerHTML을 사용해 요소의 텍스트를 가져오거나 쓰는 경우가 있지만, HTML로 분석할 필요가 없다는 점에서 textContent의 성능이 더 좋다.
이에 더해, textContent는 XSS 공격 (en-US)의 위험이 없다.
Attribute & Property
Attribute 특징 1. 애트리뷰트는 HTML에 의해 정의된다.
<div id="content" name="content-name" custom="custom"/><div> 요소는 값이 "content"인 id 애트리뷰트, 값이 "content-name"인 name 애트리뷰트, 값이 "custom"인 custom 애트리뷰트를 가진다.
Attribute 특징 2. 애트리뷰트의 타입은 문자열(string)입니다.
위 예제에서 사용된 <div> 요소의 id 애트리뷰트의 타입을 typeof 연산자로 확인하면 string을 반환한다.
const content = document.getElementById("content");
console.log(typeof content.getAttribute("id")); // string
console.log(typeof content["id"]); // string
Property 특징 1. 프로퍼티(Property)는 DOM에 존재하며, DOM은 JavaScript의 객체입니다. 따라서, JavaScript에서 일반 객체를 다루는 것처럼 DOM에 프로퍼티를 추가하거나 가져올 수 있으며 프로퍼티의 타입은 모든 타입이 될 수 있다.
<div id="content" name="content-name" custom="custom"/>const content = document.getElementById("content");
content.newProperty = 100;
console.log(content.newProperty); // 100
console.log(typeof content.newProperty); // number
Property 특징 2. 사용자 정의 프로퍼티가 아닌 경우 점 표기법 및 대괄호 표기법으로 가져올 수 없다.
<div id="content" name="content-name" custom="custom"/>const content = document.getElementById("content");
console.log(content.id); // content
console.log(content.name); // undefined
console.log(content.custom); // undefined
console.log(content["id"]); // content
console.log(content["name"]); // undefined
console.log(content["custom"]); // undefinedid, name, class 등과 같은 프로퍼티는 점 표기법 및 대괄호 표기법으로 가져올 수 있지만, custom과 같은 사용자 정의 프로퍼티는 가져올 수 없다.
참고로 name 프로퍼티는 <div> 태그에서 기본 애트리뷰트가 아닌 사용자 정의 애트리뷰트로 간주하므로 위 예제에서 undefined를 반환한다. class는 JavaScript에서 예약어이므로 class가 아닌 className을 사용한다.
Property 특징 3. 기본 값이 존재하는 애트리뷰트는 값을 변경할 수 없다.
<input id="content" value="test" />const content = document.getElementById("content");
content.value = "hello";
console.log(content.getAttribute("value")); // test<input> 태그의 value 애트리뷰트에 값이 존재하므로 JavaScript에서 값을 변경할 수 없다.
그 외 차이점
- HTML 애트리뷰트는 대소문자를 구분하지 않지만, DOM 프로퍼티는 대소문자를 구분합니다.
- HTML 애트리뷰트의 데이터 타입은 항상 문자열이지만, DOM 프로퍼티는 모든 데이터 타입을 가질 수 있습니다.
- "data-"로 시작하는 모든 HTML 애트리뷰트는 DOM 프로퍼티의 "dataset"과 매핑됩니다.
https://developer-talk.tistory.com/870
HTMLCollection & NodeList
HTMLCollection
- getElementByTagName()
- getElementByClassName()
NodeList
- getElementByName()
- querySelectorAll()
차이점
1. HTMLCollection와 NodeList의 첫 번째 차이점은 HTMLCollection 객체는 <div>, <span>, <p> 등과 같은 요소 노드만 포함하고 NodeList 객체는 요소 노드, 속성 노드, 텍스트 노드 등을 포함한다.
2. 두 번째 차이점은 자식 요소 노드를 접근하는 방법이 다르다.
3. HTMLCollection과 NodeList의 가장 큰 차이점은 HTMLCollection은 DOM에 추가된 새로운 요소를 가져오지만, NodeList는 가져오지 못한다.
4. HTMLCollection은 배열이 아니라 배열과 유사한 유사 배열 객체(Array-like Objects)다. 따라서, 각 요소를 접근하려면 for...of 문을 사용해야한다. NodeList는 forEach() 메서드가 존재함.
https://developer-talk.tistory.com/870
ClassList
css에서 style 특성으로 인라인 스타일을 지정할 수 있지만 이 방법같은 경우 많은 스타일을 한 번에 설정할 때 좋은 방법이 아니다.
이때는 css 클래스를 만들어서 그 클래스를 적용하는 것이 낫다.
js도 똑같이 클래스를 적용해야하는 경우가 흔하다.
클래스를 추가하는 방법에는 여러가지가 있다.
1. setAttribute
<!DOCTYPE html>
<head>
<style>
.purple {
color: purple;
}
</style>
</head>
<body>
<h1 id="h1">H1</h1>
<script>
const h1 = document.querySelector('#h1');
h1.setAttribute('class', 'purple');
</script>
</body>
</html>