가카리의 공부방

27. Text 객체 값 API 텍스트 노드는 DOM에서 실질적인 데이터가 저장되는 객체이다. 따라서 텍스트 노드에는 값과 관련된 여러 기능들이 있는데 이번 시간에는 값을 가져오는 두개의 API를 알아본다. (둘 다 같은 의미임) nodeValue data html css JavaScript var t = document.getElementById('target').firstChild; console.log(t.nodeValue); console.log(t.data); 출처 : https://opentutorials.org/course/1375/6745 28. Text 객체 조작 API 텍스트 노드가 상속 받은 CharacterData 객체는 문자를 제어할 수 있는 다양한 API를 제공한다. 아래는 조작..

26. Text 객체 1) 소개 텍스트 객체는 텍스트 노드에 대한 DOM 객체로 CharcterData를 상속 받는다. 아래는 텍스트 노드를 찾는 예제다. 주목할 것은 DOM에서는 공백이나 줄바꿈도 텍스트 노드라는 점이다. Hello world Hello world var t1 = document.getElementById('target1').firstChild; var t2 = document.getElementById('target2').firstChild; console.log(t1.firstChild.nodeValue); try{ console.log(t2.firstChild.nodeValue); } catch(e){ console.log(e); } console.log(t2.nextSibling..

25. Document 객체 1) 소개 Document 객체는 DOM의 스팩이고 이것이 웹브라우저에서는 HTMLDocument 객체로 사용된다. HTMLDocument 객체는 문서 전체를 대표하는 객체라고 할 수 있다. 아래 코드는 이를 보여준다. //document 객체는 window 객체의 소속이다. console.log(window.document); //document 객체의 자식으로는 Doctype과 html이 있다. console.log(window.document.childNodes[0]); console.log(window.document.childNodes[1]); 2) 주요 API 노드 생성 API document 객체의 주요 임무는 새로운 노드를 생성해주는 역할이다. 이에 대한 내용은..

24. 문자열로 노드 제어 노드 변경 API에서는 여러 메소드를 이용해서 노드를 제어하는 방법에 대해서 알아봤다. 그런데 이 방식은 복잡하고 장황하다. 좀 더 편리하게 노드를 조작하는 방법을 알아보자. 1) innerHTML innerHTML는 문자열로 자식 노드를 만들 수 있는 기능을 제공한다. 또한 자식 노드의 값을 읽어올 수도 있다. HTML CSS function get(){ var target = document.getElementById('target'); alert(target.innerHTML);//HTML소스코드를 바로 보여줌 } function set(){ var target = document.getElementById('target'); target.innerHTML = "JavaS..

1. 중소 SI는 무조건 걸러라. 여러가지 일을 배울수 있을거라 착각하지만 습자지보다 얄팍한 지식이나 쌓으면 다행이다. 제대로 모르니 진행하는 플젝마다 삽질, 버그와 갑질에 수명이 줄어들거다. 2. 면접시 느낌적인 느낌으로 뽑는 회사는 무조건 걸러라.전공분야에 대해 지식을 검증하지도 않고 당장 일 가능하냐? 혹은 잘할수 있겠느냐? 정도만 묻는 회사는 너가 면접보기 1주 전에 일하던 사람이 ㅈ같은회사 욕하며 튀어나갔을 확률이 99프로다. 3. 연봉이 업계평균 이하인 회사는 무조건 걸러라업계 평균이야 찾아보면 자료 다 나오니깐 언급 안하겠음. 중소이고 돈을 적게 준다는건, 우리 회사는 그리 돈 많이 되는 일을 하지도 않고 앞으로도 별로 관심 없다라는 뜻이다. 4. 엔지니어들만 존재하는 회사는 무조건 걸러라인..

23. jQuery Node 변경 API jQuery를 이용해서 노드를 제어하는 방법을 알아보자. jQuery에서 노드를 제어하는 기능은 주로 Manipulation 카테고리에 속해 있다. http://api.jquery.com/category/manipulation/ 1) 추가 추가와 관련된 주요한 메소드는 4가지다. 각각의 관계를 그림으로 나타내면 아래와 같다. 아래 코드는 위의 API를 이용해서 문서의 구조를 변경한 예이다. (실행) content1 //타겟 전 //타겟 바로 이전 content2 //타겟 바로 이후 //타겟 후 $('.target').before('before');//타겟의 이전에 들어감 $('.target').after('after');//타겟의 다음에 들어감 $('.target..

22. Node 변경 API 1) 노드 추가 노드의 추가와 관련된 API들은 아래와 같다. appendChild(child) 노드의 마지막 자식으로 주어진 엘리먼트 추가 insertBefore(newElement, referenceElement) appendChild와 동작방법은 같으나 두번째 인자로 엘리먼트를 전달 했을 때 이것 앞에 엘리먼트가 추가된다. 노드를 추가하기 위해서는 추가할 엘리먼트를 생성해야 하는데 이것은 document 객체의 기능이다. 아래 API는 노드를 생성하는 API이다. document.createElement(tagname) 엘리먼트 노드를 추가한다. document.createTextNode(data) 텍스트 노드를 추가한다. HTML CSS function callAppe..

21. Node 종류 API 노드 작업을 하게 되면 현재 선택된 노드가 어떤 타입인지를 판단해야 하는 경우가 있다. 이런 경우에 사용할 수 있는 API가 nodeType, nodeName이다. Node.nodeType node의 타입을 의미한다. Node.nodeName node의 이름 (태그명을 의미한다.) 1) Node Type 노드의 종류에 따라서 정해진 상수가 존재한다. 아래는 모든 노드의 종류와 종류에 따른 값을 출력하는 예제다. for(var name in Node){ console.log(name, Node[name]); } 결과 ELEMENT_NODE 1 ATTRIBUTE_NODE 2 TEXT_NODE 3 CDATA_SECTION_NODE 4 ENTITY_REFERENCE_NODE 5 EN..

20. Node 관계 API Node 객체는 Node 간의 관계 정보를 담고 있는 일련의 API를 가지고 있다. 다음은 관계와 관련된 프로퍼티 들이다. Node.childNodes 자식노드들을 유사배열에 담아서 리턴 한다 Node.firstChild 첫번째 자식노드 Node.lastChild 마지막 자식노드 Node.nextSibling 다음 형제 노드 Node.previousSibling 이전 형제 노드 아래는 위의 API를 이용해서 문서를 탐색하는 모습을 보여준다. html css JavaScript JavaScript Core DOM BOM var s = document.getElementById('start'); console.log(1, s.firstChild); // #text body와 ul..

19. Node 객체 소개 Node 객체는 DOM에서 시조와 같은 역할을 한다. 다시 말해서 모든 DOM 객체는 Node 객체를 상속 받는다. Node 객체의 위상을 그림으로 나타내면 아래와 같다. 주요기능 Node 객체의 주요한 임무는 아래와 같다.관계 엘리먼트는 서로 부모, 자식, 혹은 형제자매 관계로 연결되어 있다. 각각의 Node가 다른 Node와 연결된 정보를 보여주는 API를 통해서 문서를 프로그래밍적으로 탐색할 수 있다. Node.childNodes Node.firstChild Node.lastChild Node.nextSibling Node.previousSibling Node.contains() Node.hasChildNodes() 1) 노드의 종류 Node 객체는 모든 구성요소를 대표하..