jQuery_jquery의 DOM 작업에 대한 자세한 설명

jQuery의 DOM 조작

DOM(Document Object Model—Document Object Model): 브라우저, 플랫폼, 언어에 독립적인 인터페이스입니다. 이 인터페이스를 사용하면 페이지의 모든 표준 구성 요소에 쉽게 액세스할 수 있습니다.

DOM 작업 카테고리:

DOM Core: DOM Core는 JavaScript에만 국한되지 않습니다. DOM을 지원하는 모든 프로그래밍 언어에서 사용할 수 있으며 웹 페이지 처리에만 국한되지 않고 마크업 언어로 작성된 모든 종류의 콘텐츠를 처리하는 데에도 사용할 수 있습니다. 결과 문서(예: XML

)

HTML DOM: JavaScript 및 DOM을 사용하여 HTML 파일용 스크립트를 작성할 때 HTML-DOM과 관련된 많은 속성이 있습니다

CSS-DOM: CSS 작업의 경우 JavaScript에서 CSS-DOM은 주로 스타일 객체의 다양한 속성을 가져오고 설정하는 데 사용됩니다

노드 찾기

노드 찾기:

요소 노드 찾기: jQuery 선택기를 통해 완료

속성 노드 찾기: 필요한 요소를 찾은 후 jQuery 객체의 attr() 메서드를 호출하여 다양한 속성 값을 얻을 수 있습니다

노드 생성

노드 생성: jQuery의 팩토리 함수 $(): $(html);를 사용하여 전달된 html 마크업 문자열을 기반으로 DOM 객체를 생성하고 이 DOM 객체를 jQuery 객체로 래핑하여 반환합니다.

참고:

동적으로 생성된 새 요소 노드는 문서에 자동으로 추가되지 않으며 다른 방법을 사용하여 문서에 삽입해야 합니다.

단일 요소를 만들 때 닫는 태그에 주의하고 표준 XHTML 형식을 사용하세요. 예를 들어

요소를 만들려면 $("

") 또는 $( "

”), 그러나 $(“

”) 또는 $(“

”)는 사용할 수 없습니다

텍스트 노드를 생성한다는 것은 요소 노드를 생성할 때 텍스트 내용을 직접 작성하는 것을 의미하며, 속성 노드를 생성하는 것도 요소 노드를 생성할 때 함께 생성하는 것입니다.

노드 삽입(1)

HTML 요소의 동적 생성은 실용적이지 않습니다. 새로 생성된 노드도 문서에 삽입해야 합니다. 즉, 문서에 있는 노드의 하위 노드가 됩니다.

노드 삽입(2)

위 방법을 사용하면 새로 생성된 DOM 요소를 문서에 삽입할 수 있을 뿐만 아니라 원본 DOM 요소를 이동할 수도 있습니다.

노드 삭제

remove(): DOM에서 일치하는 모든 요소를 ​​제거합니다. 전달된 매개변수는 jQuery 표현식을 기반으로 요소를 필터링하는 데 사용됩니다. 제거() 메서드를 사용하여 노드가 삭제되면 해당 노드에 포함된 모든 하위 노드가 삭제됩니다. 삭제됨과 동시에 삭제됩니다. 이 메서드의 반환 값은 삭제된 노드를 가리키는 참조입니다.

empty(): 빈 노드 – 요소의 모든 하위 노드를 지웁니다(속성 노드 제외).

노드 복사

clone(): 일치하는 DOM 요소를 복제하고 반환 값은 복제된 복사본입니다. 그러나 이때 복사된 새 노드에는 아무런 동작이 없습니다.

clone(true): 요소를 복사할 때 요소의 이벤트도 복사합니다

노드 교체

replaceWith(): 일치하는 모든 요소를 ​​지정된 HTML 또는 DOM 요소로 교체

replaceAll(): reverseWith() 메서드.

참고: 이벤트가 교체 전에 요소에 바인딩된 경우 원래 바인딩된 이벤트는 교체 후 원래 요소와 함께 사라집니다

랩 노드

wrap(): 지정된 노드를 다른 태그로 래핑합니다. 이 방법은 원본 문서의 의미를 손상시키지 않고 문서에 구조화된 추가 태그를 삽입하는 데 매우 유용합니다.

wrapAll(): 일치하는 모든 요소를 ​​하나의 요소로 래핑합니다. Wrap() 메서드는 모든 요소를 ​​개별적으로 래핑합니다.

wrapInner(): 일치하는 각 요소의 하위 콘텐츠(텍스트 노드 포함)를 다른 구조화된 태그로 래핑합니다.

속성 연산

attr(): 속성 가져오기 및 속성 설정

매개변수가 이 메소드에 전달되면 요소에 대해 지정된 속성을 얻습니다

두 개의 매개변수가 이 메소드에 전달되면 지정된 속성의 값이 요소에 설정됩니다

jQuery에는 attr(), html(), text(), val(), height(), width(), css() 등과 같은 함수를 가져오고 설정하는 메서드가 많이 있습니다.

removeAttr(): 지정된 요소의 지정된 속성을 제거합니다

HTML, 텍스트 및 값 설정 및 가져오기

HTML() 요소에서 HTML 콘텐츠를 읽고 설정합니다. 이 메서드는 XHTML에는 사용할 수 있지만 XML 문서에는 사용할 수 없습니다

text() 요소에서 텍스트 내용을 읽고 설정합니다. 이 메서드는 XHTML 및 XML 문서 모두에 사용할 수 있습니다.

요소의 값을 읽고 설정합니다: val() ---이 메소드는 JavaScript의 value 속성과 유사합니다. 텍스트 상자, 드롭다운 목록 상자 및 라디오 버튼 상자의 경우 이 메소드는 값을 반환할 수 있습니다. (다중 선택 상자는 첫 번째 값만 반환할 수 있음) 다중 선택 드롭다운 목록 상자인 경우 선택한 모든 값이 포함된 배열이 반환됩니다