Dom 접근법

Document

이것은 자바스크립트에서 html 을 불러올 때에 사용하게 되는 매우 중요한 명령어로 html 안의 각종 요소들을 불러와서 수정 혹은 열람할 수 있다.
선택은 자바스크립트 방식으로 Document.getElementById(id 지정시), getElementsByClassName(class 지정시 복수 어레이로 나옴), getElementsByTagName(h1, div 같은 것들 마찬가지 복수 어레이)
혹은 css 방식인 document.queryselector 로 하여 선택할 수 있다 이것은 하위항목을 개별로 불러올 수 있어 가장 많이 쓰인다.
반드시 괄호를 열고 "" 사이에 디렉토리를 넣어줘야 한다. 규칙이 있는데 class는. id는 #로써 구별하며 태그네임은 맨앞에 띄어쓰기없이 쓴다.
보통 html 에서는 class 와 id 를 지정하게 된다.

• document.createElement("@") : html element 를 자바스크립트에서 만든다. 하지만 어디에도 종속되지 않은상태이므로,
• @(ex. document.body(head).appendChild(추가한html태그변수) : @에 대상하는 요소에 추가한 태그를 body, head, 혹은 다른 태그 가장 아래로 종속시킨다. prepend 는 가장 위로!
• first-child : 첫번째 요소로 선택
• Form 태그는 submit(새로고침) 이 기본 옵션이다.
• h1 ~ h6 : 가장 기본이 되는 태그
• a : 앵커 태그이며 다른 사이트로 옮겨주는 역할?
• div : 태그중 하나로 아직 자세히 모름
• form : 태그중 하나로 Submit 이 기본 설정이다.
• span : 태그 아직 잘 모름
• ul : 리스트 li 와 함께 들어오면 리스트가 됨.
• li : list item 의 약자로 추가되는 값을 리스트로 화면에 쫙 나열함.
• img.src 이미지와 소스를 추가하는 코드 로컬 스토리지라면 로컬스토리지이름을 / 로 나눠 설정 가능 경로값은 자바스크립트에서 변수로 지정!
• class, id : <>안에 넣어 아이디와 태그를 설정한다.
• input : 말풍선. placeholder 는 <> 안에 넣어 문구를 설정할 수 있다.
• button : 클릭할 수 있는 버튼 만들기
• required : 필수항목으로 설정
• maxlength : 최대 value 의 길이 값 설정
• classList.add, classList.remove : 클래스 이름 리스트 추가 제거
• @.setAttribute("목표값", "속성값), @.getAttribute("목표값") : 각 각 태그의 속성을 설정하고 가져오는 명령어
• cosnt b = document.queryselectorAll("@")[1] = :first-child 와 같은 효과 작용, 태어난 순서의 태그 개별 선택
• document.cookie = event= ????????????????