홈페이지 » 코딩 » 웹 개발자를위한 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 () 사용자 정의 함수입니다. 등록 할 수 있습니다. 클릭 이벤트 리스너로 (버튼 요소를 클릭하면 호출됩니다).
var btn = document.querySelector ( 'button'); btn.onclick = foo;
var btn = document.querySelector ( 'button'); btn.addEventListener ( '클릭', foo);
방법 addEventListener () (세 번째 해법) 몇몇 전문가들; 최신 표준 - 이벤트 리스너로 둘 이상의 기능을 하나의 이벤트에 할당 할 수 있도록 허용 - 유용한 옵션 집합이 제공됩니다.
통사론
ele.addEventListener (evt, listener, [options]);
엘 - 이벤트 리스너가 청취 할 HTML 요소.
evt - 타겟 이벤트.
경청자 - 일반적으로 자바 스크립트 함수.
옵션들 - (선택 사항) 부울 속성 집합을 가진 객체 (아래 나열 됨).
옵션
설정되면 어떻게됩니까? 참된?
포착
이벤트 버블 링을 중지합니다. 즉, 요소의 조상에있는 동일한 이벤트 유형에 대한 이벤트 리스너 호출을 방지합니다..