웹 전단 기반 의 BOM 과 DOM

소개
자 바스 크 립 트 는 ECMAScript, DOM, BOM 으로 나 뉜 다.
BOM (Browser Object Model) 은 자 바스 크 립 트 가 브 라 우 저 와 대화 할 수 있 도록 브 라 우 저 대상 모델 을 말한다.
DOM (Document Object Model) 은 문서 대상 모델 을 말 하 며 이 를 통 해 HTML 문서 의 모든 요 소 를 방문 할 수 있 습 니 다.
윈도 대상
모든 브 라 우 저 는 window 대상 을 지원 합 니 다.브 라 우 저 창 을 표시 합 니 다.
모든 JavaScript 전역 대상, 함수, 변 수 는 자동 으로 window 대상 의 구성원 이 됩 니 다.
전역 변 수 는 window 대상 의 속성 입 니 다.전역 함 수 는 window 대상 의 방법 입 니 다.
다음은 HTML DOM 의 document 도 window 대상 의 속성 중 하나 입 니 다.
자주 사용 하 는 Window 방법:
        window. inner Height - 브 라 우 저 창의 내부 높이
        window. inner Width - 브 라 우 저 창의 내부 너비
        window. open () - 새 창 열기
        window. close () - 현재 창 닫 기
3. window 의 하위 대상
1. navigator 대상
브 라 우 저 대상 은 이 대상 을 통 해 사용자 가 사용 하 는 브 라 우 저 를 판정 할 수 있 으 며 브 라 우 저 관련 정 보 를 포함 하고 있 습 니 다.
navigator.appName　　     // 웹 브 라 우 저
navigator. appVersion / 웹 브 라 우 저 제조 업 체 와 버 전의 자세 한 문자열
navigator.userAgent　  / / 클 라 이언 트 대부분의 정보
navigator. platform / 브 라 우 저가 실행 중인 운영 체제
2. screen 대상 (화면 대상, 자주 사용 되 지 않 음)
일부 속성:
screen. availWidth - 사용 가능 한 화면 너비
screen. availHeight - 사용 가능 한 화면 높이
3. history 대상
window. history 대상 은 브 라 우 저의 역 사 를 포함 합 니 다.
과거 기록 대상 을 탐색 하 는 것 은 사용자 가 현재 페이지 에 대한 탐색 역 사 를 포함 하지만 구체 적 인 주 소 를 볼 수 없습니다. 한 페이지 를 전진 하거나 뒤로 물 러 날 수 있 습 니 다.
history.forward()  // 한 페이지 전진
history.back()  // 한 페이지 뒤로 물러서다
4. 위치 대상
window. location 대상 은 현재 페이지 의 주소 (URL) 를 가 져 오고 브 라 우 저 를 새로운 페이지 로 재 설정 하 는 데 사 용 됩 니 다.
상용 속성 과 방법:
location.href                URL 가 져 오기
location.href="URL"    // 지정 한 페이지 로 이동
location.reload()          페이지 다시 불 러 오기
5. 팝 업 상자
자바 스 크 립 트 에 세 가지 메시지 상 자 를 만 들 수 있 습 니 다: 경고 상자, 확인 상자, 알림 상자.
(1) 경고 상자
경고 상 자 는 사용자 가 어떤 정 보 를 얻 을 수 있 도록 하 는 데 자주 사용 된다.
경고 상자 가 나타 나 면 사용 자 는 확인 단 추 를 눌 러 야 계속 작업 할 수 있 습 니 다.
문법:
alert ("페이지 위험!");
(2) 확인 상자 (알 면 된다)
확인 상 자 는 사용자 가 어떤 정 보 를 검증 하거나 받 아들 일 수 있 도록 합 니 다.
확인 상자 가 나타 나 면 사용 자 는 확인 이나 취소 단 추 를 눌 러 야 계속 작업 할 수 있 습 니 다.
사용자 가 확인 을 누 르 면 반환 값 은 true 입 니 다.사용자 가 취 소 를 누 르 면 반환 값 은 false 입 니 다.
문법:
confirm ("확실 합 니까?")
(3) 알림 상자 (알 면 됩 니 다)
알림 상 자 는 사용자 가 페이지 에 들 어가 기 전에 어떤 값 을 입력 하 는 지 알려 주 는 데 자주 사 용 됩 니 다.
알림 상자 가 나타 나 면 사용 자 는 어떤 값 을 입력 한 다음 확인 이나 취소 단 추 를 눌 러 야 계속 조작 할 수 있 습 니 다.
사용자 가 확인 을 누 르 면 입력 한 값 으로 되 돌아 갑 니 다.사용자 가 취 소 를 누 르 면 반환 값 은 null 입 니 다.
문법:
prompt ("아래 에 입력 하 세 요", "당신 의 답")
6. 시간 관련
（1）setTimeout()
var t = setTimeout ("JS 구문", 밀리초)
setTimeout () 방법 은 어떤 값 을 되 돌려 줍 니 다.위의 문장에서 값 은 t 라 는 변수 에 저 장 됩 니 다.이 setTimeout () 을 취소 하고 싶다 면 이 변수 이름 으로 지정 할 수 있 습 니 다.
setTimeout () 의 첫 번 째 매개 변 수 는 JavaScript 문 구 를 포함 한 문자열 입 니 다.이 문 구 는 "alert ('5 seconds!')" 나 함수 호출, 예 를 들 어 alertMsg () "와 같 을 수 있 습 니 다.
두 번 째 매개 변 수 는 현재 부터 몇 밀리초 후에 첫 번 째 매개 변 수 를 실행 하 는 지 표시 합 니 다.
（2）clearTimeout()
clearTimeout(setTimeout_variable)

    ：
var timer = setTimeout(function(){alert(123);}, 3000)         //                
clearTimeout(timer);                                         //   setTimeout  

（3）setInterval()
setInterval () 방법 은 지정 한 주기 (밀리초 단위) 에 따라 함수 나 계산 식 을 호출 할 수 있 습 니 다.
setInterval () 방법 은 clearInterval () 이 호출 되 거나 창 이 닫 힐 때 까지 함 수 를 계속 호출 합 니 다. setInterval () 에서 되 돌아 오 는 ID 값 은 clearInterval () 방법의 인자 로 사용 할 수 있 습 니 다.
문법:
setInterval ("JS 구문", 시간 간격)
（4）clearInterval()
clearInterval () 방법 은 setInterval () 이 설정 한 timeout 을 취소 할 수 있 습 니 다.
clearInterval () 방법의 매개 변 수 는 setInterval () 에서 되 돌아 오 는 ID 값 이 어야 합 니 다.
문법:
clearInterval (setinterval 이 되 돌려 주 는 ID 값)

    ：
var timer = setInterval(function(){console.log(123);}, 3000)     //                
clearInterval(timer);                                           //   setInterval  

예시: 타이머

html>


  
  
  
  
  
    var intervalId;
    function f() {
      var timeStr = (new Date()).toLocaleString();
      var inputEle = document.getElementById("i1");
      inputEle.value = timeStr;
    }
    function start() {
      f();
      if (intervalId === undefined) {
        intervalId = setInterval(f, 1000);
      }
    }
    function end() {
      clearInterval(intervalId);
      intervalId = undefined;
    }
  

DOM
DOM (Document Object Model) 은 문서 의 내용 을 추상 적 이 고 개념화 하 는 방법 이다.
웹 페이지 가 불 러 올 때 브 라 우 저 는 페이지 의 문서 대상 모델 (Document Object Model) 을 만 듭 니 다.
HTML DOM 모델 이 대상 으로 구 성 된 나무.
1. 태그 찾기
(1) 직접 찾기

document.getElementById             ID      
document.getElementsByClassName     class    
document.getElementsByTagName                

주의:
DOM 작업 과 관련 된 JS 코드 는 문서 의 어느 위치 에 두 어야 합 니까?
(2) 간접 검색
parentElement            부모 노드 태그 요소
children                 모든 하위 태그
firstElementChild        첫 번 째 키 태그 요소
lastElementChild         마지막 하위 태그 요소
nextElementSibling       다음 형제 태그 요소
previousElementSibling   이전 형제 태그 요소
2. 노드 조작
(1) 노드 만 들 기 (중요 내용)
문법:
createElement (태그 이름)
예시:

var divEle = document.createElement("div");

(2) 노드 추가
문법:

somenode.appendChild(newnode)；                     //       （        ）
somenode.insertBefore(newnode,    );            //               。

  ：
var imgEle=document.createElement("img");
imgEle.setAttribute("src", "http://image11.m1905.cn/uploadfile/s2010/0205/20100205083613178.jpg");
var d1Ele = document.getElementById("d1");
d1Ele.appendChild(imgEle);

(3) 노드 삭제
문법:
삭제 할 요 소 를 가 져 옵 니 다. 부모 요 소 를 호출 하여 삭제 합 니 다.
removeChild (삭제 할 노드)
(4) 교체 노드
문법:
somenode. replace Child (new node, 특정한 노드);
(5) 속성 노드
텍스트 노드 의 값 가 져 오기:

var divEle = document.getElementById("d1")
divEle.innerText
divEle.innerHTML

텍스트 노드 의 값 설정:

var divEle = document.getElementById("d1")
divEle.innerText="1"
divEle.innerHTML="
2
"

속성 조작

var divEle = document.getElementById("d1");
divEle.setAttribute("age","18")
divEle.getAttribute("age")
divEle.removeAttribute("age")

자체 속성 은 직접. 속성 명 으로 가 져 오고 설정 할 수 있 습 니 다.
imgEle.src
imgEle.src="..."
(6) 값 가 져 오기 동작
문법:
elementNode.value
다음 탭 에 적용:
.input
.select
.textarea

var iEle = document.getElementById("i1");
console.log(iEle.value);
var sEle = document.getElementById("s1");
console.log(sEle.value);
var tEle = document.getElementById("t1");
console.log(tEle.value);

(7) class 의 조작
className  모든 스타일 클래스 이름 가 져 오기 (문자열)
classList.remove(cls)  지정 클래스 삭제
classList.add(cls)  추가 클래스
classList.contains(cls)  true 로 돌아 가 는 것 이 존재 합 니 다. 그렇지 않 으 면 false 로 돌아 갑 니 다.
classList.toggle(cls)  존재 하면 삭제, 그렇지 않 으 면 추가
(8) CSS 작업 지정
obj.style.backgroundColor="red"
JS 작업 CSS 속성의 법칙:
        #1. 중앙 횡선 이 없 는 CSS 속성 에 대해 서 는 일반적으로 style. 속성 명 을 직접 사용 하면 됩 니 다. 예 를 들 어:
        obj.style.margin
        obj.style.width
        obj.style.left
        obj.style.position
        #2. 가로 선 이 포 함 된 CSS 속성 에 대해 서 는 가로 선 뒤의 첫 번 째 자 모 를 대문자 로 바 꾸 면 됩 니 다. 예 를 들 어:
        obj.style.marginTop
        obj.style.borderLeftWidth
        obj.style.zIndex
        obj.style.fontFamily
사건
1. 상용 이벤트
onclick        사용자 가 대상 을 클릭 할 때 호출 되 는 이벤트 핸들 입 니 다.
ondblclick     사용자 가 대상 을 두 번 눌 렀 을 때 호출 되 는 이벤트 핸들 입 니 다.
onfocus        원소 가 초점 을 얻다.               // 연습: 입력 상자
onblur         원소 가 초점 을 잃다.               응용 장면: 폼 검증 에 사용 합 니 다. 사용자 가 특정한 입력 상 자 를 떠 날 때 대 표 는 이미 입력 이 끝 났 습 니 다. 우 리 는 이 를 검증 할 수 있 습 니 다.
onchange       도 메 인의 내용 이 변경 되 었 습 니 다.             응용 장면: 보통 폼 요소 에 사 용 됩 니 다. 요소 내용 이 바 뀌 었 을 때 촉발 합 니 다. (select 연동)
onkeydown      어떤 키보드 버튼 이 눌 렸 다.          응용 장면: 사용자 가 마지막 입력 상자 에서 Enter 버튼 을 눌 렀 을 때 폼 을 제출 합 니 다.
onkeypress     어떤 키보드 버튼 이 눌 려 서 풀 렸 다.
onkeyup        어떤 키보드 버튼 이 풀 렸 다.
onload         페이지 나 그림 을 불 러 옵 니 다.
onmousedown    마우스 단추 가 눌 렸 다.
onmousemove    마우스 가 움 직 였 다.
onmouseout     마우스 가 원소 에서 이동 합 니 다.
onmouseover    마 우 스 를 원소 위로 이동 합 니 다.
onselect      텍스트 상자 의 텍스트 가 선택 되 었 을 때 발생 합 니 다.
onsubmit      확인 단 추 를 누 르 면 사용 대상 은 form 입 니 다.
2. 귀속 방식:
(1) 방식 1:

  

  function changeColor(ths) {
    ths.style.backgroundColor="green";
  }

  ：
this   ，           。
        ths   。

(2) 방식 2:

  

  var divEle2 = document.getElementById("d2");
  divEle2.onclick=function () {
    this.innerText="  ";
  }

3. 예시
(1) 검색 상자

html>


    
    


    

function focus(){
    var inputEle = document.getElementById("d1");
    if (inputEle.value == = "      "){
        inputEle.value = "";
    }
}
function blurs(){
    var inputEle = document.getElementById("d1");
    var val = inputEle.value;
    if (!val.trim()){
        inputEle.value = "      ";
    }
}

(2) select 연동

html>


  
  
  
  



      :


      :


  data = {"   ": ["  ", "  "], "  ": ["   ", "   "], "  ": ["   ", "   "]};
  var p = document.getElementById("province");
  var c = document.getElementById("city");
  for (var i in data) {
    var optionP = document.createElement("option");
    optionP.innerHTML = i;
    p.appendChild(optionP);
  }
  p.onchange = function () {
    var pro = (this.options[this.selectedIndex]).innerHTML;
    var citys = data[pro];
    //   option
    c.options.length = 0;
    for (var i=0;i<citys.length;i++) {
      var option_city = document.createElement("option");
      option_city.innerHTML = citys[i];
      c.appendChild(option_city);
    }
  }