Element 조회 API
document.getElements vs element.getElements
- document : 문서 전체 내용중에서 조회
- element : 특정 객체의 하위 엘리먼트에서 조회
Element 속성 API
- element.getAttribute(target) : 속성값 가져오기
- element.setAttribute(target, value) : 속성값 추가/변경하기
- element.removeAttribute(target) : 속성 삭제하기
- element.hasAttribute(target) : 속성 존재여부 확인
속성 API 보충
- 속성과 Property의 차이
target.setAttribute('class', 'important'); // 속성방식
target.className = 'important'; // 프로퍼티 방식
property 방식의 장/단점
- 간편하다
- 평균적으로 속도가 빠르다
- 실제 html 속성의 이름과 다른 이름을 갖는 경우가 있다(자바스크립트 이름 규칙 때문)
ex for:htmlFor, maxlength:maxLength
jQuery 속성 제어 API
- attr() : setAttribute(), getAttribute() 에 대응
ex) $().attr(target) : getAttribute(target)
ex) $().attr(target, value) : setAttribute(target, value)
- removeAttr() : removeAttribute() 에 대응
jQuery property API
jQuery API 를 사용하는 경우 장점 : 코드짧다, html 속성이름의 제약을 신경쓰지 않아도 된다.
property 방식
attibute 방식
- $().attr('href'); // ./demo.html
jQuery 조회 범위 제한
$(".marked", "#active").css(css-property, value)
- $(selector) : selector .marked class 하위의 active id 를 갖는 엘리먼트만 선택됨
$(".marked").find('.#active').css() : 위의 코드와 동일한 범위의 엘리먼트를 선택한다.
$(selector).find(selector)
$().find는 언제쓰는가
- Chaining으로 처리해야하는경우
ex) $('#active').css('color'. 'blue').find('.marked').css('background-color', 'red');