[JavaScript] 노드, 브라우저 객체 모델(BOM)

노드

• node
  • HTML DOM은 node라고 불리는 계층적 단위에 정보를 저장하고 있다.
  • 노드 트리는 최상위 레벨인 루트 노드부터 가장 낮은 레벨인 텍스트 노드까지 뻗어 내려간다.
• 노드의 종류
  • 문서 노드(document node)
    • HTML 문서 전체를 나타내는 노드
  • 요소 노드(element node)
    • 모든 HTML 요소는 요소 노드이며, 속성 노드를 가질 수 있는 유일한 노드
  • 속성 노드(attribute node)
    • 모든 HTML 요소의 속성은 속성 노드이며, 요소 노드에 관한 정보를 가지고 있음
    • 해당 요소 노드의 자식 노드에는 포함되지 않음
  • 텍스트 노드(text node)
    • HTML 문서의 모든 텍스트는 텍스트 노드
  • 주석 노드(comment node)
    • HTML 문서의 모든 주석은 주석 노드
• 노드 접근 방법
  • getElementsByTagName() 메소드 이용
  • 노드 간의 관계를 이용하여 접근하는 방법 (프로퍼티 이용)
    • parentNode - 부모노드
    • childNodes - 자식노드 리스트
      • var listItems = document.getElementById("list").childNodes;
      • listItems[1].firstChild.nodeValue = “변경내용”;
    • firstChild - 첫번째 자식노드
    • lastChild - 마지막 자식노드
    • nextSibling - 다음 형제노드
    • previousSibling - 이전 형제노드
• 노드에 대한 정보 접근
  • nodeName
    • 노드 고유의 이름을 저장 (태그 이름 대문자로 저장)
    • 수정할 수 없는 읽기전용 프로퍼티
    • 예시
      • document.getElementById("document").innerHTML = document.childNodes[1].nodeName; // HTML
  • nodeValue
    • 노드의 값을 저장
    • 예시
      • var headingText = document.getElementById("heading").firstChild.nodeValue;
  • nodeType
    • 노드 고유의 타입 저장
    • 수정할 수 없는 읽기 전용 프로퍼티
    • 예시
      • var headingType = document.getElementById("heading").firstChild.nodeType;
• 노드의 관리
  • 노드의 추가
    • 변수명.appedChild()
      • 새로운 노드를 해당 노드의 자식 노드 리스트(child node list)의 맨 마지막에 추가
    • .insertBefore(새로운자식노드, 기존자식노드)
      • 새로운 노드를 특정 자식노드 앞에 추가
    • insertData(인덱스, “새로운텍스트”)
      • 텍스트 노드의 텍스트 데이터의 새로운 텍스트 추가
  • 노드의 생성
    • document.createElement(”요소”)
      • 새로운 요소 노드 생성
    • document.createAttribute(”속성”)
      • 새로운 속성 노드 생성
      • 이미 존재하는 요소 노드에 속성 노드 생성하고 싶다면 setAttribute() 메소드 사용
    • document.createTextNode(”텍스트”)
      • 새로운 텍스트 노드 생성
  • 노드의 제거
    • 변수명.removeChild(변수명2)
      • 자식노드 리스트에서 특정 자식노드 제거
    • 변수명.removeAttribute(”속성”)
      • 속성이름을 이용하여 특정 속성 노드 제거
  • 노드의 복제
    • 복제할노드.cloneNode(true/false(자식노드 복제여부- true는 자식노드도 같이 복제, false는 속성노드만 복제))
      • 기존 노드 복제
      • ex) parent.appendChild(originItem.cloneNode(true));
• 노드의 조작
  • 노드의 값 변경
    • nodeValue 프로퍼티 사용하여 특정 노드 값 변경
    • setAttribute() 메소드로 속성 노드의 속성값 변경
  • 텍스트 노드값 변경
    • nodeValue 프로퍼티 사용
      • ex) para.firstChild.nodeValue = "텍스트 변경";
  • 속성노드의 값 변경
    • setAttribute() 메소드 사용
      • document.getElementsByTagName("p")[0].setAttribute("class", "para");
  • 요소 노드의 교체
    • replaceChild() 메소드 사용
      • 교체할 노드 = 부모노드.replaceChild(새로운자식노드, 기존자식노드)
  • 텍스트 노드의 데이터 교체
    • replaceData() 메소드 사용
      • 텍스트노드.replaceData(인덱스, 교체할문자수, “새로운텍스트”)

 

브라우저 객체 모델(BOM)

• Window 객체
  • Window 객체
    • JS의 모든 객체, 전역함수, 전역변수들은 자동으로 window 객체의 프로퍼티가 된다
    • window 객체의 메소드는 전역함수이며, window 객체의 프로퍼티는 전역변수
    • 문서객체모델(DOM)의 요소들도 window 객체의 프로퍼티
  • 관련 메소드
    • 브라우저 새창열기
      • window.open(”경로”, “이름”, 옵션들)
    • 브라우저 창닫기
      • 변수명.close();
• Location 객체
  • Location 객체
    • 현재 브라우저에 표시된 HTML 문서의 주소를 얻거나, 브라우저에 새 문서를 불러올 때 사용
  • 관련 메소드
    • 현재 문서의 URL
      • location.href
    • 현재 문서의 호스트 이름
      • location.hostname
    • 현재 문서의 파일 경로명
      • location.pathname
    • 현재 창에 문서 불러오기
      • location.assgin(”경로/파일명”)
      • location.replace(”경로/파일명”)
        • replace는 브라우저의 히스토리에서 제거(뒤로가기 못함)
      • location.reload()
        • 현재 문서를 다시 불러오는
• History 객체
  • History 객체
    • 브라우저의 히스토리 정보를 문서와 문서상태 목록으로 저장하는 객체
  • 관련 메소드
    • 히스토리 목록 개수
      • history.length
    • 히스토리 목록 접근
      • 이전 페이지로 가기
        • window.history.back();
      • n 수만큼 히스토리 목록 사이 이동
        • window.history.go(-1);
      • 다음 페이지로 가기
        • window.history.forward();
• Screen 객체
  • Screen 객체
    • 사용자의 디스플레이 화면에 대한 다양한 정보를 저장하는 객체
  • 관련 프로퍼티
    • 모니터 크기 반환
      • screen.width, screen.height
    • 브라우저창 크기 반환
      • window.outerWidth, window.outerHeight
    • 실제 사용할 수 있는 화면 크기
      • screen.availWidth, screen.availHeight
• Navigator 객체
  • Navigator 객체
    • 브라우저 공급자 및 버전정보 등을 포함한 브라우저에 대한 다양한 정보 저장하는 객체
  • 관련 프로퍼티
    • 현재 사용하고 있는 브라우저의 이름
      • navigator.appName
      • navigator.appCodeName
    • 현재 브라우저의 버전
      • navigator.appVersion
      • navigator.userAgent
    • 기본 언어 설정
      • navigator.language
• 대화 상자
  • alert() 메소드
    • window.alert(”메시지”)
  • confirm() 메소드
    • 메시지 출력 후 사용자가 확인이나 취소 누르면 boolean 값으로 해당 결과 반환
    • window.confirm(”메시지”)
  • prompt() 메소드
    • 메시지 출력 후 사용자가 입력한 문자열 반환
    • window.prompt(”메시지”, “입력란의 기본 메시지”)
  • showModalDialog()
    • 좀 더 복잡한 대화상자 만들기
• 타이머
  • 관련 메소드
    • window.setTimeout(호출할함수, 밀리초);
      • 해당 밀리초가 지난 뒤에 함수 호출
    • window.setInterval(호출할함수, 밀리초);
      • 지정된 시간마다 함수 반복적으로 호출
    • window.clearTimeout(타임아웃ID);
      • setTimeout() 메소드의 반환값을 전달하면 계획된 함수의 호출 취소
    • window.clearInterval(타임아웃ID);
      • setTimeout() 메소드의 반환값을 전달하면 반복되는 함수의 호출 취소