power-girl0-0

생활코딩 웹브라우저 javascript를 참고하여 공부하였습니다. 스스로 공부한 것을 정리하고 복습하기 위한 목적으로 작성하였습니다. ( 출처 : https://opentutorials.org/course/743inf.run/pBzy) 노드 추가 노드의 추가와 관련된 API들은 아래와 같다. appendChild(child) : 노드의 마지막 자식으로 주어진 element가 추가된다. insertBefore(newElement, referenceElement) : appendChild와 동작방법은 같으나 두번째 인자로 element를 전달 했을 때 이것 앞에 element가 추가된다. 하지만, 노드를 추가하기 위해서는 추가할 element를 먼저 생성해야 하는데 이것은 document 객체의 기능이다. ..

생활코딩 웹브라우저 javascript를 참고하여 공부하였습니다. 스스로 공부한 것을 정리하고 복습하기 위한 목적으로 작성하였습니다. ( 출처 : https://opentutorials.org/course/743inf.run/pBzy) 노드 작업을 하게 되면 현재 선택된 노드가 어떤 타입인지를 판단해야 하는 경우가 있다. 이런 경우에 사용할 수 있는 API로 nodeType, nodeName이다. Node.nodeType : node의 타입을 의미한다. Node.nodeName : node의 이름(태그명)을 의미한다. Node Type 노드의 종류에 따라서 정해진 상수가 존재한다. 아래는 모든 노드의 종류와 종류에 따른 값을 출력하는 예제다. for(var name in Node){ console.log..

생활코딩 웹브라우저 javascript를 참고하여 공부하였습니다. 스스로 공부한 것을 정리하고 복습하기 위한 목적으로 작성하였습니다. ( 출처 : https://opentutorials.org/course/743inf.run/pBzy) Node 관계 API Node 객체는 Node 간의 관계 정보를 담고 있는 일련의 API를 가지고 있다. 다음은 관계와 관련된 property들이다. Node.childNodes : 자식노드들을 유사배열에 담아서 리턴한다. Node.firstChild : 첫번째 자식노드 Node.lastChild : 마지막 자식노드 Node.nextSibling : 다음 형제 노드 Node.previousSibling : 이전 형제 노드 Node.parentNode : 부모 노드 아래는 ..

생활코딩 웹브라우저 javascript를 참고하여 공부하였습니다. 스스로 공부한 것을 정리하고 복습하기 위한 목적으로 작성하였습니다. ( 출처 : https://opentutorials.org/course/743inf.run/pBzy) Node 객체 Node 객체는 DOM에서 시조와 같은 역할을 한다. 다시 말해서 모든 DOM 객체는 Node 객체를 상속 받는다는 뜻이다. 아래는 Node 객체의 위상을 그림으로 나타낸 것이다. 주요기능 Node 객체의 주요한 임무는 아래와 같다. 관계 element는 서로 부모, 자식, 혹은 형제자매 관계로 연결되어 있다. 각각의 Node가 다른 Node와 연결된 정보를 보여주는 API를 통해서 문서를 프로그래밍적으로 탐색할 수 있다. Node.childNodes : 자..

생활코딩 웹브라우저 javascript를 참고하여 공부하였습니다. 스스로 공부한 것을 정리하고 복습하기 위한 목적으로 작성하였습니다. ( 출처 : https://opentutorials.org/course/743inf.run/pBzy) jQuery에서 조회 범위가 그 객체의 하위 element로 제한하려면 어떻게 작업해야할까? selector context 가장 간편한 방법은 조회할 때 조회 범위를 제한하는 것이다. 그 제한된 범위를 jQuery에서는 selector context라고 한다. html css JavaScript JavaScript Core DOM BOM 선택자를 아래처럼 작성해도 결과가 같다. $( "#active .marked").css( "background-color", "red" ..

생활코딩 웹브라우저 javascript를 참고하여 공부하였습니다. 스스로 공부한 것을 정리하고 복습하기 위한 목적으로 작성하였습니다. ( 출처 : https://opentutorials.org/course/743inf.run/pBzy) 지금까지 살펴본 Element의 API에 해당하는 기능을 jQuery에서는 어떻게 구사하는가를 알아보자. jQuery는 좀 더 적은 코드로 동일한 효과를 내는 목적을 갖고 있는데, 이는 실용적인 것을 추구하기 때문이다. 속성제어 jQuery 객체의 메소드 중 setAttribute, getAttribute에 대응되는 메소드는 attr이다. 또한, removeAttribute에 대응되는 메소드로는 removeAttr이 있다. opentutorials attribute와 pr..

생활코딩 웹브라우저 javascript를 참고하여 공부하였습니다. 스스로 공부한 것을 정리하고 복습하기 위한 목적으로 작성하였습니다. ( 출처 : https://opentutorials.org/course/743inf.run/pBzy) 속성 API 속성은 HTML에서 태그명만으로는 부족한 부가적인 정보라고 할 수 있다. 각각의 기능은 아래와 같다. 1. Element.getAttribute(name) : name이라는 속성의 값을 가져오겠다. 2. Element.setAttribute(name, value) : 속성값을 변경시주거나, 인자에 해당되는 name없을 경우는 생성시켜준다. ex) element.setAttribute('href', ' https://power-girl0-0.tistory.com..

생활코딩 웹브라우저 javascript를 참고하여 공부하였습니다. 스스로 공부한 것을 정리하고 복습하기 위한 목적으로 작성하였습니다. ( 출처 : https://opentutorials.org/course/743inf.run/pBzy) 조회 API 조회 API는 element를 조회하는 기능이다. document 객체는 문서 전체를 의미하는 element이기 때문에 document의 조회 메소드는 문서 전체를 대상으로 엘리먼트를 조회한다. Element 객체 역시도 getElementsBy* 엘리먼트를 가지고 있는데 Element 객체의 조회 메소드는 해당 엘리먼트의 하위 엘리먼트를 대상으로 조회를 수행한다. 아래 예제를 통해 조회 대상을 제한하는 방법에 대한 알아보자. html css JavaScrip..