DOM 강의 요약정리
- contirm : 확인을 위한 대화상자
ex; 정말로 삭제하시겠습니까? yes/no
- <input on XXX = " "/> : 스크립트 코드 작성 영역
ex; <input onclick = " "/>
- <div onclick="alert('클릭함');"> 여기를 클릭해주세요<div>
- onclick 이벤트를 함수호출로 할수도 있다
<input type="button" value="click" onclick="printSum();">
window.addEventListener("load",function(){})
//load 이벤트가 발생하면 function()을 실행시켜라
- dom은 플랫폼 api다
- id를 마구잡이로 넣으면 안됨!! 메인이 되는 태그에만(헤더,바디,푸터)넣고
세세한거는 class로 주기
< selectors API >
- id = css selector 라서 앞에 # 붙여야 한다(마찬가지로 class css selector도 . 붙여야함)
- 클래스명을 부여하지 않고 어떠한 속성을 특정하는 방법
section.querySelector("input[type=text]");
//이렇게 하면 input 태그의 type이 text인 애만 선택하게됨
<select id="s2">
<h1>2. DOM 속성 다루기 : 계산기</h1>
<div>
<input type="text" class="x-input" value="0">
<input type="text" class="y-input" value="0">
<input type="button" class="button" value="덧셈">
<span>계산결과 : 0</span>
</div>
</select>
//-------------------------자스 쿼리셀렉터 부분------------------------------
window.addEventListener("load",function(){
var section = this.document.querySelector("#s2");
var xInput = this.document.querySelector(".x-input");
var yInput = this.document.querySelector(".y-input");
var button = this.document.querySelector(".y-input");
button.onclick = function(){
var x = parseInt(xInput.value);
var y = parseInt(yInput.value);
console.log(x+y);
};
});
- 클릭시 글자가 바뀌게(html 내용이 바뀌게 하는 방법)
var resultSpan = section.querySelector("div>span");
//div태그 안에 있는 span 선택(계산결과:0 이부분 바꾸기)
//온클릭이벤트 함수 안에다가 적을 내용
resultSpan.innerHtml = "안녕하세요";
//innerHtml : html 안에 내용이 바뀐다
- 텍스트로 인식하게 하는방법
resultSpan.innerText = "안<style='color=red'> 녕하세요";
//컬러를 html로 주면 컬러가 바뀌어서 나오는데 텍스트로주면 안<style='color=red'> 녕하세요
//저 문자 그대로 그냥 출력된다
- textContent는 요소의 모든 텍스트 내용을 가져오거나 설정한다.
innerText와 유사하지만, 모든 요소의 텍스트를 가져오며, HTML 태그도 포함하여 반환한다
textContent는 <script>와 <style> 요소를 포함한 모든 요소의 콘텐츠를 가져옵니다.
반면 innerText는 "사람이 읽을 수 있는" 요소만 처리합니다.
- 이벤트객체 : 이벤트에서 발생한 부가적인 정보를 제공
- 이벤트가 발생한 객체가 target으로 이동
- 노티피케이션: 야 너가 이벤트 발생했어? 물어보면서 타고타고 내려가기
- 이벤트 버블링: 야 너가 이벤트 발생시켰다며!! 말하면서 타고타고 올라가기
* 만약 가장 밑단에 있는 태그를 발견하고,이벤트를 누가 발생시킨지 알아도 중간에 멈추는게 아니고 계속 타고타고 올라감
-   : 띄어쓰기(스페이스)하고싶을때 쓰는 탈출문자열 같은거
꺾음새<>는 lt 라고 씀
- 이벤트는 가장 상위태그에 달아주는것이 바람직하다
- 객체 = 노드(마디)
- 태그가 객체화된것 : 엘리먼트 노드 객체
- nodename과 nodevalue는 node 타입이 뭐냐에 따라서 name과 value가 다르게 나올수 있다
- a태그 / input태그의 type="submit" / form태그 : 서버에게 정보를 전달해줌
- 각 시멘틱 태그들이 고유하게 원래 갖고 있는 기능들 = 기본행위
- 이 기본행위를 막아줘야 기능,동작끼리 서로 충돌이 나지 않는다
- 기본행위를 막아주는 코드
e.preventDefault();
- 이벤트 버블링은 HTML 요소들이 중첩되어 있는 구조에서 이벤트가 발생했을 때,
해당 이벤트가 해당 요소에만 한정되지 않고 상위 요소로 전달되는 현상을 말합니다.
이벤트 버블링 막는법 : 실행되어야 할 애만 실행되게 하고 그 위로는 이벤트가 전파되지 않게 막음
- css 속성의 대부분은 문자열이다
styleInput.oninput = function(e){
console.log(styleInput.value);
};
widthInput.oninput = function(e){
console.log(widthInput.value);
};
//value의 값이 바뀌었을때 발생하는 이벤트가 oninput
styleInput.oninput = function(e){
item.style.borderStyle = styleInput.value;
};
widthInput.oninput = function(e){
item.style.borderStyle = styleInput.value;
};
//border-style 값을 대입하는 방법
styleInput.oninput = function(e){
outputDiv.innerText = item.style.cssText;
//cssText:css스타일 속성을 문자열로 뽑아서 대입할때 사용
}
//css 속성까지 텍스트로나옴
//ex; background-color:red 이런식으로..
- clac : 너비높이를 연산으로 계산해주는..css 속성
- 자스 이벤트리스너 기본문법
window.addEventListener("load",function(){
var section = document.querySelector("#s6");
var box = section.querySelector(".box");
});
box.onclick = function(){
console.log("test");
};
box.onclick = function(e){
if(e.target.nodeName != "H2")
return;
//h2태그가 아니면 클릭안되게하는거
console.log("test");
}
- classList는 class라는 속성 안에 들어가있는 클래스들을 스페이스로 구분해서 하나하나로 구분된 목록을 관리
- contains("active") : active라는 이름이 있으면 true를,없으면 false를 반환
e.target.classList.contains("active")
- 자스에 조건식 넣는법
var isHeader = e.target.nodeName == "H2"
|| e.target.classList.contains("accordion-header");
if(!isHeader)
return;
- 클래스명에 띄어쓰기 사용하면 동시에 같이 사용하겠다는 뜻
- 데이터베이스에서 가져와서 스타일을 줄때는 html태그 한줄에서 style 준다(?)
- 조건식을 쓸때 부정의 부정은 쓰지 않는것이 좋다
var targetStyle = window.getComputedStyle(e.target);
- 저거 쓰면 괄호안에 들어간 놈의 스타일을 갖고올수 있음
var left = targetStyle.getPropertyValue("left")
//css의 속성값 얻을수있음 (left태그의 속성값 얻기)
- transitionend : 트렌지션이 끝난 시점 설정하는 이벤트 속성. 여기다가 함수를 연결하면 된다
selectedItem.ontransitionend = function(){ }
//이렇게 쓰거나
selectedItem.addEventListener("transitionend",function())
//이렇게 쓸수도 있다
selectedItem.ontransitionend = null;
//실행되지 말라고 할때는 이렇게 쓰면 됨
//도형이 어떤 지점에 도착했을시점에 트렌지션이 일어나게 하는
selectedItem.ontransitionend = function(){
selectedItem.classList.add("finished");
//"종료"라는 이름의 클래스 이름을 부여해줌
selectedItem.ontransitionend = null;
//그리고 도착과 동시에 트렌지션이 종료됨
);
}
//근데, 확실하게 오류가 없이 하려면 함수안에 원래 붙여져있던 클래스 이름을 지우는걸 추가해주고
//"종료"이름을 붙여주면 된다
selectedItem.classList.remove("selected");
selectedItem.classList.add("finished");
selectedItem.style.transform = "rotate(360deg)";
//회전 애니메이션 자스 넣는법