DOM

• 문서 객체 모델(Document Object Model)
• 스크립트의 접근성을 높이기 위해 문서를 구조화 시킨 것
• 태그 뿐만 아니라 속성, text도 접근 가능
  

접근 방식

출처: https://www.nextree.co.kr/p9747/

JavaScript

• 내장메서드를 이용해서 접근

JQuery

• 선택자를 이용해서 바로 접근
• 속도가 JavaScript보다 약간 느림

---

Dom관련 주요 메서드

• 문서 내 요소를 제어하는 메서드
• 자바스크립트 Dom관련 내장메서드는 하단 링크 참조
  https://velog.io/@yoonee1126/Day56-JS-%EC%9D%B4%EB%B2%A4%ED%8A%B8#dom

.before(), .after()

• 선택자 앞에 태그 추가
  $('선택자').before("추가할 태그")
• 선택자 뒤에 태그 추가

$('선택자').after("추가할 태그")

<div class="mb-3">
	<label class="form-label">취미</label>
    <div>
  	  <button style="background-color:skyblue" id="btn-add-field">추가</button>
    </div>
	<div>
		<input type="text" class="form-control w-75"/>	// input box
	</div>
</div>


$("#btn-add-field").click(function(){
	var template=`
		<div class="mb-3 d-flex justify-content-between">
			<input type="text" class="form-control w-75"/>
			<button class="btn btn-outline-danger btn-sm">삭제</button>
		</div>
        `;
        
	$('.mb-3:last').after(template);
	// class=mb-3의 끝부분에 template(입력폼)을 추가함
})

.text()

• 선택자 내 텍스트를 다루는 메서드로, 태그도 문자열 취급

- 텍스트 조회
$("선택자").text();

- 텍스트 변경
$("선택자").text("변경할 텍스트");

변경할 텍스트에 태그 포함 시, 적용되지 않고 문자 그대로 출력됨
$("p").text("<div>.text를 이용한 값</div>");

• 변경된 값: <div>.text를 이용한 값</div>

.html()

• 선택자 내 태그+문자열을 다루는 메서드

- html 조회
$("선택자").html();

- html 변경
$("선택자").html("변경할 텍스트");

변경할 텍스트에 태그 포함 시, 태그가 적용되어 출력됨
$("p").html("<div>.text를 이용한 값</div>");

• 변경된 값:
  .text를 이용한 값

.change()

• 요소의 값이 바뀌었을 때 함수 실행

.prop()

- 속성 조회
$("선택자").prop("속성");
- 속성 변경
$("선택자").prop("속성", 변경할 속성);

• 선택자 내 속성 값을 다루는 메서드
• 여러 형태로 이용 가능

$("선택자").prop("속성");
$("선택자").prop("속성", "속성값");
$("선택자").prop({"속성":"속성값", "속성":"속성값", .... });
$("선택자").prop("속성", 함수);

.attr()

- 속성 조회
$("선택자").attr(속성이름);
- 속성 추가,변경
$("선택자").attr(속성이름, 값)

• 요소의 속성 값을 반환

.prop() vs. .attr()

• prop은 속성의 현재 상태 제어
• 값이 없는 단일 속성(checked, disabled, selected 등)은 .prop()사용
• attr은 요소의 속성 값과 정보 제어

.data()

- data 조회
$("선택자").data("xxx");

- data 추가,변경
$("선택자").data("xxx", "저장값");

• data-xxx로 요소에 고유한 값을 줄 수 있음
• .attr()메서드를 이용해 조회 가능

<span id="price" data-price="35000">35,000원</span>

// .data()사용
$("#price").data("price");
// .attr()사용
$("#price").attr("data-price");	// 속성명을 전부 기입해야 조회 가능

.find()

$("선택자1").find("선택자2");

• 선택자1의 후손 중 선택자2에 해당하는 모든 후손 선택

<p class="10">
	<span class="1">1</span>
	<span class="2">2</span>
	<span class="3">3</span>
</p>
<p class="20">
	<span class="4">4</span>
	<span class="5">5</span>
	<span class="6">6</span>
</p>

$('p').find('span')	// 1,2,3,4,5,6을 찾는다

요소 추가

• 모든 메서드는 추가할 내용에 태그 작성 가능

.append()

$("선택자").append("추가할내용")

• 선택자의 가장 아래에 내용 추가

.appendTo()

$("추가할내용").appendTo("선택자")

• 선택자의 가장 아래에 내용 추가
• append와 다르게 추가할 내용을 앞에 작성

.prepend()

$("선택자").prepend("추가할내용")

• 선택자의 가장 위에 내용 추가

.prependTo()

$("추가할내용").prependTo("선택자")

• 선택자의 가장 위에 내용 추가
• prepend와 다르게 추가할 내용을 앞에 작성

.before()

$("선택자").before("추가할내용")

• 요소의 형 앞에 추가

.after()

$("선택자").after("추가할내용")

• 요소의 동생 뒤에 추가

예제

<div class="row mb-3">
	<div class="col">
		<div class="mb-3">
			<button id="btn-append">append</button>
			<button id="btn-prepend">prepend</button>
			<button id="btn-before">before</button>
			<button id="btn-after">after</button>
		</div>
		<div class="p-3 border">
		// before가 들어가는 자리
			<div class="p-3 border" id="box">
            		// prepend가 들어가는 자리
				<p>내용입니다.</p>
                	// append가 들어가는 자리
			</div>
		// after가 들어가는 자리
		</div>
	</div>
</div>

$("#btn-append").click(function(){
	$("#box").append("<p>append로 추가된 내용입니다.</p>")
})
$("#btn-prepend").click(function(){
	$("#box").prepend("<p>prepend로 추가된 내용입니다.</p>")
})
$("#btn-before").click(function(){
	$("#box").before("<p>before로 추가된 내용입니다.</p>")
})
$("#btn-after").click(function(){
	$("#box").after("<p>after로 추가된 내용입니다.</p>")
})

요소의 삭제

.remove()

$("선택자").remove()

• 선택자 및 자식요소 삭제

.empty()

$("선택자").empty()

• 선택자는 남고 자식요소만 삭제

.addClass()

$("선택자").addClass("추가할 클래스값")

• 선택자에 class를 추가
• 이미 갖고 있는 클래스는 추가되지 않음

<p>Hello</p>
<p>World</p>
$("p:first").addClass("intro");

실행 시
<p class="intro">Hello</p>
<p>World</p>

.toggleClass()

$("선택자").toggleClass("추가할 클래스 값")

• 선택자에 Class값을 추가했다가 제거했다가 할 수 있음

$('button').click(function() {
	$(this).toggleClass('active');
} );
// 이처럼 껐다 켰다 하는 기능을 만들 수 있음

.each()

$("선택자").each(콜백함수)

• 선택자의 갯수만큼 콜백함수가 실행됨

<div class="test">
	<ul>
    		<li>1</li>
        	<li>2</li>
        	<li>3</li>
        </ul>
</div>

$(".test li").each(function(){
	$(this).addClass("test")
});

실행 시
<div class="test">
	<ul>
    		<li class="test">1</li>
        	<li class="test">2</li>
        	<li class="test">3</li>
        </ul>
</div>