Programming10 [JS] DOM 요소에 접근하는 방법 / DOM 접근 함수(메서드) 소개 - 토끼는 개발자 DOM(Document Object Model)에 접근하는 방법 DOM은 웹 문서의 모든 요소를 문서화해놓고, 자바스크립트를 사용할 때 문서화 한 각 요소별로 접근할 수 있도록 도와주는데 이 DOM 요소에 접근하는 방법(DOM 메서드/함수)을 소개합니다. 첫 번째 방법. 태그로 접근하는 함수 사용 getElementsByTagName() 기본형태 지정한 태그를 가진 모든 요소에 접근한다. document.getElementsByTagName("태그명"); 예시 문서에서 태그로 표현된 모든 요소에 접근해서 글씨 색을 빨간색으로 하겠다는 의미 var a = document.getElementsByTagName("h2").style.color="red"; 두 번째 방법. class로 접근하는 함수 사용 get.. 2021. 9. 5. [JS] DOM에 대해서 - 토끼는 개발자 1. DOM이란? Document Object Model을 줄여 DOM(돔) 이라고 부르며, 이 용어는 문서 객체 모델이라고도 합니다. DOM은 웹 문서의 모든 요소를 문서화해놓고, 자바스크립트를 사용할 때 문서화 한 각 요소별로 접근할 수 있도록 도와주는 일종의 번역기(웹 화면을 글자로 나타내주는)라고 이해해주시면 됩니다. 2. 예시 화면을 통한 설명 아래 이미지 내에는 사진, 글(제목, 내용) 등 여러 요소들이 있습니다. 상단에는 이미지, 하단에는 내용 순으로 위치하게 됩니다. 그렇다면 아래 웹 브라우저의 화면을 DOM 형식으로 표현하게 된다면 어떻게 나타낼 수 있을까요? 3번 내용을 통해 확인합니다. [JS] 1. 자바스크립트(JavaScript)란? - 토끼는 개발자 JavaScript(JS) 란.. 2021. 9. 4. [JS] 크롬 브라우저에서 개발자 도구 콘솔에 자바스크립트 사용하기 - 토끼는 개발자 크롬 브라우저에서도 간단한 자바스크립트를 작성할 수 있는데 방법은 브라우저를 열어준 뒤 F12를 누르기만 하면 된다. F12를 누르면 개발자 도구가 열리는데 이 콘솔 창에서 간단한 자바스크립트 함수를 사용해 어떤 결과가 나타나는지 확인해보려고 한다. 1. 크롬 브라우저 열기 2. 키보드 F12 누르기 3. 자바스크립트 함수 써보기 1) prompt() : 사용자가 값을 입력할 수 있는 창을 띄우는 함수 prompt("값을 입력할 수 있는 창 띄우기"); prompt("값을 입력할 수 있는 창 띄우기", "미리 값 입력해놓을 때 사용"); 2) alert() : 알림 표시할 때 사용하는 함수 alert("알림 표시하는 창 띄울 때 사용하는 함수"); 3) document.write() : 괄호 안 내용을 .. 2021. 8. 19. [JS] 자바스크립트 파일 외부에서 연결하기 - 토끼는 개발자 이전 글에서 글자를 클릭하면 글자 색이 바뀌는 HTML 문서를 작성했다. HTML 문서에서 자바스크립트를 같이 작성했다면 이번에는 HTML 문서와 JavaScript 문서를 따로 분리 후 HTML 문서에 JavaScript 문서를 불러오는 방법을 알아보려고 한다. 지금이야 소스 양이 적어서 분리하는 것에 의의를 두는 것이 이해하기 어려울 수 있지만, 대규모 프로젝트를 진행하거나 역할을 나눠 소스를 작성하게 되면 기능별로 구분해야 할 일이 생기기 마련이고 그 때 외부에서 자바스크립트 파일을 연결하여 사용하는 방법을 숙지하고 사용한다면 가독성이 좋은 소스를 작성할 수 있다. 이전 글 참고 : [JS] 글자 클릭하면 글자색이 바뀌는 자바 스크립트 / 클릭 이벤트 - 토끼는 개발자 1. onclick 이벤트 자.. 2021. 8. 17. 이전 1 2 3 다음 반응형
