Document properties, methods MDN

Document 프로퍼티

Document 메소드

Document.getElementById()

document.getElementById(id) : 지정된 id값을 가진 요소를 반환하는 메소드

const userName = document.getElementById("username");
// id가 "username"인 요소를 가져온다.

Document.getElementsByTagName()

document.getElementsByTagName(tagname) : 지정된 태그 이름을 가진 HTMLCollection을 반환하는 메소드

const collection = document.getElementsByTagName("li"); 
// 모든 li 요소를 가져온다.

Document.getElementsByClassName()

document.getElementsByClassName(classname) : 지정된 클래스 이름을 가진 HTMLCollection을 반환하는 메소드

const collection = document.getElementsByClassName("bold red");
// "bold"와 "red"라 클래스를 가진 모든 요소를 가져온다.

HTMLCollection

: 요소의 문서 내 순서대로 정렬된 일반 컬렉션(arguments처럼 배열과 유사한 객체)
리스트에서 선택할 때 필요한 메소드와 속성을 제공한다.
HTMLCollection MDN

Document.getElementsByName()

document.getElementsByName(name) : 지정된 이름을 가진 NodeList을 반환하는 메소드

const list = document.getElementsByName("fname");
// name이 "fname"인 모든 요소를 가져온다.

NodeList

NodeList 는 배열과 유사한 노드 모음(목록)입니다.
목록의 노드는 인덱스로 액세스할 수 있습니다. 인덱스는 0에서 시작합니다.
길이 Poperty 는 목록의 노드 수를 반환합니다.

Document.importNode()

document.importNode(externalNode, deep) : 현재 문서가 아닌 외부 문서의 노드를 복사하여 현재 문서에 넣어주는 메소드

• node : 문서에 추가될 새로운 노드
• externalNode : 다른 문서에서 가져올 노드
• deep : 해당 노드의 자식 요소까지 가져오려면 true, 해당 요소만 가져오려면 false

const node = document.importNode(externalNode, true);