Dom은 Document Object Model의 약어로, 문서 객체 모델을 의미합니다. DOM은 브라우저, 플랫폼 및 언어에 독립적인 인터페이스로, 이 인터페이스를 사용하면 페이지의 모든 표준 구성 요소에 쉽게 액세스할 수 있습니다.
DOM 작업은 DOM Core, HTM-DOM 및 CSS-DOM의 세 가지 측면으로 나눌 수 있습니다.
jQuery DOM 요소 메서드
기능 | 설명 |
---|---|
.get() | 선택기에 의해 지정된 DOM 요소를 가져옵니다. |
.index() | 다른 지정된 요소를 기준으로 지정된 요소의 인덱스 위치를 반환합니다. |
.size() | jQuery 선택기와 일치하는 요소 수를 반환합니다. |
.toArray() | jQuery 선택기와 일치하는 요소를 배열로 반환합니다. |
1.attr() .removeAttr()
.attr() 메서드는 이름-값 쌍의 매개변수 또는 3개 이상의 이름-값 쌍을 포함하는 객체 매개변수를 전달할 수 있습니다. 예:
.attr('src','images/a.jpg');
.attr({ rel:'www', id:'zz', title:'some', some:'111' });
물론 하나 이상의 속성을 제거할 수도 있습니다.removeAttr('id rel');
2.prop()
이 메서드는 속성 값을 가져올 수 있습니다
가져오려는 값의 속성 이름(문자열)을 전달합니다(예: .prop('id');
id 값 설정(a 태그의 href 및 id와 같이 DOM 자체에 존재하는 속성 수정)
.prop('id','otherid');
3.val()
이 방법은 양식 컨트롤의 값을 얻는 데 자주 사용됩니다
4.insertBefore() .insertAfter() .prependTo() .appendTo()
.insertBefore()는 기존 요소 외부와 앞에 콘텐츠를 추가합니다(역연산 .before())
.insertAfter()는 기존 요소 외부 및 뒤에 콘텐츠를 추가합니다(역연산 .after())
.prependTo()는 기존 요소 내부와 앞에 콘텐츠를 추가합니다(역연산 .prepend())
.appendTo()는 기존 요소 내부와 뒤에 콘텐츠를 추가합니다(역연산 .append())
5.clone()
이 방법은 복사 요소를 복사할 수 있습니다. 다른 이벤트를 상속하기 위해 복사된 요소가 필요한 경우 부울 값을 매개변수로 전달해야 합니다. .clone(true)
6.wrap() .wrapAll() .wrapInner()
.wrap() 및 .wrapInner()는 상대적인 것으로 이해될 수 있습니다. .wrap()은 요소 외부에서 한 레이어를 래핑하는 반면, .wrapWith()는 요소 내부에서 한 레이어를 래핑합니다.
그리고 .wrapAll()은 일치하는 모든 요소를 래핑합니다
7.html() .text() .replaceWith() .replaceAll()
.html()은 텍스트 또는 DOM 노드를 전달할 수 있습니다.
.text()는 텍스트를 읽거나 바꾸는 것만 가능합니다.
.replaceWith(). . . "으로"를 바꾸십시오. . . ;
.replaceAll(). . . "주다"를 바꾸십시오. . .
8.empty()
요소 제거
9.detach() .remove()
이 두 가지 방법은 다소 유사하며 jQuery 개체에서 일치하는 요소를 삭제하지 않지만 여전히 차이점이 있습니다.
.detach() 바인딩된 모든 이벤트, 추가 데이터 등은 유지됩니다
.remove() 요소 자체가 유지되는 것 외에도
과 같은 다른 요소가 유지됩니다.
바인딩된 이벤트, 첨부된 데이터 등이 제거됩니다.