JavaScript13 DOM Node 조작하기 document.querySelector("#nav_tutorials"); document.querySelector(".w3-table-all"); //해당되는게 여러개면 잘 안나옴 a = document.querySelector(".w3-table-all"); a.textConent; //가지고 있는 text 노드들 나옴 a.tagName; //태그 속성이 나옴(테이블이라던가) var w3tableHTML = a.innerHTML; //html 가져오기 a.firstElementChild; //첫번째 자식 a.firstChild; //첫번째 자식인건 같은데 공백이나 텍스트도 포함 a.remove(); //삭제 //DOM 조작 API removeChild() appendChild() var div = d.. 2024. 2. 28. JavaScript 문법 메모3 var obj = { name : "crong", age : 20} console.log(obj["name"]); console.log(obj.age); 결과: crong 20 const myFriend = { key : "value", key2 : "value" }; console.log(myFriend); // 객체 속성 추가 myFriend["name"] = "crong"; console.log(myFriend["name"]); 결과: crong myFriend.age = 34; console.log(myFriend.age); 결과: 34 // 객체 속성 삭제 delete myFriend.key; delete myFriend["key2"]; console.log(myFriend); var obj =.. 2024. 2. 28. Ajax 통신 Ajax (XMLHTTPRequest 통신) 웹에서 데이터를 갱신할때 브라우저 새로고침 없이 서버로부터 데이터를 받는 방법 function ajax(data) { var oReq = new XMLHttpRequest(); oReq.addEventListener("load", function() { console.log(this.responseText); }); oReq.open("GET", "http://www.example.org/getData?data=data");//parameter를 붙여서 보낼수있음. oReq.send(); } XMLHTTPRequest 객체를 생성해서, open 메서드로 요청을 준비하고, send 메서드로 서버로 보냄 요청 처리가 완료되면(서버로 부터 응답이 오면) load 이.. 2024. 2. 22. Browser Event 이벤트 등록 var el = document.getElementById("outside"); el.addEventListener("click", function(e){ console.log(e); console.log(e.target); console.log(e.target.className); console.log(e.target.nodeName); }, false); addEventListenerd의 두번째 인자는 함수다. 이 함수는 나중에 이벤트가 발생할때 실행되는 함수로 이벤트 핸들러 또는 이벤트 리스너라고 한다. Event Handler (Event Listener) 콜백함수는 이벤트가 발생할 때 실행 됨. 2024. 2. 22. DOM 정의 및 활용 브라우저에서는 HTML코드를 DOM(Document Object Model)이라는 객체 형태의 모델로 저장한다 따라서 DOM은 문서 객체 모델이다 그렇게 저장된 정보는 DOM Tree 라고 함. 따라서 HTML element는 Tree형태로 저장된다. getElementById() ID정보를 통해 찾을 수 있다. document.getElementById("id"); document.getElementById("id").id; document.getElementById("id").className; document.getElementById("id").style.display = "none"; document.getElementById("id").innerText = "있어"; document.query.. 2024. 2. 22. JavaScript 문법 메모2 function a() { console.log(arguments); } a(1,2,3); 함수는 선언한것 보다 더 많은 인자를 받을 수 있다. 결과: { '0': 1, '1': 2, '2': 3} function a() { for(var i=0; i "Kim " + name; arrow 함수로도 표현 가능 2024. 2. 22. 이전 1 2 3 다음
