목록Javascript-DOM/02 - DOM 다루기 (4)

< Code diaries />

NodeType 이란?

Node의 유형을 지정하는 정수타입의 값이다.nodeType(Value)definiationincludes..1Node.ELEMENT_NODE, ...2Node.ATTRIBUTE_NODE요소의 속성3Node.TEXT_NODE요소 또는 속성의 실제 텍스트4Node.CDATA_SECTION_NODECDATASection, 5Node.ENTITY_REFERENCE_NODE더이상 사용하지 않음6Node.ENTITY_NODE더이상 사용하지 않음7Node.PROCESSING_INSTRUCTION_NODE와 같은 XML 문서의 처리 지침8Node.COMMENT_NODE 주석문 노드9Node.DOCUMENT_NODEDocument node10Node.DOCUMENT_TYPE_NODE11Node.DOCUMENT_FRA..
Javascript-DOM/02 - DOM 다루기 2024. 9. 14. 22:07
HTML Node list를 Array로 converting 하기

NodeList와 HTML Collection은 유사배열객체라서 배열의 모든 메소드를 사용할 수는 없다. NodeList우리가 document.querySelectorAll()로 HTML elements를 가져오면 Nodelist로 들어온다. apple mango blueberry  HTML Collectionchildren 속성으로 가져온 것은 유사배열객체이다.  A B Cconst ul = document.querySelector('ul')const lis = ul.children;console.log(lis)// HTMLCollection(3) [ li, li, li ]
Javascript-DOM/02 - DOM 다루기 2024. 8. 8. 08:56
Javascript로 html 요소의 컨텐츠 가져오기, 수정하기(innerHTML, textContent, innerText)

오늘은 javascript에서 어떻게 HTML 요소의 값을 다루는지 살펴보아요~렛츠가.. 기릿입니다... (흐흐흐 아시는분은 다 아시는 구호죠? 돌비채널 팬이라.. )아래의 간단한 HTML 마크업으로 한번 해 봅시다~See My fruite 토마토 INIT - 먼저 html 요소를 변수에 담아옵니다.const title = document.querySelector('.title');const img = document.querySelector('.thumb img');const caption = document.querySelector('.thumb figcaption');  Property ListPropertytypedescriptiontextContentNodescript, style 적..
Javascript-DOM/02 - DOM 다루기 2024. 6. 2. 22:27
Javascript로 DOM 접근하기

따라란~~오늘부터는 Javascript에서 Dom을 다루는 다양한 방법들을 정리해 보려고 합니다. Javascript 에서 HTML 요소를 조작하기 위하여는 일단 접근을 해야합니다.자주사용하는 방법을 공부해 봅시다~! ^^모든 접근하는 명령어는 문서 하단의 MDN 사이트에서 참조하시면 됩니다. Hello DOMNice to meet you~Hello JavaScriptGood morning Everyone   1. ID 명으로 접근하기const h1 = document.getElementById('h1');  2. querySelector 로 접근하기const title = document.querySelector('.title'); 이경우 예제에서 클래스 'title'은 2개 이지만, 첫번째로 찾은 태..
Javascript-DOM/02 - DOM 다루기 2024. 6. 2. 13:56
이전 Prev 1 Next 다음