133_자바스크립트 , 요소 읽어 오기 [적용] 요소를 가져오고 싶을 때 요소에서 클래스 작업을 하고 싶을 때 [문법] 속성 의미 타입 document.documentElement 루트 요소 html 요소 document.head head 요소 head 요소 document.body body 요소 body 요소 [내용] document.documentElement는 문서의 루트 요소를 지정한다. HTML 문서의 html 요소를 말한다. 'console.dir(dicument.documentElement)'의 콘솔 로그에서 html 요소가 반환되는 것을 확인할 수 있다. document.head는 head 요소를 가져오며, head에 script 태그와 link 태그를 동적으로 삽입할 수 있다. const..

132_자바스크립트 클래스명으로 요소 읽어 오기 [적용] 클래스명과 일치하는 요소를 모두 가져오고 싶을 때 [문법] 메소드 의미 반환 document.getElementsByClassName(클래스명) 클래스명 일치 요소 모두 가져오기 요소의 배열(HTMLCollection) [내용] document.getElementsByClassName()은 클래스명과 일치하는 HTML 요소를 모두 가져오며, querySelector()와 달리 인수는 클래스명만 전달할 수 있다. HTML index.html JavaScript main.js // foo 요소 document.getElementsByClassName('box'); 각 요소의 처리는 for문을 사용하며, forEach()는 사용할 수 없다. const ..

131_자바스크립트 셀렉터 조건 만족하는 요소 모두 가져오기 [적용] 셀렉터명과 일치하는 요소를 정리하여 작업을 처리하고 싶을 때 [문법] 메소드 의미 반환 document.querySelectorAll(셀렉터명) 셀렉터명 일치 요소 모두 가져오기 배열(NodeList) [내용] document.querySelectorAll()은 셀렉터명과 일치하는 HTML 요소를 모두 가져오며, 반환값은 요소를 하나의 배열로 정리한 객체(NodeList 객체)다. 배열 요소의 값은 forEach()를 사용해 접근할 수 있다. 콜백 함수를 사용한 요소의 처리도 가능하다. HTML index.html 박스1 박스2 박스3 JavaScript main.js // .box 요소 모두 가져오기 const boxList = do..

130_자바스크립트 ID의 각 요소 값 읽어오기 [적용] ID 데이터와 일치하는 요소를 가져오고 싶을 때 [문법] 메소드 의미 반환 document.getElementById(ID명) ID명 일치 요소 가져오기 요소(HTMLElement) [내용] document.getElementById() 는 ID명을 지정하여 하나의 HTML 요소를 가져오는 메소드다. querySelector()와 달리 인수에는 셀렉터명이 아닌 ID명을 전달하므로 주의가 필요하다. 즉 HTML의 id="foo" 요소를 가져오기 위해서는 #를 뺀 'foo'만을 인수로 전달해야 한다. HTML index.html JavaScript main.js // foo 요소 const element = document.getElementNyId(..

129_자바스크립트 셀렉터 사용하기 [적용] 셀렉터를 사용해 지정 요소를 가져오고 싶을 때 [문법] 메소드 의미 반환 document.querySelector(셀렉터명) 셀렉터명 일치 요소 가져오기 요소(Element) [내용] HTML 요소를 다루기 위해서는 우선 대상 HTML 요소를 읽어 와야 한다. 자바스크립트는 셀렉터명, ID명, 클래스명 등의 지정을 통해 HTML 요소를 읽어 올 수 있다. document.querySelector()는 인수의 셀렉터명과 일치하는 하나의 요소를 가져오는 메소드다.셀렉터는 요소 지정을 위한 조건식으로 CSS의 #ID명, .클래스면, :nth-child(번호) 등과 같다.일치하는 요소가 하나 이상이라면 첫 요소를 반환한다. HTML index.html JavaScri..

128_자바스크립트 요소 다루기 [적용] 자바스크립트에서 HTML 요소를 다루고 싶을 때 [내용] 자바스크립트는 웹 페이지의 텍스트나 스타일을 변경할 수 있다. 이와 같이 HTML 각 요소에 접근하는 방식은 DOM(Document Object Model) 인터페이스로 정의되어 있다. DOM은 트리 구조를 사용하여 HTML 문서를 다룬다. HTML index.html 타이틀 리스트 1 리스트 2 리스트 3 트리의 각 구성 요소를 '노드(Node)'라고 한다. '혹' 또는 '마디'라는 뜻의 노드는 자바스크립트에서 Node 객체로 취급하며, 요소를 가져오거나 추가하는 작업이 가능하다. Node 객체의 속성과 메소드는 '노드.속성' 과 '노드.메소드'로 접근이 가능하다. HTML 문서전체의 요소는 documen..