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

var ele = document.querySelector (selector);

선택과 함께 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 - 타겟 이벤트.
• 경청자 - 일반적으로 자바 스크립트 함수.
• 옵션들 - (선택 사항) 부울 속성 집합을 가진 객체 (아래 나열 됨).

옵션	설정되면 어떻게됩니까? 참된?
포착	이벤트 버블 링을 중지합니다. 즉, 요소의 조상에있는 동일한 이벤트 유형에 대한 이벤트 리스너 호출을 방지합니다.. 이 기능을 사용하려면 다음과 같은 두 가지 구문을 사용할 수 있습니다. ele.addEventListener (evt, listener, true) ele.addEventListener (evt, listener, capture : true);
일단	리스너는 이벤트가 처음 발생할 때만 호출 된 다음 자동으로 이벤트에서 분리되어 더 이상 트리거되지 않습니다..
수동태	preventDefault () 메서드를 사용하여 이벤트의 기본 동작을 중지 할 수 없습니다..

코드 예제

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

클릭 해주세요

 var btn = document.querySelector ( 'button'); btn.addEventListener ( '클릭', foo); function foo () alert ( 'hello'); 

대화 형 데모

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

4. removeEventListener ()

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

통사론

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

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

코드 예제

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

 btn.removeEventListener ( '클릭', foo);

5. createElement ()

그만큼 createElement () 방법 새로운 HTML 요소를 만든다. ~을 사용하여 HTML 태그의 이름 생성 될 '피' 또는 'div'.

나중에 다른 요소를 사용하여이 요소를 웹 페이지에 추가 할 수 있습니다. DOM 삽입을위한 메소드, 와 같은 AppendChild () (이 포스트의 뒷부분 참조).

통사론

document.createElement (tagName);

• tagName - 만들려는 HTML 태그의 이름.

코드 예제

다음 예제를 사용하여 새 단락 요소를 만들 수 있습니다.

var pEle = document.createElement ( 'p')

6. appendChild ()

그만큼 appendChild () 방법 마지막 자식으로 요소를 추가합니다. 이 메소드를 호출하는 HTML 요소에.

삽입 할 자식은 새로 생성 된 요소, 또는 이미 존재하는. 후자의 경우 이전 위치에서 마지막 자식 위치로 이동합니다.

통사론

ele.appendChild (childEle)

• 엘 - HTML 요소 아이 엘 마지막 자식으로 추가됩니다..
• 아이 엘 - 의 마지막 아이로 추가 된 HTML 요소 엘.

코드 예제

이 예에서는 요소는

요소를 사용하여 appendChild () 및 전술 한 createElement () 행동 양식.

 var div = document.querySelector ( 'div'); var strong = document.createElement ( 'strong'); strong.textContent = 'Hello'; div.appendChild (strong);

대화 형 데모

다음 대화 형 데모에서는 #에이 에 #아르 자형 그 자식 요소는 # parent-one, # parent-two, 과 # parent-three id 셀렉터.

어떻게 체크 아웃 appendChild () 방법은 하나의 상위 및 하위 선택자 이름을 아래의 입력 필드에 입력. 다른 부모에게 속한 어린이도 선택할 수 있습니다..

7. removeChild ()

그만큼 removeChild () 방법 지정된 자식 요소를 제거합니다. 이 메서드를 호출하는 HTML 요소에서 가져옵니다..

통사론

ele.removeChild (childEle)

• 엘 - 의 부모 요소 아이 엘.
• 아이 엘 - 의 하위 요소 엘.

코드 예제

이 예에서는 우리가 자녀로 추가 한

이전 코드 예제의 코드 예제에서 appendChild () 방법.

div.removeChild (strong);

8. replaceChild ()

그만큼 replaceChild () 방법 하위 요소를 다른 요소로 바꿉니다. 이 메소드를 호출하는 부모 요소에 속하는.

통사론

ele.replaceChild (newChildEle, oldChileEle)

• 엘 - 자식을 대체 할 상위 요소.
• newChildEle - 자식 요소 엘 대체 할 oldChildEle.
• oldChildEle - 자식 요소 엘, 그 (것)들은에 의해 대체 될 것이다. newChildEle.

코드 예제

이 예제에서 자식 요소 에 속하는

상위 요소가 새로 작성된 요소로 대체됩니다. 꼬리표.

 
 여보세요 

 var em = document.createElement ( 'em'); var strong = document.querySelector ( 'strong'); var div = document.querySelector ( 'div'); em.textContent = 'hi'; div.replaceChild (em, strong);

9. cloneNode ()

당신이해야 할 새로운 요소를 만들어야 할 때 이미 존재하는 원소와 동일하다. 웹 페이지에서 간단하게 이미 존재하는 요소의 복사본을 만든다. ~을 사용하여 cloneNode () 방법.

통사론

var dupeEle = ele.cloneNode ([deep])

• 듀플 엘 - 사본 엘 요소.
• 엘 - 복사 할 HTML 요소.
• 깊은 - (선택 사항) 부울 값입니다. 설정되어있는 경우 참된, 듀플 엘 모든 자식 요소를 갖습니다. 엘 설정되어있는 경우 그릇된 그것은 아이들없이 복제 될 것이다..

코드 예제

이 예에서 Google은 요소 cloneNode (), 그 다음 우리는 그것을

태그를 자식 요소로 appendChild () 방법.

그 결과,

2를 포함 할 것이다 요소와 여보세요 문자열을 내용으로.

 
 여보세요 

 var strong = document.querySelector ( 'strong'); var copy = strong.cloneNode (true); var div = document.querySelector ( 'div'); div.appendChild (copy); 

10. insertBefore ()

그만큼 insertBefore () 방법 다른 자식 요소 앞에 지정된 자식 요소를 추가합니다.. 이 메소드는 부모 요소에 의해 호출됩니다..

참조 된 자식 요소가 없거나 명시 적으로 전달한 경우 없는 그 자리에, 삽입 될 자식 요소가 추가된다. 부모의 마지막 아이로서 (비슷하다 appendChild ()).

통사론

ele.insertBefore (newEle, refEle);

• 엘 - 부모 요소.
• newEle - 삽입 할 새 HTML 요소.
• refEle - 자식 요소 엘 그 전에 newEle 삽입 될 것이다..

코드 예제

이 예에서는 새로운 내부에 어떤 텍스트가있는 요소를 추가합니다 전에 그만큼 내부 요소

부모 요소.

 
 여보세요 

 var em = document.createElement ( 'em'); var strong = document.querySelector ( 'strong'); var div = document.querySelector ( 'div'); em.textContent = 'hi'; div.insertBefore (em, strong); 

대화 형 데모

이 대화 형 데모는 이전 데모와 유사하게 작동합니다. appendChild () 방법. 여기서 당신은 두 개의 자식 요소의 id 선택자를 입력하면됩니다 (from #에이 에 #아르 자형)를 입력란에 입력하면 insertBefore () 메서드는 첫 번째로 지정된 자식을 이동합니다. 전에 두번째.

11. createDocumentFragment ()

그만큼 createDocumentFragment () 메서드는이 목록의 다른 메서드와 마찬가지로 잘 알려진 것은 아니지만 중요한 요소입니다. 특히 여러 요소를 대량으로 삽입, 테이블에 여러 행 추가하기.

그것 ~을 창조하다 DocumentFragment 목적, 본질적으로 DOM 트리의 일부가 아닌 DOM 노드. DOM 트리의 원하는 노드 (예 : 표)에 추가하기 전에 다른 요소 (예 : 여러 행)를 먼저 추가하고 저장할 수있는 버퍼와 같습니다..

왜 요소들을 DOM 트리에 직접 추가하지 않는가? DOM 삽입 레이아웃 변경을 초래합니다., 그리고 그것은 값 비싼 브라우저 프로세스 결과적으로 여러 요소를 삽입하면 레이아웃이 더 많이 변경되므로.

반면에 요소를 DocumentFragment 목적 레이아웃을 변경하지 않습니다., 따라서 DOM 트리에 전달하기 전에 원하는만큼 요소를 추가 할 수 있으므로이 시점에서만 레이아웃이 변경됩니다.

통사론

document.createDocumentFragment ()

코드 예제

이 예제에서는 여러 테이블 행과 셀을 createElement () 메소드에 추가 한 다음 DocumentFragment 객체를 추가하고, 마지막으로 문서 조각을 HTML에 추가합니다.

~을 사용하여 appendChild () 방법.

결과적으로 내용이 1에서 5까지 인 셀 하나를 포함하는 5 개의 행이 테이블 내부에 삽입됩니다.

 var table = document.querySelector ( "table"); var df = document.createDocumentFragment (); for (var i = 0; i<5; i++)  var td = document.createElement("td"); var tr = document.createElement("tr"); td.textContent = i; tr.appendChild(td) df.appendChild(tr);  table.appendChild(df); 

12. getComputedStyle ()

때로는 CSS 속성 값 확인 요소를 변경하기 전에 당신은 엘 스타일 그러나 같은 일을하는 속성, 그러나 getComputedStyle () 방법은이 목적을 위해서만 만들어졌다. 읽기 전용 계산 된 값을 반환합니다. 지정된 HTML 요소의 모든 CSS 속성들.

통사론

var 스타일 = getComputedStyle (ele, [pseudoEle])

• 스타일 - 에이 CSSStyleDeclaration 메소드가 돌려주는 객체 그것은 모든 CSS 속성과 그 값을 가지고 있습니다. 엘 요소.
• 엘 - CSS 속성 값을 가져 오는 HTML 요소.
• 가짜 에일 - (선택 사항) 의사 요소를 나타내는 문자열 (예 :, ':후'). 이것이 언급되면, 다음과 연관된 지정된 의사 요소의 CSS 특성 엘 반환됩니다..

코드 예제

이 예에서는 계산 된 폭 가치

요소를 사용하여 getComputedStyle () 방법.

 var style = getComputedStyle (document.querySelector ( 'div'))); 경고 (style.width); 

13. setAttribute ()

그만큼 setAttribute () 방법 중 하나 새로운 속성을 추가합니다. HTML 요소로 값을 업데이트합니다. 이미 존재하는 속성.

통사론

ele.setAttribute (name, value);

• 엘 - 속성이 추가되거나 속성이 업데이트되는 HTML 요소.
• 이름 - 속성의 이름.
• 값 - 속성의 값.

코드 예제

이 예에서는 contenteditable 속성을

를 사용함으로써 setAttribute () 메서드를 사용하면 내용을 편집 할 수 있습니다..

여보세요

 var div = document.querySelector ( 'div'); div.setAttribute ( 'contenteditable', ") 

14. getAttribute ()

그만큼 getAttribute () 방법 지정된 속성 값을 반환합니다. 특정 HTML 요소에 속한다..

통사론

ele.getAttribute (name);

• 엘 - 속성이 요청 된 HTML 요소.
• 이름 - 속성의 이름.

코드 예제

이 예에서 Google은 contenteditable 에 속하는 속성

의 도움으로 요소 getAttribute () 방법.

여보세요

 var div = document.querySelector ( 'div'); 경고 (div.getAttribute ( 'contenteditable')) 

15 명. removeAttribute ()

그만큼 removeAttribute () 방법 지정된 속성을 삭제합니다. 특정 HTML 요소의.

통사론

ele.removeAttribute (name);

• 엘 - 속성을 제거 할 HTML 요소.
• 이름 - 속성의 이름.

코드 예제

이 예에서는 contenteditable 속성의

요소. 결과적으로,

더 이상 편집 할 수 없습니다..

여보세요

 var div = document.querySelector ( 'div'); div.removeAttribute ( 'contenteditable'); 

15 가지 교훈 전쟁의 예술은 인생의 승리를이기는 것에 대해 가르쳐줍니다.

모바일 응답 성을위한 라이트 박스 라이브러리 15 개

완벽한 스탠딩 데스크 구입 또는 구축을위한 15 가지 아이디어

다음 기사

스마트 스티커 요소를 만들기위한 15 개의 jQuery 플러그인

이전 기사

기업가를위한 15 개의 영감을주는 시작 프리젠 테이션 비디오