[JS + jquery] 객체 조작 메서드 (속성 조작 메서드 html(), text(), attr(), removeAttr(), prop(), val(), css(), addClass(), removeClass(), toggleClass(), hasClass())

1. 객체 조작 메서드 

객체 조작 메서드에는 속성 조작 메서드와 수치 조작 메서드, 객체 편집 메서드로 나눌 수 있다. 

속성 조작 메서드는 요소의 속성을 바꿀 때 사용한다. 

수치 조작 메서드는 요소의 너비값 또는 높이값 같은 수치를 바꿀 때 사용한다. 

객체 편집 메서드는 객체를 생성하거나 삭제 또는 복제할 때 사용한다. 

 

2. 속성 조작 메서드 

 

1️⃣ html() / text() 메서드 

html() 메서드는 선택한 요소의 하위 요소를 가져와 문자열로 반환하거나 하위 요소를 전부 제거하고 새 요소로 바꿀 때 사용한다. 

$("요소 선택").html();

$("요소 선택").html("새 요소");

 

text() 메서드는 선택한 요소에 포함되어 있는 전체 텍스트를 가져오거나 선택한 하위 요소를 전부 제거하고 새 텍스트를 생성할 때 사용한다. 

$("요소 선택").text();

$("요소 선택").text("새 텍스트");

 

2️⃣ attr() / removeAttr() 메서드 

attr() 메서드는 선택한 요소에 새 속성을 생성하거나 기존의 속성을 변경할 때 또는 요소의 속성값을 불러올 때 사용한다. 

$("요소 선택").attr("속성명");

$("요소 선택").attr("속성명", "새 값");

$("요소 선택").attr({"속성명1" : "새 값1", "속성명2" : "새 값2"...}); 

 

removeAttr() 메서드는 선택한 요소에서 기존의 속성을 삭제할 때 사용한다. 

$("요소 선택").removeAttr("속성");

 

3️⃣ addClass() / removeClass() / toggleClass() / hasClass() 메서드 

$("요소 선택").addClass("class 값"); addClass() 메서드는 선택한 요소에 클래스를 생성한다. 

$("요소 선택").removeClass("class 값"); removeClass() 메서드는 선택한 요소에서 지정한 클래스를 삭제한다. 

$("요소 선택").toggleClass("class 값"); toggleClass() 메서드는 선택한 요소에 지정한 클래스가 없으면 생성하고 있을 경우에는 삭제한다. 

$("요소 선택").hasClass("class 값"); hasClass() 메서드는 선택한 요소에 지정한 클래스가 있으면 true 반환, 없으면 false 반환 

 

 

4️⃣val() 메서드 

val() 메서드는 선택한 폼 요소의 value 속성값을 가져오거나 새 값을 적용할 때 사용한다. 

$("요소 선택").val();

$("요소 선택").val("새 값"):

5️⃣ prop() 메서드 

prop() 메서드는 선택한 폼 요소(선택상자, 체크박스, 라디오 버튼) 의 상태 속성값을 가져오거나 새롭게 설정할 때 사용한다. 

$("요소 선택").prop("[checked | selected ]");

$("요소 선택").prop("[checked | selected]", [true | false] );

$("요소 선택").prop("[tagName | nodeType | selectedIndex | defaultValue ]");

defaultValue는 사용자가 value 속성을 변경하더라도 초기의 value 속성값을 가져온다.