Java Script/DOM8 DOM and Virtual DOM 다음은 리액트로 만들어진 사이트이다. re-render를 했을 때 왜 좋은 선택인가 이 사이트 Elements를 살펴보면 html 태그들로 구성되어 있는 레이아웃을 볼 수 있다. 이들을 DOM tree 라고 한다. Document Object Model Tree 이다. App 안에 3개의 children이 있다. 이 3 children 끼리는 sibiling 이다. card-list 안으로 들어가면 많은 children들이 들어있다. html으로 된 Real DOM tree 로 나타내면 다음과 같은 형태로 나타낼 수 있다. 여기서 내용을 추가하거나 변경을 하고자 할 때 real DOM에서 직접하는 것은 어렵다. 변경할 내용을 DOM에서 뽑아내 내용을 변경하거나 DOM에서 바꾸는 과정은 computatio.. 2022. 5. 31. JS] Manipulating HTML Element Attributes attributes란? 각 태그 이름(h1, input, a..) 안에 하늘색에 해당하는 부분이 attributes이다. 태그 안에 뭐 있나 보기 document.querySelector("a"); 태그 안에 있는 모든 attributes 검색하기 태그 안에 1개의 href가 있다 document.querySelector("a").attributes; href attribute에는 뭐 있나 보기 document.querySelector("a").getAttribute("href"); 구글 클릭했는데 네이버 나오게 하기 href attribute 내용 바꾸기 2021. 8. 22. JS]자바스크립트로 텍스트 조종하기 innerHTML vs textContent Text Manipulation and the Text Content Property html안에 있는 text를 변경하는 것은 innerHTML과 textContent가 있다. 둘의 차이점 innerHTML: 그 안에 있는 태그까지 같이 나온다. h1에 내용 추가 할 때도 태그까지 입력할 수 있다. textContent: 딱 텍스트만 빼온다 2021. 8. 22. JS] 클래스 추가, 삭제, 토글/Structure, Style, Behaviour Structure : HTML Style : CSS Behaviour : Javascript 클래스 추가 .add( ) 1. 버튼 element에 클래스 추가하기 button element에 클라스 리스트로 invisible이라는 클라스 추가한다. 2. 추가된 invisible 클래스에 효과넣기 클래스 삭제 .remove( ) 3. 클래스 삭제하기 클래스 토글 .toggle( ) 토글 계속 복붙하면 버튼 생겼다 없어졌다함 이 방법으로 하면 디버깅하기가 매우 쉬어진다. 기본으로 정해 놓은 스타일을 변경하고 싶으면 stylesheet로 가서 고치고 behaving을 변경하고 싶으면 자바스크립트로 가서 고치면 된다. 2021. 8. 22. JS] 자바스크립트에서 css 변경하기 모든 style 관련해서는 CSS 안에 있는게 좋지만, 만약 유저가 클릭했을 때 백그라운드 색을 변경하고 싶다면 이럴 때는 자바스크립트와 style property를 이용한다. 그럼, DOM을 이용해서 자바스크립트로 css style을 변경해보자. Style Properties of every DOM object 찾아보기 https://www.w3schools.com/jsref/dom_obj_style.asp 1) 콘솔에서 DOM으로 원하는 element를 선택한 후 .style.property 로 써준다. 2) value는 "string" 스타일로 써준다. "red" "10rem" li 안에 있는 a 태그의 색을 빨간색으로 바꿔보기 li 안에 있는 a 태그의 폰트 사이즈를 10rem으로 바꿔보기 css.. 2021. 8. 19. JS] 자바스크립트로 HTML element 선택하기 1. 자바스크립트 DOM 사용해서 HTML element 선택하기 getElement 보다는 querySelector를 더 많이 사용한다. .getElementsByTagName( ) 태그 이름으로 검색 1) 3번째에 있는 태그 검색하기 3번째 에 있는 Third의 글자를 바꿔보자. document.getElementsByTagName("li"); HTMLCollection(3) [li, li, li] document.getElementsByTagName("li")[2].style.color = "blue"; li가 여러 개 있기 때문에 몇 번째인지 적어줘야하고, 그 뒤에 원하는 효과를 적어놓는다. 2) element 갯수 검색 element가 몇 개 있나 검색하기 getElementsByClassNam.. 2021. 8. 18. JS] Properties, Methods Properties vs Methods 자동차인 경우 버튼의 경우 하나의 object에는 properties, methods 두가지 특성이 있다. dot notation(마침표 찍는 방식)을 통해서 properties, methods에 접근할 수 있다. click()처럼 method에는 뒤에 괄호를 해준다. Properties 설정 get property 뭔지 물어보고 답 얻기 car.color; //blue set property 설정해주기, 설정 바꿔주기 car.numberOfDoors = 0; method 설정 call method 모두 괄호를 붙여준다. car.drive( ); method vs function method는 object가 하는 function이다. 자주 바꿔서 많이 말한다. 하지.. 2021. 8. 18. JS] DOM(Document Object Model) Dominating the DOM to add functionality to HTML elements DOM 쓰는 이유 지금까지 우리는 html, css로 static한 웹사이트를 배웠다. static한 웹사이트는 화면에 보여주는 일만 하는 것을 말한다. html, css를 로드하고 저장해서 브라우저를 리프레쉬하면 웹사이트가 보인다. 여기서 우리가 인터렉티브한 웹사이트를 만들고자 한다면 유저가 버튼을 눌렀을 때 웹사이트 일부를 그 때 그 때 변경해야 할 것이다. 우리는 그에 맞는 컨텐츠와 웹사이트의 디자인을 바꿔서 반응을 해주어야 한다. 웹사이트가 인터넷 상에서 라이브로 반응해줘야하는데 우리는 유저가 요청할 때마다 html, css 코드를 업데이트하고 웹페이지를 다시 로드해야하는 일을 수작업으로 매 번 .. 2021. 8. 17. 이전 1 다음
