Language/JavaScript(ES6) (48) 썸네일형 리스트형 [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클래스 만이 조회가 된다. [JavaScirpt]Element객체 中 식별자 API 1. TagName 다음의 'actvie아이디의 엘리먼트는 HTMLLELMENT객체이고 이는 HTMLELEMENT의 속성이다. 그리고 HTMLELEMENT객체이고 ELEMENT객체의 속성이다. ELEMENT객체이고 이는 tagName이라는 속성을 가지고 있다. tagName은 속성값으로 하위 엘리먼트의 태그 네임을 리턴한다. 이는 읽기 전용이다. 2. id tagName과 대부분 같지만이는 읽기 및 쓰기가 가능하다. 위 예제는 'active객체의 id값을 변경한 모습이다. 3.ClassName 위는 className을 통해서 새로운 클래스를 생성했다. 4. classlist classname보다 보편적으로 쓰임 다음을 보면 active.classList를 호출하면 리턴 값으로 DOMTokenList라는 .. [Javascript]Element객체 Javascript var t = document.getElementById('active')여기서 t 안에는 li엘리먼트이자 HTMLLIELEMNT객체이자 HTMLELEMENT객체이자 ELEMENT객체가 들어가 있음그리고 HTMLELENT객체의 속성중엔 .style이란 속성이 있고,그런데 DOM은 HTML만을 위한 것이 아니라 마크업을 위한(XML ,XUL, SVG) 것임그래서 모든 마크업 언어의 부모 객체에는 ELEMENT객체가 있음자세한건 크롬의 개발모드에서 엘리먼트를 누르고 오른쪽 창의 프로퍼티를 누르면 볼 수 있음다음은 DOM계층구조에서 ELEment 객체의 위치는 다음과 같다.다음은 Element의 API들이다.식별자문서내에서 특정한 엘리먼트를 식별하기 위한 용도로 사용되는 APIlement... 이전 1 2 3 4 5 6 다음
