목록Study Memos/JavaScript Front-End (48)
KorSA
참고> opentutorials.org/course/1375/6740 1. HTMLDocument 객체: Document 객체를 상속받은 객체. HTML 문서를 대표하는 객체. 2. Document - HTMLDocument 관계는 Element - HTMLElement 관계와 비슷. HTML 문서에서 실제적인 조작은 HTMLElement가 한다. 3. 노드 생성 등의 역할을 함
참고> opentutorials.org/course/1375/6738 1. innerHTML: 자기를 제외한 자식들만 보여줌 -> 읽기를 통해 target 노드의 하위 노드를 손쉽게 할당할 수 있음. 2. outerHTML: 자기를 포함한 전체를 보여줌 3. innerText, outerText: 하위 노드로 쓰는 게 아니라 정말 Text로 취급. 4. insertAdjacentHTML: 특정 HTML 문을 특정 위치에 낑겨넣음 - 첫번째 인자로 주는 옵션: beforebegin, afterbegin, beforeend, afterend
참고> opentutorials.org/course/1375/6743 1. before(), after() : 노드의 앞, 뒤에 추가 2. prepend(), append() : 노드의 하위 카테고리의 앞, 뒤에 추가 3. remove() : 노드 제거 4. empty() : 노드의 값을 지움 5. replaceWith(), replaceAll() : 노드의 내용을 교체함 - replaceWith(): 제어 대상을 먼저 지정 - replaceAll(): 제어 대상을 인자로 전달 6. clone() : 노드 복사
참고> opentutorials.org/course/1375/6701 1. 객체 생성은 document 객체의 createElement() 함수를 사용해서 할 수 있음. 2. appendChild(), removeChild(), replaceChild()
참고> opentutorials.org/course/1375/6700 1. nodeType : Node의 종류를 알 수 있음 2. nodeName: Node의 이름
참고> opentutorials.org/course/1375/6699 1. firstChild: root tag와 그 다음 tag 사이에 줄바꿈, 공백 등이 있으면 #text가(Text 객체) 첫번째 child가 됨. 2. nextSibling, previousSibling, parentNode 등으로 Node와 Node 사이를 왔다갔다 할 수 있음.
참고> opentutorials.org/course/1375/6698 1. Node 객체: DOM에서 시조와 같은 역할.
참고> opentutorials.org/course/1375/6697 1. $(selector, "#RangeLimitedIDName").css(...) 2. find() 함수: 특정 jQuery 객체에서 호출하면 해당 객체의 하위 객체들만 조회함.
참고> opentutorials.org/course/1375/6696 1. jQuery에서는 속성을 참조하기 위해 attr() 함수를 사용함. (Element 객체에서는 setAttribute(), getAttribute() 가 동일한 역할) 2. jQuery에서도 Element 처럼 속성과 프로퍼티의 차이가 있음 -> attr() 은 Attribute 방식, prop() 는 Property 방식 -> jQuery 에서는 attr() 이든 prop() 이든 이름이 달라서 발생했던 미묘한 차이를 알아서 보정해줌. (Element에서는 Attribute 방식과 Property 방식의 참조 이름이 미묘하게 달라서 버그의 소지가 다분했음)
참고> opentutorials.org/course/1375/6684 1. getAttribute(): 속성을 얻어옴 2. setAttribute(): 속성을 변경함. 없던 속성이면 새로운 속성을 추가해줌. 3. 속성 vs 프로퍼티 -> 같은 결과를 내지만 setAttribute()로 속성을 조작할때와 property에 assign 방식으로 프로퍼티를 조작할 때는 참조하는 변수의 이름이 미묘하게 다르다. 마찬가지로, Element 객체로부터 어떤 값을 얻어올 때 속성으로 얻어올 떄와 property로 얻어올 때의 값도 미묘하게 다르다. 실제 개발을 할 때에는 이 차이에 대해 인지를 하고 개발해야 버그가 적게 발생한다.