본문 바로가기

전체 글

 (251)
[Javascript]Document객체 Node구조 위 코드를 보자 document는 window객체의 자식이다. 고로 window.document이고 그럼 document의 자식은 무엇일까? 바로 Doc타입과 html이다. 예를 들어 document.createElement(li);를 하게 되면 li태그 엘리먼트가 생성되는데 이는 곧 document의 자식객체 중html에 엘리먼트를 생성하는 것이다. 다른 예시를 보자 document.title 을 입력하면 어떻게 될까? document객체의 자식인 html태그에서 자식인 title을 찾아서 값을 리턴한다.
[javaScript]innerHTML, outerHTML 1. innerHTML선택된 엘리먼트의 하위노드에 엘리먼트를 리턴한다. 2. outerHTML선택된 엘리먼트에 엘리먼트를 리턴한다. 3. 이 외innerText, outerText 메소드가 있는데 이들은선택된 엘리먼트의 (자식) 텍스트노드를 리턴한다.이들은 모두 읽기 전용이다. 4. insertAdjacentHTML은 텍스트노드를 엘리먼트에 낑겨넣는 메소드이다. 위 네개의 화살표가 네개의 함수와 순서대로 작동하여 입력된다.
[jQuery] node 제어 API 이번에는 jquey를 이용하여 노드를 제어해보자! before after prepend append 모두 엘리멘트를 더하는 메소드이다. 차이점을 살펴보면 before 는 여기 에 추가되고 after는 여기 에 추가되고 prepend는 여기 content1 after는 content1 여기 에 추가된다. 다음 코드는 제거에 관한건데 remove 메소드와 empty메소드가 있다. remove는 엘리먼트를 전체를 삭제하고empty는 엘리먼트 자식노드 중 text노드를 삭제한다. 다음 코드는 노드 변경! 1. btn1엘리먼트를 클릭할시에 replaceAll 를 #target1의 엘리먼트에 덮어 쓴다. 2.1. btn2엘리먼트를 클릭할시에 #target1의 엘리먼트를 replaceWith로 덮어 쓴다. 순서만 다..
[JavaScirpt] Node객체 API 이전에 Node객체와 관계API를 공부했는데 이번에 종류API와 변경 API를 정리해보자. 종류API for(var name in Node){console.log(name , Node[name])} 위 코드는 모든 노드객체에 대한 타입값을 출력한다. 그리고 var body = document.getElementById("body");를 한 후 body.nodeType을 하게 되면 1 이 리턴 된다. 이는 엘리먼트_ 노드이다. 그리고 body.nodeName을 할 시에는 'body'가 리턴된다. document.nodeType은 9를 리턴한다.그리고 document.nodeName을 할 시에는 #document. 곧 document객체명을 리턴한다. 다음을 보자!참고로 이 코드는 재귀함수로 되어있다.재귀함..
[JavaScript]Node추가 첫번째 버튼을 클릭하면 callAppendChild라는 함수가 실행되는데 이 함수의 내용은 다음과 같다 1 .변수 target에 'target'이 아이디인 엘리먼트를 담고2. 변수 li에 CreateElement라는 함수로 새로운 엘리먼트인 li를 만든다. 이때 객체는 document(왜냐하면 문서에 작성하기 때문)3. 변수 text에 createTextNode라는 함수를 이용하여 text노드객체를 만들고 그 내용은 JavaScript 4. li에 appendChild를 통해서 text를 하위노드로 정함 뭔 소리냐면 생성되어진 태그 사이에 text객체인 javascript가 들어가서 javascript가 됨 5. 그 값은 ul태그인 target에 들어감 아래것은 insertBefore메소드를 통해서(li..
[React_Nomadcoder]Movie_app 구조 1. index.html여기서 확인 할 것은
[JavaScript]Node객체 모든 DOM객체의 부모! Document - 문서 전체 HTMLDocument - 그 중 HTML 문서 전체 CharacterData - 문자 데이터 Text - Text 태그 사이의 문자 Comment - 주석 Element : 엘리먼트 Attr : 속성 Node의 API 관계(엘리먼트의 관계)엘리먼트는 서로 부모, 자식, 혹은 형제자매 관계로 연결되어 있다. 각각의 Node가 다른 Node와 연결된 정보를 보여주는 API를 통해서 문서를 프로그래밍적으로 탐색할 수 있다.Node.childNodesNode.firstChild Node.lastChildNode.nextSiblingNode.previousSiblingNode.contains()Node.hasChildNodes()노드의 종류Node 객체는 ..
[jQuery] 조회범위 제한하기 위는 id가 active인 엘리먼트들의 class가 marked인 엘리먼트만 background를 변경한다. 위는 css 선택자의 효과를 이용하여 속성을 다룬 것이다. 다음은 find메소드를 이용한 것이다. #active객체에 .marked를 찾아서 css를 적용한다. 이때 find는 이렇게 부분만 선택해 사용할 수 있다. 이는 active엘리먼트의 css를 모두 적용하고 find를 이용해 .marked만 background를 추가적으로 적용한 예제이다.

티스토리툴바