반응형 JavaScript6 [JavaScript] DOM 개념정리와 load 이벤트 DOM ? : DOM = Document Object Model 개념 정리에 앞서, 자바스크립트는 HTML 조작에 특화된 언어이다. 그런데 자바스크립트는 어떻게 HTML을 조작할 수 있는 걸까? 그 원리는 바로, HTML을 자바스크립트가 해석할 수 있는 문법으로 변환하면 되는 것이다! 브라우저는 HTML을 자바스크립트가 좋아하는 array 혹은 object 자료형에 담아준다 // 대충 이런 식으로... var document = { div1 : { style : {color : 'red'} innerHTML : '안녕하세요' } } 위 변수를 document object 즉, DOM이라고 한다. 👉 자바스크립트가 HTML에 대한 정보들(id,class,name,style,innerHTML 등)을 obje.. 2023. 8. 16. [Javascript] window객체와 document객체의 차이 window는 브라우저의 창이고 document는 브라우저 창의 HTML 문서 객체입입니다. 즉, window객체 안에 document객체가 존재합니다. 2023. 7. 16. [JavaScript] 숫자 3자리마다 콤마찍기(정규식) script로 3자리마다 콤마(,) 찍는 작업이 있어서 구글링하여 적용하였다. 구글링하여 얻은 정규식 표현법에는 .toString().replace(/\B(? 하지만 위 정규식에서의 ? 때문에 위처럼 넣게되면 함수 자체가 에러를 뱉어내므로, 스크립트를 호출하지 못하는 에러가 발생한다. (object Error / function undefined) (참고 url : caniuse.com/?search=lookbehind) .toString().replace(/\B(?=(\d{3})+(?!\d))/g, ","); 위와같이 정규식을 기술해야 익스, ios, safari 에서 정상적으로 함수를 호출할 수 있게 된다. 2023. 6. 1. [Javascript] classList 사용법, add(), remove(), toggle(), replace() classList classList는 element의 읽기전용 속성으로 css class의 현재 값을 반환한다. element의 CSS class 목록 가져오기 다음은 div element의 class 목록을 콘솔에 출력하는 코드. JavaScript classList 위 코드는 먼저 querySelector() 메소드를 통해 id가 content인 div element를 가져온다. 그 다음 element의 classList에 루프를 돌려 각각의 클래스명을 콘솔에 출력한다. let div = document.querySelector('#content'); for (let cssClass of div.classList) { console.log(cssClass); }; add() 지정한 클래스 값을 추가한.. 2023. 5. 31. 이전 1 2 다음 반응형