홈페이지 » 코딩 » 웹 개발자를위한 DOM 조작을위한 15 가지 JavaScript 메소드

    웹 개발자를위한 DOM 조작을위한 15 가지 JavaScript 메소드

    웹 개발자로서, 당신은 자주 DOM, 브라우저가 사용하는 객체 모델 논리 구조를 지정한다. 웹 페이지 수를 화면에 HTML 요소를 렌더링한다..

    HTML은 기본 DOM 구조. 그러나 대부분의 경우 자바 스크립트로이를 조작하고 싶을 수 있습니다. 추가 기능 추가 사이트로.

    이미지 : Google 개발자

    이 게시물에는 다음 목록이 있습니다. 15 가지 기본 JavaScript 메소드 그 DOM 조작을 돕다.. 코드에서 이러한 메소드를 자주 사용하는 것이 좋으며 JavaScript 자습서에서도 이러한 메소드를 자주 사용하게 될 것입니다..

    1. querySelector ()

    그만큼 querySelector () 방법 하나 이상의 CSS 선택자와 일치하는 첫 번째 요소를 반환합니다.. 일치하는 항목이 없으면 반환합니다. 없는.

    전에 querySelector () 도입 된 개발자는 getElementById () 방법 지정된 요소를 가져옵니다. 신분증 값.

    이기는 하지만 getElementById () 여전히 유용한 방법이지만 최신 버전은 querySelector () 과 querySelectorAll () 우리가 자유로운 방법 CSS 선택자를 기반으로하는 대상 요소, 따라서 우리는 더 많은 유연성을 가지고 있습니다..

    통사론
    var ele = document.querySelector (selector);
    • 엘 - 첫 번째 일치 요소 또는 없는 (요소가 셀렉터와 일치하지 않는 경우)
    • 선택자 - 하나 이상의 CSS 선택기 (예 : "#fooId", ".fooClassName", ".class1.class2", 또는 ".class1, .class2"
    코드 예제

    이 예에서 첫 번째

    선택과 함께 querySelector () 메서드 및 해당 색이 빨간색으로 변경됩니다..

     
    단락 1
     
    두 번째 단락
     
    div 하나
     
    세 번째 단락
     
    div 2
     
     var firstDiv = document.querySelector ( 'div'); firstDiv.style.color = 'red';
    대화 형 데모

    테스트 querySelector () 메소드를 다음 인터랙티브 데모에 추가하십시오. 파란색 상자 안에있는 것과 일치하는 선택기를 입력하십시오 (예 :. #세) 선택 단추를 클릭하십시오. 입력 할 경우 .블록, 첫 번째 인스턴스 만 선택 될 것이다..

    2. querySelectorAll ()

    같지 않은 querySelector () 일치하는 모든 요소의 첫 번째 인스턴스 만 반환합니다., querySelectorAll () 지정된 CSS 선택기와 일치하는 모든 요소를 ​​반환합니다..

    일치하는 요소는 NodeList 일치하는 요소가 발견되지 않는 경우 빈 객체가 될 객체.

    통사론
    var eles = document.querySelectorAll (selector);
    • 엘 - 에이 NodeList 모든 일치하는 요소를 속성 값으로 갖는 객체입니다. 일치하는 항목이 없으면 객체는 비어 있습니다..
    • 선택자 - 하나 이상의 CSS 선택기 (예 : "#fooId", ".fooClassName", ".class1.class2", 또는 ".class1, .class2"
    코드 예제

    아래 예제는 이전 HTML과 동일한 HTML을 사용합니다. 그러나이 예에서는 모든 단락이 querySelectorAll (), 그리고 파란색으로 착색되어있다..

     
    단락 1
     
    두 번째 단락
     
    div 하나
     
    세 번째 단락
     
    div 2
     
     var paragraphs = document.querySelectorAll ( 'p'); for (단락의 var p) p.style.color = 'blue';

    삼. addEventListener ()

    이벤트 클릭, 집중, 또는 로딩과 같은 HTML 요소에 어떤 일이 일어나는지를 참조하십시오. 여기에서 우리는 JavaScript에 대응할 수 있습니다. 우리는 JS 함수를 다음에 할당 할 수 있습니다. 들리다 요소에서 이러한 이벤트를 수행하고 이벤트가 발생했을 때 작업을 수행합니다..

    당신이 할 수있는 세 가지 방법이 있습니다. 어떤 이벤트에 함수를 할당한다..

    만약 foo () 사용자 정의 함수입니다. 등록 할 수 있습니다. 클릭 이벤트 리스너로 (버튼 요소를 클릭하면 호출됩니다).

    1.  
    2.  var btn = document.querySelector ( 'button'); btn.onclick = foo;
    3.  var btn = document.querySelector ( 'button'); btn.addEventListener ( '클릭', foo);

    방법 addEventListener () (세 번째 해법) 몇몇 전문가들; 최신 표준 - 이벤트 리스너로 둘 이상의 기능을 하나의 이벤트에 할당 할 수 있도록 허용 - 유용한 옵션 집합이 제공됩니다.

    통사론
    ele.addEventListener (evt, listener, [options]);
    • 엘 - 이벤트 리스너가 청취 할 HTML 요소.
    • evt - 타겟 이벤트.
    • 경청자 - 일반적으로 자바 스크립트 함수.
    • 옵션들 - (선택 사항) 부울 속성 집합을 가진 객체 (아래 나열 됨).
    옵션 설정되면 어떻게됩니까? 참된?
    포착

    이벤트 버블 링을 중지합니다. 즉, 요소의 조상에있는 동일한 이벤트 유형에 대한 이벤트 리스너 호출을 방지합니다..

    이 기능을 사용하려면 다음과 같은 두 가지 구문을 사용할 수 있습니다.

    1. ele.addEventListener (evt, listener, true)
    2. ele.addEventListener (evt, listener, capture : true);
    일단

    리스너는 이벤트가 처음 발생할 때만 호출 된 다음 자동으로 이벤트에서 분리되어 더 이상 트리거되지 않습니다..
    수동태

    preventDefault () 메서드를 사용하여 이벤트의 기본 동작을 중지 할 수 없습니다..
    코드 예제

    이 예제에서는 click 이벤트 리스너를 추가합니다. 푸, ~로 

     var btn = document.querySelector ( 'button'); btn.addEventListener ( '클릭', foo); function foo () alert ( 'hello');
    대화 형 데모

    할당 foo () 사용자 정의 함수를 다음 세 가지 이벤트 중 하나에 대한 이벤트 수신기로 사용합니다. 입력, 딸깍 하는 소리 또는 마우스 오버 마우스를 가져 가거나 클릭하거나 입력하여 하단 입력란에서 선택한 이벤트를 트리거합니다..

    4. removeEventListener ()

    그만큼 removeEventListener () 방법 이벤트 리스너를 분리합니다. 이전에 addEventListener () 방법 청취중인 이벤트에서.

    통사론
    ele.removeEventListener (evt, listener, [options]);

    앞에서 설명한 구문과 같은 구문을 사용합니다. addEventListener () 방법 ( 일단 옵션 제외). 이 옵션은 분리 될 청취자를 식별하는 것에 대해 매우 구체적으로 사용됩니다.

    코드 예제

    코드 예제에 따라 다음에서 사용했습니다. addEventListener (), 여기에 클릭 이벤트 리스너가 제거되었습니다. 푸 ~로부터