Study Memos/JavaScript Front-End (48) 썸네일형 리스트형 Node 객체 - Node 종류 API (Section 25) 참고> opentutorials.org/course/1375/6700 1. nodeType : Node의 종류를 알 수 있음 2. nodeName: Node의 이름 Node 객체 - Node 관계 API (Section 24) 참고> opentutorials.org/course/1375/6699 1. firstChild: root tag와 그 다음 tag 사이에 줄바꿈, 공백 등이 있으면 #text가(Text 객체) 첫번째 child가 됨. 2. nextSibling, previousSibling, parentNode 등으로 Node와 Node 사이를 왔다갔다 할 수 있음. Node 객체 (Section 23) 참고> opentutorials.org/course/1375/6698 1. Node 객체: DOM에서 시조와 같은 역할. jQuery 조회 범위 제한 (Section 22) 참고> opentutorials.org/course/1375/6697 1. $(selector, "#RangeLimitedIDName").css(...) 2. find() 함수: 특정 jQuery 객체에서 호출하면 해당 객체의 하위 객체들만 조회함. jQuery 속성 제어 API (Section 21) 참고> opentutorials.org/course/1375/6696 1. jQuery에서는 속성을 참조하기 위해 attr() 함수를 사용함. (Element 객체에서는 setAttribute(), getAttribute() 가 동일한 역할) 2. jQuery에서도 Element 처럼 속성과 프로퍼티의 차이가 있음 -> attr() 은 Attribute 방식, prop() 는 Property 방식 -> jQuery 에서는 attr() 이든 prop() 이든 이름이 달라서 발생했던 미묘한 차이를 알아서 보정해줌. (Element에서는 Attribute 방식과 Property 방식의 참조 이름이 미묘하게 달라서 버그의 소지가 다분했음) Element 객체 - 속성 API (Section 20) 참고> opentutorials.org/course/1375/6684 1. getAttribute(): 속성을 얻어옴 2. setAttribute(): 속성을 변경함. 없던 속성이면 새로운 속성을 추가해줌. 3. 속성 vs 프로퍼티 -> 같은 결과를 내지만 setAttribute()로 속성을 조작할때와 property에 assign 방식으로 프로퍼티를 조작할 때는 참조하는 변수의 이름이 미묘하게 다르다. 마찬가지로, Element 객체로부터 어떤 값을 얻어올 때 속성으로 얻어올 떄와 property로 얻어올 때의 값도 미묘하게 다르다. 실제 개발을 할 때에는 이 차이에 대해 인지를 하고 개발해야 버그가 적게 발생한다. Element 객체 - 식별자 API (Section 19) 참고> opentutorials.org/course/1375/6682 1. tagName(): Element 객체의 tag 이름을 알려줌. tag는 ReadOnly여서 변경이 안됨. 2. id: Element의 고유 식별자: id 값은 변경 가능 3. className: Element의 class 이름 -> classList가 훨씬 쓰기 좋음. className은 좀 불편함 -> className은 태그에 쓰인 거랑 조회한거랑 다른 경우도 있으니 참고바람. 4. classList: 띄어쓰기로 구분된 class 이름을 띄어쓰기 기준으로 split 하여 리턴해줌 -> classList의 리턴 값은 DOMTokenList이고 유사 배열임 -> CRUD 기능을 함 -> classList의 toggle 기능은 c.. Element 객체 (Section 18) 참고> opentutorials.org/course/1375/6681 1. HTMLElement: HTML 태그는 다 HTMLElement 를 상속받음 2. Element vs HTMLElement -> DOM은 꼭 HTML 만 제어하는 언어는 아님 -> DOM은 XML, SVG, XUL 등등 많은 Mark-up Language 에서 사용하는 표준이기 때문에 HTML 전용으로 사용하는 Element가 하나 필요했는데, 그게 바로 HTMLElement 임. 예를 들어 style 속성은 Element에는 없는 속성이지만 HTMLElement 속성에는 존재함 이전 1 2 3 4 5 6 다음