Javascript navigator 객체, DOM(학습 47일차 TIL)

김영진·2021년 8월 19일
0

210819 어제 이어서 browser 객체 중 navigator 객체를 학습했고, DOM을 조작하는 기본 방법에 대해 익혔다.

Javascript Basic

  • navigator 속성 중 가장 많이 쓰이는 .userAgent로 브라우저의 전체적인 정보를 가져올 수 있다.
  • DOM(Document Object Model)은 html 문서를 도식화 하는 것.
    /*
    최상위 node - html
    노드 node - 요소(Element)노드 1, 속성 노드 2(id 등), 텍스트 노드(공백 문자 포함) 3

    선택자
    원거리 선택자 > 
    id선택자 - 선택대상.getElementById('아이디명');
    요소명 선택자 - 선택대상.getElementByTagName('태그명'); //배열

    근거리 선택자 > 특정 요소를 기준으로 상대적인 다른 요소를 선택할 때

    parentNode - 선택한 요소 기준으로 부모 요소 선택
    childNodes - 선택한 요소 기준으로 자식 요소 선택
    children - 선택한 요소 기준으로 자식 요소 선택
    firstChild - 선택한 요소 기준으로 첫 번째 자식 요소 선택
    lastChild - 선택한 요소 기준으로 마지막 자식 요소 선택
    previousSibling - 형제 요소 중 이전 요소 선택
    nextSibling - 형제 요소 중 다음 요소 선택
    tagName(속성) - 선택된 요소의 태그명을 반환
    nodeValue(속성) - 선택된 요소의 텍스트를 반환
    */
  • DOM 조작
    /*
    생성 - createElement('요소명');
                 appendTextNode('text'); / createTextNode('텍스트')
    추가 - 선택 요소.appendChild(새 요소) > 선택 요소에 새로운 자식 요소를 추가
           부모 요소.insertBefore(새 요소, 자식 요소) > 자식 요소 앞에 새로운 자식 요소 추가      
    교체 - 부모 요소.replaceChild(새 요소, 자식 요소) > 자식 요소를 새 요소로 덮어쓰기
    삭제 - 부모 요소.removeChild(자식 요소) > 자식 요소 삭제
    복제 - 선택 요소.cloneNode(true or false) > 선택 요소를 복제해서 true일 경우 하위 요소까지 모두 복제
    속성 부여 - 선택 요소.setAttribute('속성', '값') > 선택 요소에 해당 속성 값 부여
    */
profile
UI개발자 in Hivelab

0개의 댓글