17일차 - JS

은채의 성장통·2025년 6월 20일

JavaScript

KCC정보통신

목록 보기

23/30

노션정리 링크

Selector API와 DOM조작

JS를 사용하는 가장 큰 이유

input요소를 찾고 button요소를 찾고 출력요소를 찾아서 한다.

1. DOM이란?

웹브라우저가 HTMl문서를 이해하고 다루는 방식
내부적으로 트리구조의 객체로 변환된다.

HTML태그는 요소라고 불린다

예시

doㅇ	최상위 객체 HTML전체 대표
HTML	모든 문서의 루트요소
HEAD	메타 정보, title, script등 포함
body	실제 사용자에게 보여지는 콘텐츠를 담는다
p h1	문단, 제목과 같은 콘텐츠 요소
table, tr, td	표 구조 구성요소

DOM트리 구조예시

<body>
  <h1>안녕!</h1>
  <p>이건 단락입니다.</p>
</body>

document
└── html
    ├── head
    └── body
        ├── h1
        └── p

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<!-- 실행의 순서가 중요하다 -->
<body>
    이름: <input type="text" name="username">
    <input type="button" value="입력"><br>
    <p>당신의 이름은 <span class="output">_______</span>입니다</p>
    <script>
        var input = document.querySelector("input[name=username]");
        var btn = document.querySelector("input[type=button]");
        var ouput = document.querySelector(".output");

        btn.onclick = function(event){
            let name = input.value;
            input.value="";
            ouput.innerHTML ="<B>"+name +"</B>";
        }
    </script>

</body>
</html>

input 변수는 요소를 찾아서 저장해. 이걸로 사용자가 입력한 값을 가져올 수 있다
btn 변수는 버튼() 요소를 선택해서 저장하고, 이 버튼에 클릭 이벤트를 걸어준다
btn.onclick = function()는 버튼을 클릭했을 때 실행될 이벤트 핸들러 함수를 정의해. 이 함수가 실행되면:
- input.value를 읽어서 name 변수에 저장.
- input.value = ""로 입력창을 초기화
- output.innerHTML = "**" + name + "**"를 통해 결과를 출력

Selector API를 이용해서 DOM트리로부터 HTML DOM객체를 가져오기 위해서는 자바 스크립트 코드의 실행이 HTML문서가 파싱된 다음 실행되어야한다.
HTML문서가 파싱되기 전에 자바 스크립트 코드가 실행되면 Selector API로 HTML DOM객체를 DOM tree에서 찾지 못한다
- 해결방법
  - 문서 본문의 맨아래
    - 권하지 않는다
  - 요소를 이용해 자바 스크립트 코드를 요소에 포함시킨다
    - 이떄 onload이벤트를 이용해서 페이지가 로드가 된 다음에 자바 스크립트 코드에 실행되도록한다
  - 자바스크립트 코드를 외부파일로 작성했을때 defer속성을 부여한다
    -

JS 프로그래밍

특징

웹문서(HTML)에 끼워서 사용하는 스크립트 언어
웹문서를 실행할때 코드가 해석되기 떄문에 웹 브라우저에 자바스크립트 해석기가 있다
인터프리터 언어의 형태를 띄고 있다
클래스를 정의할 수 없고 → 클래스의 상속의 이점을 사용할 수 없다
- 하지만 함수를 정의하고 함수로 객체를 생성할 수 있다.

기능

프로그램적인 요소를 자바스크립트를 이용하면 해결할 수 있다
이벤트에 대한 반응을 할 수 있도록 웹문서를 구성할 수 있다.
HTML 요소의 내용을 읽거나 바꿀 수 있다

장점

작업속도가 빠름
- HTML파일 내에서 작성 할 수 있으므로 개발 속도가 빠르다
- 플랫폼 독립적이다.

단점

소스코드가 노출된다. 컴파일 하지 않는 언어이므로 누구든 복사하여 사용이 가능하다
- 자바스크립트 패킹을 통해 소스코드 노출을 어느정도 커버할 수 있다.

기본구조

type속성값으로 text/javascript를 입력한다(HTML5에서는 생략가능)

실행위치

태그 영역에 배치되는경우

클라이언트 작업전 자바스크립트에서 지정한 이벤트가 웹브라우저에 전달된다.
태그영역에서도 공통적으로 반응한다.

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8" />
  <title>javascript-head.html</title>
  <script type="text/javascript">
    window.onload = function() {
      alert("이 메시지 상자는 onload 이벤트가 발생할 때 보입니다.");
    };
    document.write("<h2>자바스크립트 세계에 오신 걸 환영합니다.</h2>");
  </script>
</head>
<body>
  <hr>
  <h1>자바스크립트가 head 요소 영역에 위치했을 때</h1>
  <hr>
</body>
</html>

자바스크립트가 태그 영역에 배치되는 경우

태그 영역에 “document.write()”함수를 이용하여 정보를 표현한다
HTML요소가 파싱된 다음에 실행되도록한다.

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8" />
  <title>javascript-body.html</title>
</head>
<body>
  <hr>
  <h2>자바스크립트가 body 요소 영역 내에 위치했을 때</h2>
  <hr>
  <script type="text/javascript">
    document.write("자바스크립트의 문장");
  </script>
  <p>xhtml의 문장</p>
</body>
</html>

자바스크립트를 외부파일로 사용되는 경우
- 태그 부분이든 태그 부분이든 기능을 구현할 곳에 삽입한다.
- 확장자는 js
- script element의 src 속성값이 호출할 자바스크립의 파일명
- defer속성을 추가하면 HTML문서가 파싱된 다음 자바스크립트 코드가 실행된다.

기본문법

구문
- 문장끝에 세미클론을 입력 (생략해도 무관하나 오류방지를 위해서 권장)
함수
- 함수를 만들떄는 function이라는 키워드 사용
변수 선언
- var 키워드 이용
- var없이 변수 사용가능하지만 그러면 전역변수가 된다.(최상위 객체의 멤버)
- 변수 스코프(scope)는 코드 블록( { } )이 아니라 함수 단위이다
데이터 타입
- 숫자(number), 문자열(String), 볼린(boolean) , undefined, NULL
- 객체
  - { }로 생성
  - 생성자 함수 이용
- 배열
  - [ ]
- 함수
  - 함수를 이용해서 객체를 생성
연산자 → (if 10==’10’) 이것은 참이 된다 타입까지 비교하려면 “===”이것을 써야함

제어문

if문

if(조건식) {} else{}

// 화면에 h2 태그로 "안녕하세여!" 출력
document.write("<h2>안녕하세여!</h2>");

// 사용자에게 숫자를 입력받는 프롬프트 창 띄우기
var num = window.prompt("숫자입력하시오");

// 입력값이 있을 경우
if(num){
    // 입력한 값을 화면에 출력
    document.write(num);
    // 입력한 값을 콘솔에도 출력
    console.log(num);
} else {
    // 입력이 없을 경우 메시지 출력
    document.write("아무것도 입력안됨");
}

조건연선자
- 조건식 ? 식1 : 식2
switch()문
- switch(true){case 조건: //실행문 default//실행문
- 비교결과가 0, null “빈문자열, false, NAN으로 판단되면 false 나머지는 false

for

in을 사용해서 접근한다

var myObj = { p1: 'a', p2: 'b' }; // 객체 정의
var result = '';

for (var prop in myObj) {
  result += '속성명: ' + prop + ', 값: ' + myObj[prop] + '\n';
}

console.log(result);
속성명: p1, 값: a
속성명: p2, 값: b

var ar = ['a', 'b']; // 배열 정의
var result = '';

for (var i in ar) {
  result += '인덱스: ' + i + ', 값: ' + ar[i] + '\n';
}

console.log(result);

인덱스: 0, 값: a
인덱스: 1, 값: b

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script>
        window.onload = function() {
    document.write("<table border='1'><tr>");
    for (var i = 0; i < 10; i++) {
        document.write("<td>Hello " + i + "</td>");
    }
    document.write("</tr></table><br>");

    var myList = ['hello', 'world', 'nice', 'spring'];
    for (var i = 0; i < myList.length; i++) {
        document.write(myList[i] + " ");
    }

    document.write("<p>");
    for (var idx in myList) {
        document.write(myList[idx] + " ");
    }
    document.write("</p>");

    var myobject = { key1: "hello", key2: 200, key3: false };
    for (var key in myobject) {
        document.write(myobject[key] + " ");
    }
}
    </script>
</head>
<body>
    
</body>
</html>

window.onload가 있기에 HTML구조가 전부 로드 되고나서 JS가 실행된다.
그렇기에 document.write()같은 명령이 정상적으로 <body>안에서 출력된다.
이게 없으면 아직 읽지도 않은 상태에서 실행되기에 <head> 안에서 <body>가 나오기전에 실행됙에 제대로 표시 되지 않거나 사라질수 있음

함수

예약어 ‘function’으로 시작
반환형(return type), 매개변수(parameter)에 대한 자료형 입력하지 않는다.
Lexical특성
- 함수밖에서 전역변수를 함수안에서 var로 선언하고 사용할떄 초기화안하면 undifined
- 코드 그대로의 환경을 기준으로 정의한 변수 스코프에서 변수의 검색이 일어난다.

자기 참조 호출 패턴

함수 정의와 함께 실행하도록한다.

필요하면 인자를 포함시킬 수 있다.

(function() {
	console.log("함수 정의와 함께 실행된다.");
})();

바로 실행할거니깐 이름도 필요없이 그냥 호출하자마자 실행된다.

함수와 변수 스코프

function Person() {
	var name;
	var age;
}
var person1 = new Person();
person1.name = "홍길동";
person1.age = 30;
console.log(person1.name + " " + person1.age);
Person.prototype.city = "서울";//모든 인스턴스가 상속 받는다.
console.log(person1.city);
person1.city = "뉴욕";//인스턴스에 city라는 변수 추가된다.
//프로토타입의 변수 값이 수정되지 않는다.
//프로토타입 변수의 값을 수정하려면 반드시 프로토타입객체를
//통해서 수정해야 한다.
console.log(Person.prototype.city);//서울 출력됨. 뉴욕이 출력되지 않는다.
//프로토타입 변수의 비 대칭성이라 부른다.
Person.job = "프로그래머";
console.log(Person.job);//공개변수 영역

함수의 arguments

함수 인자로 전달되는 데이터를 가진 객체, Object타입
arguments.callee속성 → 익명함수에서 자신을 참조한다.

arguments.length → 전달되는 인자의 개수

var add = function(){
	let sum =0;
	console.log(arguments.length);
	for(let idx in arguments){
		sum = sum + arguments[idx];
	}
	return sum;
}

console.log(add(10,20,30,40));
console.log(add(10,20,30));

클로저

내부 함수를 반환값으로 사용하는 특수한 함수

function outer(){
	return function(){    //클로저를 포함하면 멤버를 가질수 없다.
		return ++x;
	}
}
var f = outer();   //f와 g는 독립된 변수 공간을 가진 인스턴스를 반환
var g= outer();  

f();    //1
f();    //2
g();     //1
g();       //2

이벤트란?

웹 페이지에서 사용자 행위(클릭, 입력 등)에 따라 발생하는 신호임.

예: 버튼 누름, 마우스 올림, 키보드 입력 등.

이벤트 핸들러란?

이벤트 발생 시 실행될 자바스크립트 함수임.

이벤트를 감지하고 처리하는 코드를 의미함.

이벤트 핸들러 등록 방식

HTML 태그에서 직접 등록

<button onclick="sayHi()">인사</button>
<script>
function sayHi() {
  alert("안녕하세요");
}
</script>

자바스크립트에서 프로퍼티로 등록

let btn = document.getElementById("btn");
btn.onclick = function() {
  console.log("클릭됨");
};

addEventListener 사용 (추천)

let btn = document.getElementById("btn");
btn.addEventListener("click", function(e) {
  console.log("이벤트 종류:", e.type);
});

이벤트 객체 (`event`)

이벤트 발생 시 자동 전달되는 객체임.

속성으로 이벤트 종류, 발생 위치, 대상 등 확인 가능.

btn.addEventListener("click", function(event) {
  console.log(event.target); // 클릭한 요소 출력
});

이벤트 전파 (버블링과 캡처링)

버블링: 안쪽 요소에서 바깥쪽으로 이벤트 전파됨 (기본)
캡처링: 바깥 요소에서 안쪽으로 먼저 이벤트 전달됨

element.addEventListener("click", handler, true);  // 캡처링
element.addEventListener("click", handler, false); // 버블링

이벤트 제어

기본 동작 막기

link.addEventListener("click", function(e) {
  e.preventDefault();
});

전파 차단하기

child.addEventListener("click", function(e) {
  e.stopPropagation();
});

참고: removeEventListener

이벤트 제거 가능. 같은 핸들러 함수를 별도로 선언해둬야 함.

function sayHi() {
  alert("hello");
}

btn.addEventListener("click", sayHi);
btn.removeEventListener("click", sayHi);

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script>
        // HTML 문서가 완전히 로드된 후 실행되는 함수
        window.onload = function() {

            // 모든 <div> 요소를 가져옴 (NodeList 형태의 유사 배열)
            // querySelectorAll("div")는 문서 내 모든 div 태그를 선택함
            var element = document.querySelectorAll("div");

            // 가져온 div 요소들 각각에 대해 반복 실행
            for (var i = 0; i < element.length; i++) {

                // 각 div 요소에 클릭 이벤트 리스너를 등록
                // 클릭 시 해당 요소의 id 값을 콘솔에 출력하고,
                // 이벤트 전파를 막음 (stopPropagation)
                element[i].addEventListener("click", function(event) {
                    // this는 클릭된 div 요소 자신
                    // getAttribute("id")는 요소의 id 속성 값을 가져옴
                    console.log(this.getAttribute("id"));

                    // stopPropagation()은 이벤트가 부모로 전파되는 것을 막음
                    event.stopPropagation();
                }, false); // false는 '버블링' 단계에서 이벤트를 처리함
            };
        }
    </script>
</head>

<body>
    <!-- 중첩된 div 구조. 각 div에는 고유한 id가 있음 -->
    <div id="a">AAAA
        <div id="b">BBBB
            <div id="c">CCCC
            </div>
        </div>
    </div>
</body>
</html>

Objects

자바스크립트에서 객체는 모든 것(Everything)을 의미한다.
– 문자열(String), 숫자(Number), 배열(Array), 함수(Function) 등

윈도우 객체

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <h1>윈도우 객체 예지입니다.</h1>

    <!-- 새 창 열기 버튼 -->
    <input type="button" id="open" value="http://javaspeacoilist.co.kr"><br>

    <!-- 브라우저 뒤로 가기 버튼 -->
    <input type="button" id="back" value="이전페이지"><br>

    <!-- 현재 위치 변경 버튼 -->
    <input type="button" id="location" value="http://javaspeciallist.co.kr"> <br>

    <!-- 브라우저 정보 버튼 (미완성 상태, script에서는 안 다뤄짐) -->
    <input type="button" id="navigator" value="브라우저 정보"><br>

    <!-- 화면 정보 출력 버튼 -->
    <input type="button" id="screen" value="화면 정보"><br>

    <!-- 결과 출력용 div -->
    <div id="result"></div>

    <script>
        // [1] open 버튼 클릭 시 새 창 팝업 열기
        document.querySelector('#open').onclick = function(event){
            // this.value는 버튼의 value 속성에 있는 URL
            window.open(this.value, "팝업창", "width=500, height=500, menubar=no, status=no, toolbar=no");
        };

        // [2] back 버튼 클릭 시 브라우저 히스토리에서 한 단계 뒤로 가기
        document.querySelector("#back").onclick = function(event){
            history.back(); // -1 생략해도 동작 동일
        };

        // [3] location 버튼 클릭 시 현재 페이지를 해당 주소로 이동
        document.querySelector("#location").onclick = function(event){
            location.href = this.value; // 버튼의 value 속성값으로 페이지 이동
        };

        // [4] screen 버튼 클릭 시 화면 해상도 정보 출력
        document.querySelector("#screen").onclick = function(event){
            // 화면 전체 너비/높이
            var screenInfo = screen.width + " x " + screen.height + " : ";
            // 브라우저가 실제 사용할 수 있는 너비/높이
            screenInfo += screen.availWidth + " x " + screen.availHeight;
            // 화면 정보를 result 영역에 표시
            document.querySelector("#result").textContent = screenInfo;
        };
    </script>
</body>
</html>

DOM 요소 찾기

함수 이름	설명	예시 코드	예시 요소
`getElementById()`	특정 id 속성값과 일치하는 단일 요소 반환	`document.getElementById("foo")`	`<div id="foo">`
`getElementsByClassName()`	특정 class 속성값과 일치하는 모든 요소(NodeList) 반환	`document.getElementsByClassName("email")`	`<div class="email">`
`querySelector()`	CSS 선택자 규칙에 따라 첫 번째로 일치하는 요소 반환	`document.querySelector("input.error")`	`<input class="error">`
`querySelectorAll()`	CSS 선택자 규칙에 따라 모든 일치 요소(NodeList) 반환	`document.querySelectorAll("#results td")`	`<div id="results"><td>…`
`getElementsByName()`	특정 name 속성값과 일치하는 모든 요소(NodeList) 반환	`document.getElementsByName("foo")`	`<input type="text" name="foo">`
`getElementsByTagName()`	특정 태그 이름과 일치하는 모든 요소(NodeList) 반환	`document.getElementsByTagName("input")`	`<input type="text">`

getElementsByClassName, getElementsByName, getElementsByTagName, querySelectorAll은 모두 NodeList를 반환하기 때문에 반복문 등을 통해 요소에 접근해야 해요.
querySelector와 querySelectorAll은 CSS 선택자 문법을 그대로 사용 가능하다는 게 장점이에요!

1. Node 객체

정의: DOM의 모든 객체가 상속받는 최상위 기본 객체로, 문서의 요소, 텍스트, 속성, 주석 등을 포함합니다.
종류: Element, Text, Comment, Document 등

분류	이름	설명
속성	`childNodes`	모든 자식 노드를 NodeList 형태로 반환
	`parentNode`	부모 노드를 반환
	`textContent`	노드와 그 자손의 텍스트를 가져오거나 설정
	`attributes`	해당 노드의 속성(attribute)들을 컬렉션 형태로 반환 (Element 전용)
메서드	`appendChild(node)`	자식 노드의 마지막에 새 노드를 추가
	`removeChild(node)`	지정한 자식 노드를 제거
	`cloneNode(true/false)`	노드를 복사 (true: 깊은 복사, false: 얕은 복사)
	`hasChildNodes()`	자식 노드 존재 여부 확인
	`insertBefore(new, target)`	지정 노드 앞에 새 노드 삽입
	`replaceChild(new, old)`	기존 자식을 새 노드로 교체

2. Element 객체

정의: HTML 요소를 표현하는 객체로, Node를 상속받고 DOM 내에서 실제 태그 요소를 다룹니다.

분류	이름	설명
속성	`tagName`	태그 이름을 반환 (`DIV`, `SPAN` 등 대문자 형태)
메서드	`getAttribute(name)`	지정한 속성의 값을 반환
	`setAttribute(name, value)`	속성을 설정
	`removeAttribute(name)`	속성을 제거
	`hasAttribute(name)`	해당 속성 존재 여부 확인

3. HTMLElement 객체

정의: Element 객체를 상속받는 HTML 전용 객체로, <div>, <input>, <form> 등 실제 HTML 문서에서 사용되는 태그를 다룹니다.

분류	이름	설명
속성	`id`	요소의 id 속성 값 접근 또는 설정
	`className`	class 속성 값 접근 또는 설정
	`innerHTML`	요소 내부의 HTML 콘텐츠 접근 또는 설정
	`tabIndex`	요소의 탭 순서 제어
	`title`	마우스 오버 시 표시되는 설명 텍스트
메서드	`toString()`	요소를 문자열로 변환 (`[object HTMLDivElement]` 등)

4. Text 객체 (input 요소 기준)

정의: 사용자가 입력할 수 있는 input type="text" 같은 요소의 속성과 메서드를 정의합니다.

분류	이름	설명
속성	`defaultValue`	초기 값 반환 또는 설정
	`disabled`	입력 비활성화 여부 설정 또는 확인
	`form`	해당 input 요소가 속한 form 요소 반환
	`name`	name 속성 값 설정 또는 확인
	`type`	input 요소의 타입 (`text`, `email` 등) 확인
	`value`	현재 입력된 값 또는 value 속성 값
메서드	`select()`	필드의 텍스트 전체 선택 (블록 지정)

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <h1>dom sample</h1>

    <!-- 텍스트 입력창과 버튼 생성 -->
    <input type="text" width="10">
    <input type="button" value="입력">

    <!-- id가 result인 요소: 결과 표시 영역 -->
    <div id="result"></div>     

    <script>
        // 버튼 클릭 시 실행되는 이벤트 핸들러
        document.querySelector("[type=button]").onclick = (event) => {
            // text 변수에 입력창의 값(value)을 저장
            // 이 값은 사용자가 입력한 문자열입니다.
            let text = document.querySelector("[type=text]").value;

            // id가 "result"인 요소에 입력된 값을 그대로 출력
            // textContent는 HTML 태그가 아닌 일반 텍스트로 출력
            document.querySelector("#result").textContent = text;
        };

        // 키 입력 시마다 실행되는 이벤트 핸들러
        // 잘못된 부분: this는 여기서 원하는 input 요소를 가리키지 않습니다 (화살표 함수의 특징 때문)
        // 따라서 this.value는 undefined로 처리될 수 있습니다

        // 수정된 코드:
        document.querySelector("[type=text]").onkeyup = function(event) {
            // 사용자가 현재까지 입력한 문자열의 길이를 가져옴
            let length = this.value.length;

            // 입력 길이를 화면에 출력
            document.querySelector("#result").textContent = length;
        };
    </script>
</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
    <title>Document</title>
    <style>
        /* 모든 div 요소에 공통적으로 적용되는 스타일 정의 */
        div {
            width: 200px;
            height: 200px;
            border: 2px solid black;
            background-color: cyan;
            margin-bottom: 10px;
        }

        /* 마우스를 올렸을 때 적용할 클래스 정의 (원형 + 파란색) */
        .mouseover {
            background-color: blue;
            border-radius: 50%;
        }
    </style>
</head>
<body>
    <!-- 첫 번째 박스: 자바스크립트에서 ID로 직접 스타일 조작 -->
    <div id="first"></div>

    <!-- 두 번째 박스: 클래스 기반으로 스타일 변경 -->
    <div id="second"></div>

    <script>
        // 첫 번째 박스를 선택할 때 id는 CSS 선택자이므로 #first로 작성해야 함
        var firstEl = document.querySelector("#first");

        // 마우스를 올렸을 때 직접 스타일을 지정해서 변경
        firstEl.onmouseover = function(event) {
            firstEl.style.backgroundColor = "blue"; // 오타: 'backgroudColor' → 'backgroundColor'
            firstEl.style.borderRadius = "50%"; // 부드러운 원형 효과 추가
        };

        // 마우스를 벗어났을 때 원래대로 복원
        firstEl.addEventListener("mouseout", function(event) {
            firstEl.style.backgroundColor = "cyan"; // 원래 배경색으로 되돌림
            firstEl.style.borderRadius = "0"; // 원형을 다시 사각형으로 변경
        });

        // 두 번째 박스를 선택
        var secondEl = document.querySelector("#second");

        // 마우스를 올리면 미리 만들어 둔 CSS 클래스(mouseover)를 부여
        secondEl.onmouseover = function(event) {
            secondEl.setAttribute("class", "mouseover");
        };

        // 마우스를 벗어나면 클래스 제거 (원래대로 복원)
        secondEl.onmouseout = function() {
            secondEl.removeAttribute("class");
        };
    </script>
</body>
</html>

은채의 성장통

인생 별거 없어

이전 포스트

ID VS CLASS

다음 포스트

17일차 - JS

KCC정보통신

Selector API와 DOM조작

JS를 사용하는 가장 큰 이유

1. DOM이란?

DOM트리 구조예시

JS 프로그래밍

특징

기능

장점

단점

기본구조

실행위치

기본문법

함수

이벤트란?

이벤트 핸들러란?

이벤트 핸들러 등록 방식

이벤트 객체 (`event`)

이벤트 전파 (버블링과 캡처링)

이벤트 제어

참고: removeEventListener

Objects

DOM 요소 찾기

1. Node 객체

2. Element 객체

3. HTMLElement 객체

4. Text 객체 (input 요소 기준)

ID VS CLASS

20일차 - GROUP함수

0개의 댓글

17일차 - JS

KCC정보통신

Selector API와 DOM조작

JS를 사용하는 가장 큰 이유

1. DOM이란?

DOM트리 구조예시

JS 프로그래밍

특징

기능

장점

단점

기본구조

실행위치

기본문법

함수

이벤트란?

이벤트 핸들러란?

이벤트 핸들러 등록 방식

이벤트 객체 (event)

이벤트 전파 (버블링과 캡처링)

이벤트 제어

참고: removeEventListener

Objects

DOM 요소 찾기

1. Node 객체

2. Element 객체

3. HTMLElement 객체

4. Text 객체 (input 요소 기준)

ID VS CLASS

20일차 - GROUP함수

0개의 댓글

이벤트 객체 (`event`)