210819 어제 이어서 browser 객체 중 navigator 객체를 학습했고, DOM을 조작하는 기본 방법에 대해 익혔다.
/*
최상위 node - html
노드 node - 요소(Element)노드 1, 속성 노드 2(id 등), 텍스트 노드(공백 문자 포함) 3
선택자
원거리 선택자 >
id선택자 - 선택대상.getElementById('아이디명');
요소명 선택자 - 선택대상.getElementByTagName('태그명'); //배열
근거리 선택자 > 특정 요소를 기준으로 상대적인 다른 요소를 선택할 때
parentNode - 선택한 요소 기준으로 부모 요소 선택
childNodes - 선택한 요소 기준으로 자식 요소 선택
children - 선택한 요소 기준으로 자식 요소 선택
firstChild - 선택한 요소 기준으로 첫 번째 자식 요소 선택
lastChild - 선택한 요소 기준으로 마지막 자식 요소 선택
previousSibling - 형제 요소 중 이전 요소 선택
nextSibling - 형제 요소 중 다음 요소 선택
tagName(속성) - 선택된 요소의 태그명을 반환
nodeValue(속성) - 선택된 요소의 텍스트를 반환
*/
/*
생성 - createElement('요소명');
appendTextNode('text'); / createTextNode('텍스트')
추가 - 선택 요소.appendChild(새 요소) > 선택 요소에 새로운 자식 요소를 추가
부모 요소.insertBefore(새 요소, 자식 요소) > 자식 요소 앞에 새로운 자식 요소 추가
교체 - 부모 요소.replaceChild(새 요소, 자식 요소) > 자식 요소를 새 요소로 덮어쓰기
삭제 - 부모 요소.removeChild(자식 요소) > 자식 요소 삭제
복제 - 선택 요소.cloneNode(true or false) > 선택 요소를 복제해서 true일 경우 하위 요소까지 모두 복제
속성 부여 - 선택 요소.setAttribute('속성', '값') > 선택 요소에 해당 속성 값 부여
*/