네이처리 노트

공부하면서 정리한 내용입니다 참고한 내용은 맨 아래의 링크를 확인해주세요 script를 불러오는 것을 서버언어로 하면 한줄이면 되지만 자바스크립트는 한줄을 허용하지 않는다. 자바스크립트방식으로 적용해 보았다. case 1 // javascript fetch("가져올 파일 링크") .then(response=>{ return response.text() }) .then(data => { document.head.innerHTML= data; //head에 추가한다. }); 기존의 script 코드는 보이지않는데, 작동은 한다. (괜찮은거야?) Reference 1) 언어별 인클루드방식 The Simplest Ways to Handle HTML Includes | CSS-Tricks It's extremel..

공부하면서 정리한 내용입니다 참고한 내용은 맨 아래의 링크를 확인해주세요 HTML 불러오는 방법 1. XMLHttpRequest 으로 body내에 넣을 조각불러오기 2. 광활한 document에서 html을 불러오기 할 경우에는 getElementById로 직접 지정해줘야 적용된다. let xhr = new XMLHttpRequest(); xhr.open("GET", "file.html", true); //옵션 :: 전송방식, 경로, 비동기사용여부 xhr.send(); xhr.onload = function(){ console.log(xhr.responseText); } document.body.innerHTML = xhr.responseText; // body에 넣기 // document.getElem..

공부하면서 정리한 내용입니다 참고한 내용은 맨 아래의 링크를 확인해주세요 🌔 Ajax ( Asynchronous JavaScript And XML ) XMLHttpRequest let URL = "API URL"; let xhr = new XMLHttpRequest(); xhr.open("GET", URL, true); //옵션 :: 전송방식, 경로, 비동기사용여부 xhr.send(); xhr.onload = function(){ if (httpRequest.readyState === XMLHttpRequest.DONE){ // 이상 없음, 응답 받았음 console.log(xhr.responseText); } else { // 아직 준비되지 않음 } } readyState 0 (uninitialized..

공부하면서 정리한 내용입니다 참고한 내용은 맨 아래의 링크를 확인해주세요 Reference 1) 이벤트 실전예제 2) 이벤트 전파를 중단 하는 방법 click이벤트 안에 다른 click 이벤트 ( 같은 DOM에 걸린 이벤트들 ) Element.addEventListener("click", (e)=>{ e.target.parentNode.classList.add("open"); let list = e.target.nextElementSibling.children; Array.from(list).forEach((li)=>{ li.addEventListener("click", (eList)=>{ // 상위 이벤트가 동시에 진행되면서 eList + e + eList 로 동작 // 다음의 코드로 해결하면된다. e..

공부하면서 정리한 내용입니다 참고한 내용은 맨 아래의 링크를 확인해주세요 target.addEventListener(type_이벤트유형 , listener_이벤트구현하는객체 [, options]); target.addEventListener("click" , 함수명); target.addEventListener("click" , function(){ 함수명(파라미터) }); //익명함수 사용한다!! ▲파라미터 전달방법 ▶이벤트 전파 중단하기, 중복발현 현상, 새로고침되는 현상 디버그하기 Reference 1) 클릭이벤트 옵션 Javascript : addEventListener 의 3번째 options 인자 addEventListener() 는 웹 요소에 이벤트를 거는것으로 많이 사용된다. 대부분 이런 ..

공부하면서 정리한 내용입니다 참고한 내용은 맨 아래의 링크를 확인해주세요 element.style.display = "none"; 🌒 Class Name으로 접근하기 Element.classList.contains("클래스명"); // 클래스를 포함하는지, Return Boolean Element.classList.remove("클래스명"); Element.classList.add("클래스명"); Element.classList.toggle("클래스명"); 🌒 focus element.focus(); // Focus 부여하기 if (element === document.activeElement) //Focus 요소찾기 Reference 1) 🔗 [Javascript] class 추가/변경/삭제/읽기 (c..

공부하면서 정리한 내용입니다 참고한 내용은 맨 아래의 링크를 확인해주세요 속성형태 (setAttribute, getAttribute) Array.from([전체배열값]).forEach((각배열값)=>{ 각배열값.addEventListener("click", ()=>{ 각배열값.setAttribute("속성", "값"); // set 각배열값.getAttribute("속성"); // get } } // Style 적용 element.setAttribute("style", "키:값; 키:값"); element.getAttribute("style"); // checked 확인 element.setAttribute("checked", boolean ); element.getAttribute("checked");..

공부하면서 정리한 내용입니다 참고한 내용은 맨 아래의 링크를 확인해주세요 추가 let newDIV = document.createElement("div"); newDIV.innerHTML = "새로 생성된 DIV입니다."; newDIV.setAttribute("id","myDiv"); newDIV.style.backgroundColor="yellow"; // 결과 새로 생성된 DIV입니다. let newDIV = document.createElement("div"); newDIV.innerHTML = ' 새로 생성된 DIV입니다. '; // 결과 새로 생성된 DIV입니다. 추가할 위치를 지정할 수 있음 El.insertAdjacentHTML("option", "추가할내용"); //El.innerHTML ..

공부하면서 정리한 내용입니다 참고한 내용은 맨 아래의 링크를 확인해주세요 🌘 접근 노드는 text까지 구분한다. element.parentNode // 부모 노드 element.childNodes // 자식 노드 리스트 element.firstChild // 첫 번째 자식 노드 element.lastChild // 마지막 자식 노드 element.nextSibling // 다음 형제 노드 element.previousSibling // 이전 형제 노드 element.children[번호] // 자식 요소 element.firstElementChild // 첫번째 자식 요소 element.previousElementSibling // 이전 요소 element.nextElementSibling // 다음 요..

공부하면서 정리한 내용입니다 참고한 내용은 맨 아래의 링크를 확인해주세요 0 1 2 3 4 // javascript console.log(document.querySelector("div")); console.log(document.querySelector("div").firstChild); console.log(document.querySelector("div").firstElementChild);