1. document.querySelector("선택자")
2. document.querySelectorAll("선택 자명")
3. innerHTML , innerText, textContent
4. 속성
5. DOM 탐색
6. transitionend
| 설 | mdn | |
| querySelector("선택자") | 해당 선택자를 만족하는 요소하나반환 | 바로가기 |
| querySelectorAll("선택자명") | 해당 선택자를 만족하는 모든요소반환 | 바로가기 |
| 선택자 | 바로가기 | |
| innerHTML | 바로가기 | |
| innerText | 바로가기 | |
| textContent | 바로가기 |
# document.querySelector("선택자")
let element = parentNode.querySelector(selector);
# document.querySelectorAll("선택 자명")
let elementList = parentNode.querySelectorAll(selector);
let nodeList = document.querySelectorAll(selector);
let elements = Array.from(nodeList);NodeList객체는 배열 객체가 아니라 배열과 유사한 객체입니다. 그러나 최신 웹 브라우저에서는 forEach() 메서드나 for... of루프를 사용할 수 있습니다.
NodeList배열로 변환하려면 Array.from() 다음과 같은 방법을 사용합니다.
let firstHeading = document.querySelector('h1');
let heading2 = document.querySelectorAll('h2');
let note = document.querySelector('.menu-item'); //클래스의 첫 번째 요소
let notes = document.querySelectorAll('.menu-item'); //menu-item가 포함된 모든요소
let logo = document.querySelector('#logo');
//id문서에서 고유해야 하므로 querySelectorAll()관련이 없습니다.
속성 선택자
[attribute]
[attribute=value]
[속성명 = 속성값] : [속성명] 및 [속성값]이 동시에 일치하는 요소를 선택자로 지정하는 기능
[attribute~=value]
[속성명 ~= 속성값] : 특정 문자 포함
[속성명]이 일치할 때 특정 문자가 [속성값]에 들어간 경우 선택자로 지정하는 기능입니다.
[attribute|=value]
[속성명 |= 속성값] : 접두사 포함
[속성명]이 일치하고, [속성값]이 특정 접두사로 시작하는 요소를 선택자로 지정합니다.
[attribute^=value]
[속성명 ^= 속성값] : 접두사 포함
[속성명]이 일치하고, [속성값]이 특정 접두사로 시작되는 요소를 선택자로 지정합니다.
[attribute$=value]
[속성명 $= 속성값] : 접미사 포함
특정 접미사로 끝나는 속성값을 선택자로 지정하고 싶은 경우 $= 기호를 사용합니다.| mdn 참고 | 바로가기 |
선택자
let autoplay = document.querySelector('[autoplay]');
let autoplays = document.querySelectorAll('[autoplay]');
let elements = document.querySelectorAll('div, p');
let links = document.querySelector('p a');
let listItems = document.querySelectorAll('ul > li');
let listItems = document.querySelectorAll('ul.nav > li');
let links = document.querySelectorAll('p ~ a');
let links = document.querySelectorAll('h1 + a');
let links = document.querySelector('h1 + a');
let listItem = document.querySelectorAll('li:nth-child(2)');
let links = document.querySelector('p::first-line');
# innerHTML , innerText, textContent
innerHTML :
element내에 포함된 HTML 또는 XML 마크업을 가져오거나 태그와 함께 입력하여 내용을 직접 설정할 수 있고
HTML 코드를 JavaScript 코드에서 새 내용으로 쉽게 변경할 수 있습니다.
innerText :
element 내에서 사용자에게 보이는 text값들을 가져오거나 설정할 수 있습니다.
textContent :
'Node'의 속성으로, 사용자에게 보이는 text값만 읽어오는 innetText와는 달리 <script>나 <style> 태그에 상관없이 해당 노드가 가지고 있는 텍스트 값을 모두 읽어옵니다.
| 설명 | mdn | |
| parentNode | DOM 트리에서 지정된 노드의 상위를 반환 | 바로가기 |
| parentElement | 부모요소 | 바로가기 |
| firstChild | 노드의 첫 번째 자식을 반환 | 바로가기 |
| firstElementChild | 첫번째 요소 | 바로가기 |
| lastElementChild | 마지막 요소 | 바로가기 |
| nextSibling | 다음에 있는 노드를 반환 | 바로가기 |
| nextElementSibling | 다음 요소 | 바로가기 |
| previousElementSibling | 이전 요소 | 바로가기 |
| children | 하위요 | 바로가기 |
| 프로퍼티 이름 | 설명 |
| parentNode | 이 노드의 부모 노드를 참조 , document객체의 부모 노드는 null |
| childNoses | 이 노드의 자식 노드의 참조를 저장할 유사배열객체 (NodeList ) |
| firstChild | 이 노드의 첫번째 자식 노드. 자식 노드가 없을때는 null |
| lastChild | 이 노드의 마지막 자식 노드 자식노드가 없을때는 null |
| nextSibling | 이 노드와 같은 부모 노드를 가진 이 노드 다음의 형제 노드 |
| previousSlibling | 이 노드와 같은 부모 노드를 가진 이 노드 이전 형제 노드 |
| nodeType | 노드 유형을 뜻하는 숫자(1: 요소 노드 , 3:텍스트노드, 9:Document) |
| nodeValue | 텍스트 노드의 텍스트 콘텐츠 요소 노드에서는 null |
| nodeName | 요소 노드는 대문자로 바뀐 요소 이름이 들어가고 텍스트 노드는 #text |
document.childNodes[0].childNodes[2]
document.firstChild.lastChild
# 속성
| 속성 | 설명 | mdn |
| hasAttribute | 속성의 존재 확인 | 바로가기 |
| getAttribute | 속성의 값 가져오기 | 바로가기 |
| setAttribute | 속성값 변경 | 바로가기 |
| removeAttribute | 속성값 제거 | 바로가기 |
- elem.hasAttribute(name) — 속성의 존재 확인.
- elem.getAttribute(name) — 속성값을 가져옴.
- elem.setAttribute(name, value) — 속성값을 변경함.
- elem.removeAttribute(name) — 속성값을 제거함.
HTML 속성 (HTML Attributes)
HTML 속성은 HTML 문서에서 요소를 정의할 때 사용하는 속성입니다. 이 속성들은 HTML 태그 안에 작성되며, 요소의 초기 상태를 설정합니다.
<a id="link" href="/page.html" title="example">사이트명</a>
href, id, title은 HTML 속성
- 문서에 직접 작성됨: HTML 문서 내에서 직접 설정됩니다.
- 초기 값 설정: 요소의 초기 상태를 정의합니다.
- 문자열로 저장: HTML 속성 값은 항상 문자열로 저장됩니다.
DOM 속성 (DOM Properties)
DOM 속성은 JavaScript를 통해 접근하고 조작할 수 있는 객체 속성입니다. DOM 속성은 HTML 요소를 JavaScript 객체로 표현하며, 이 객체의 속성으로 접근됩니다.
href는 link 요소의 DOM 속성으로 접근되고 수정
<a id="link" href="/page.html" title="example">사이트명</a>
<script>
let link = document.getElementById('link');
console.log(link.href); // DOM 속성에 접근
link.href = "/newpage.html"; // DOM 속성 수정
</script>
- JavaScript 객체 속성: HTML 요소를 JavaScript 객체로 표현한 것입니다.
- 동적으로 변경 가능: JavaScript를 통해 읽기 및 쓰기가 가능합니다.
- 다양한 데이터 타입: DOM 속성은 문자열뿐만 아니라 객체, 배열 등 다양한 데이터 타입을 가질 수 있습니다.
차이점
- 초기 값과 동적 값:
- HTML 속성은 요소의 초기 상태를 설정합니다.
- DOM 속성은 JavaScript를 통해 동적으로 변경될 수 있습니다.
- 데이터 타입:
- HTML 속성은 항상 문자열입니다.
- DOM 속성은 다양한 데이터 타입을 가질 수 있습니다 (문자열, 숫자, 객체 등).
- 접근 방법:
- HTML 속성은 getAttribute() 및 setAttribute() 메서드를 사용하여 접근합니다.
- DOM 속성은 점 표기법을 사용하여 직접 접근합니다.
# 요소의 트리
| 프로퍼티 이름 | 설명 |
| children | 이 요소의 자식 요소 참조를 저장한 유사배열객체(NodeList) |
| parentElement | 이 요소의 부모 요소 객체를 참조 |
| firstElementChild | 이 요소의 첫번째 자식 요소 객체를 참조 |
| lastElementChild | 이 요소의 마지막 자식 요소 객체를 참조 |
| nextElementSibling | 이 요소와 같은 부모를 가진 이 요소 다음의 형제 요소 객체를 참조 |
| previousElementSibling | 이 요소와 같은 부모를 가진 이 요소 이전의 형제 요소 객체를 잠조 |
| chnildElementCount | 자식 요소의 개수 children.length와 같음 |
| Element.closest() | 특정 요소에서부터 시작하여 해당 요소의 자신을 포함한 조상 요소 중에서 가장 가까운 지정된 셀렉터에 해당하는 요소를 찾습니다. mdn |
| 노드의 종류 | 생성자 | nodeName | nodeValue | nodeType |
| 문서노드 | HTMLDocuemnt | #document | null | 9 |
| 요소노드 | HTMLElement | 요소이름(대문자) | null | 1 |
| 텍스트노드 | Text | #text | 텍스트 | 3 |
| 주석노드 | Comment | #comment | 주석 내용 | 8 |
| 속성노드 | Attr | 속성이름 | 속성 값 | 2 |
상위요소
<div id="main">
<p class="note">테스트입니다.</p>
</div>
<script>
let note = document.querySelector('.note');
//.note먼저 메소드를 사용하여 클래스 가 있는 요소를 선택합니다
console.log(note.parentNode);
//요소의 부모 노드를 찾습니다.
</script>
결과)
<div id="main">
<p class="note">테스트입니다.</p>
</div>
다음 형제요소
let nextSibling = currentNode.nextElementSibling;<ul id="menu">
<li>Home</li>
<li>Products</li>
<li class="current">Customer Support</li>
<li>Careers</li>
<li>Investors</li>
<li>News</li>
<li>About Us</li>
</ul>
js)
let current = document.querySelector('.current');
let nextSibling = current.nextElementSibling;
console.log(nextSibling);
이전 형제요소
let prevSibling = currentNode.previousElementSibling;let current = document.querySelector('.current');
let prevSiblings = current.previousElementSibling;
console.log(prevSiblings);
첫 번째 하위요소 가져오기
지정된 요소의 첫 번째 하위 요소를 가져오려면 firstChild해당 요소의 속성을 사용합니다.
firstChild속성은 요소 노드, 텍스트 노드 또는 주석 노드와 같은 모든 노드 유형이 될 수 있는 하위 노드를 반환합니다.
let firstChild = parentElement.firstChild; <ul id="menu">
<li class="first">Home</li>
<li>Products</li>
<li class="current">Customer Support</li>
<li>Careers</li>
<li>Investors</li>
<li>News</li>
<li class="last">About Us</li>
</ul>
js)
let content = document.getElementById('menu');
let firstChild = content.firstChild.nodeName;
console.log(firstChild);
결과: #text
첫 번째 요소
let firstElementChild = parentElement.firstElementChild;let content = document.getElementById('menu');
console.log(content.firstElementChild);
결과
<li class="first">Home</li>
마지막 노드와 마지막요소
let lastChild = parentElement.lastChild;
let lastChild = parentElement.lastElementChild;
let menu = document.getElementById('menu');
console.log(main.lastElementChild);
결과)
<li class="last">About Us</li>
자식노드
let children = parentElement.childNodes;
하위요소
let children = parentElement.children;
let menu = document.getElementById('menu');
let children = menu.children;
console.log(children);firstChild.lastChild : 텍스트 노드, 주석 노드 및 요소 노드를 포함한 모든 노드 유형일 수 있는 노드의 첫 번째 및 마지막 하위를 반환합니다
firstElementChild.lastElementChild : 첫 번째 및 마지막 하위 요소 노드를 반환합니다
지정된 노드의 모든 노드 유형에 대한 모든 하위 노드의 childNodes라이브를 반환합니다.
NodeList하위 항목은 Element지정된 노드의 모든 하위 노드를 반환합니다.
Document 객체의 프로퍼티
# closest()
특정 요소에서부터 시작하여 해당 요소의 자신을 포함한 조상 요소 중에서 가장 가까운 지정된 셀렉터에 해당하는 요소를 찾습니다.
<div class="container">
<div class="parent">
<button class="box">클릭</button>
</div>
</div>
<script>
const box = document.querySelector('.box')
box.addEventListener('click', (e) => {
const tg = e.target;
const closestContainer = tg.closest('.container');
if (closestContainer) {
alert('Container 찾음');
} else {
alert('Container 없음');
}
});
</script>
# transitionend
| Element: transitionend event | mdn |
transitionend 이벤트는 CSS 트랜지션(transition)이 완전히 종료되었을 때 발생하는 이벤트입니다.
transitionend 이벤트는 애니메이션이 끝날 때마다 발생하며, 이를 통해 JavaScript에서 애니메이션의 종료를 감지하고 특정 동작을 수행할 수 있습니다. 이벤트 핸들러를 등록하여 애니메이션이 종료되는 시점을 감지하고 그에 따라 필요한 작업을 수행할 수 있습니다.
const transition = document.querySelector(".transition");
transition.addEventListener("transitionend", () => {
console.log("Transition ended");
});
'javascript+es6' 카테고리의 다른 글
| [ javascript ] 13. 이벤트 흐름(버블링과 캡처링) , preventDefault (0) | 2023.09.27 |
|---|---|
| [ javascript ] 12. 이벤트 종류와 작성법 (0) | 2023.09.24 |
| [ javascript ] 10. DOM , BOM (0) | 2023.09.20 |
| [ javascript ] 09. Date객체, Math객체 (0) | 2023.09.19 |
| [ javascript ] 08. Array객체 (0) | 2023.09.17 |