점미의 스터디 점미의 스터디

JavaScript

• 웹브라우저 자바스크립트 - 노드 변경 API

  JavaScript/생활코딩 2018. 11. 28. 11:02

  노드 변경 API - https://opentutorials.org/course/1375/6701 노드 변경 API는 노드추가, 기존노드제거, 노드변경하는 방법이 있다. 노드추가노드 추가와 관련된 API들은 아래와 같다.appendChild(child) : 노드의 마지막 자식으로 주어진 엘리먼트 추가insertBefore(newElement, referenceElement) : appendChild와 동작방법은 같으나 두번째 인자로 엘리먼트를 전달 했을 때 이것 앞에 엘리먼트가 추가된다. 위의 노드 추가 API를 사용하기 위해서는 엘리먼트를 생성해야 한다.엘리먼트는 document 객체를 통해 생성할 수 있다. document.createElement(tagname) : 엘리먼트 노드를 추가한다.docu..

  Read More
• 웹브라우저 자바스크립트 - 노드 종류 API

  JavaScript/생활코딩 2018. 11. 27. 17:00

  노드 종류 API - https://opentutorials.org/course/1375/6700 노드 작업을 하게 되면 현재 선택된 노드가 어떤 타입인지를 판단해야 하는 경우가 있다. 이런 경우에 사용할 수 있는 API가 nodeType, nodeName이다. NodeType숫자를 통해서 어떠한 엘리먼트가 어떤 type의 노드인지 체크할 때 NodeType이라는 속성을 사용한다. 아래는 엘리먼트에 대한 노드숫자값이다. ELEMENT_NODE 1 ATTRIBUTE_NODE 2 TEXT_NODE 3 CDATA_SECTION_NODE 4 ENTITY_REFERENCE_NODE 5 ENTITY_NODE 6 PROCESSING_INSTRUCTION_NODE 7 COMMENT_NODE 8 DOCUMENT_NODE..

  Read More
• 웹브라우저 자바스크립트 - Node 관계 API

  JavaScript/생활코딩 2018. 11. 27. 16:47

  Node 관계 API - https://opentutorials.org/course/1375/6699 Node 객체가 가지고 있는 프로퍼티들을 사용하기Node.childNodes - 자식노드들을 유사배열에 담아서 리턴Node.firstChild - 첫번째 자식노드Node.lastChild - 마지막 자식노드Node.nextSibling - 다음 형제노드Node.previousSibling - 이전 형제노드 html css JavaScript JavaScript Core DOM BOM 해당 html파일을 가지고 콘솔창에서 Node 객체의 관계 프로퍼티들을 확인 할 수 있다. -> start 변수에 body id 인 start을 이용하여 body전체를 담는다. -> childNodes를 통해 유사배열 형태를..

  Read More
• 웹브라우저 자바스크립트 - Node 객체

  JavaScript/생활코딩 2018. 11. 27. 16:07

  Node 객체 - https://opentutorials.org/course/1375/6698 Node객체는 DOM에서 시조와 같은 역할을 한다.DOM에서 가장 최상위에 있다는 것을 뜻한다.Node객체에 있는 프로퍼티를 DOM의 모든 객체에 상속받는다. 주요기능Node 객체의 주요한 임무는 아래와 같다.관계엘리먼트는 서로 부모, 자식, 혹은 형제자매 관계로 연결되어 있다. 각각의 Node가 다른 Node와 연결된 정보를 보여주는 API를 통해서 문서를 프로그래밍적으로 탐색할 수 있다.Node.childNodesNode.firstChildNode.lastChildNode.nextSiblingNode.previousSiblingNode.contains()Node.hasChildNodes()노드의 종류Node..

  Read More
• 웹브라우저 자바스크립트 - 속성 API

  JavaScript/생활코딩 2018. 11. 27. 15:59

  속성 API - https://opentutorials.org/course/1375/6683 속성 API는 opentutorials 이 부분에서 id, href 와 같은 속성을 제어할 수 있다. opentutorials위의 예제에서 실행한 코드들의 결과를 통해 속성을 제어하는 방법을 알 수 있다. t.getAttribute('href') : getAttribute는 속성을 가져오는 역할로 href를 적으면 http://opentutorials.org 값이 반환된다.t.setAttribute : setAttribute는 속성값을 설정하는 역할이다.t.hasAttribute('title') : hasAttribute는 속성의 존재여부를 확인한다.t.removeAttribute('title') : remove..

  Read More
• 웹브라우저 자바스크립트 - 조회 API

  JavaScript/생활코딩 2018. 11. 27. 15:13

  조회 API - https://opentutorials.org/course/1375/6684 document.getElementsBy*메소드를 통해서 엘리먼트를 조회했다.document 객체는 문서전체를 의미하는 엘리먼트이기 때문에 document의 조회 메소드는 문서 전체를 대상으로 엘리먼트를 조회한다.Element 객체도 getElementsBy* 엘리먼트를 가지고 있는데 Element 객체의 조회 메소드는 해당 엘리먼트의 하위 엘리먼트를 대상으로 조회한다. 아래 예제는 class가 marked인 엘리먼트를 찾는데className으로 marked인 엘리먼트를 찾는것과 id가 active인 엘리먼트의 하위 엘리먼트로 class가 marked인 엘리먼트는 찾는 예제이다.document 객체의 getEle..

  Read More
• 웹브라우저 자바스크립트 - 식별자 API

  JavaScript/생활코딩 2018. 11. 26. 17:16

  식별자 API - https://opentutorials.org/course/1375/6682 HTML에서 엘리먼트의 이름, id, class는 식별자로 사용되는데식별자 API는 이 식별자를 가져오고 변경하는 역할을 한다. Element.tagNametagName은 변경할 수 없으며 읽기전용이다. html css JavaScript [결과화면] Element.id문서에서 단 한번만 등장하는 식별자이다.같은 이름을 가지고 있는 태그는 존재하지 않는다.id값은 변경이 가능하다. html css JavaScript [결과화면] Element.className현재는 많이 사용하지 않는다.class를 변경하려면 현재class명을 확인한 후에 변경해야 하며 class를 삭제하려면 현재class명을 다른이름으로 재지..

  Read More
• 웹브라우저 자바스크립트 - Element객체

  JavaScript/생활코딩 2018. 11. 26. 16:02

  Element객체 - https://opentutorials.org/course/1375/6681 Element객체란 문서상에 있는 각 각의 태그 element를 추상화한 객체이다. HTML CSS JavaScript예제를 실행 후 콘솔화면에서 아래와 같이 t변수를 만들어 줍니다.t는 HTMLLIElement객체 입니다. 이 객체는 HTMLElement의 자식객체입니다. 그리고 HTMLElement의 부모객체는 Element객체 입니다. [콘솔화면] ※ HTMLElement와 Element를 구분하는 이유Dom(Element)이 html만을 제어하는 규격은 아니기 때문입니다. (XML, SVG, XUL...등등 다른 마크업언어들를 제어할 수 있습니다)HTMLElement는 html언어를 제어하는 객체입니..

  Read More