Language (58) 썸네일형 리스트형 [Javascript] Text객체 피 자 여기서 는 엘리먼트 객체이다. 그리고 '피' 라는 문자는 텍스트 객체이다. (그리고 텍스트 객체는 캐릭터 데이터의 기능을 상속받음) 다음을 보자 첫번째 t1은 결과 값으로 Hello world이 리턴된다. 만약 t1.firstChild를 하게되면 Hello world가 출력될 것이다. 그럼 t2는? 태그와 태그 사이에 공백이 있기때문에 t2의 리턴값은공백(#TEXT)이 출력될 것이다. 다음 코드는 변수 t에 li엘리먼트의 자식객체인 'html'텍스트를 담았다. 그리고 그 값에 nodeValue혹은 data라는 메소드를 입력하면 온전히 'html'라는 값만을 리턴하며 t.nodeValue = JavaScript 혹은t.data = JavaScript 와 같은 식으로 값을 수정도 가능하다. [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은 텍스트노드를 엘리먼트에 낑겨넣는 메소드이다. 위 네개의 화살표가 네개의 함수와 순서대로 작동하여 입력된다. [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.. [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 객체는 .. [JavaScirpt]Element객체 中 속성 API 위는 target이 아이디인 엘리먼트를 t라는 변수에 담고 getAttribute메소드를 이용하였다. t.getAttribbute('href'); 이는 id가 target인 엘리먼트의 속성값 href를 불러오는 것이다. 변경하기 위해선 t.getAttribute('href' , 'www.google.com')과 같이 변경한다. 만약 새 속성을 추가하고 싶다면 그냥 추가하면 된다. t.getAttribute('title', 'active'); 와 같은 식으로 그 박에 제거하려면 t.removeAttribute('title'); 존재 여부를 알고 싶다면 t.hasAttribute('title'); 를 사용한다. 그렇다면 프로퍼티와 애트리뷰트는 같은가? 거희 비슷하지만 아예 같지는 않은데 다음 예시를 보면 알.. [Javascript]Element객체 中 조회API document.getElementBy*는 document문서 전체의 엘리먼트들을 조회한다. 그렇다면 하위의 어떤 태그만을 출력하려면 어떻게 하면 좋을까? 간단하다. var active = document.getElementsByClassName("active); 와 같이 부모 객체를 지정해 주고 actvie.getElementsByClassName("marked")를 하게 되면 active클래스의 marked클래스 만이 조회가 된다. 이전 1 ··· 3 4 5 6 7 8 다음
