객체

객체(object)란?

객체(object)란 실생활에서 우리가 인식할 수 있는 사물로 이해할 수 있습니다.

객체의 예
객체(object)

• 고양이

객체의 프로퍼티(property)

• cat.name = "나비"

• cat.family = "코리안 숏 헤어"

• cat.age = 0.1

• cat.weight = 300

메소드(method)

• cat.mew()

• cat.eat()

• cat.sleep()

• cat.play()

고양이 객체는 모두 위와 같은 프로퍼티를 가지지만, 각 프로퍼티의 값은 인스턴스마다 전부 다를 것입니다.

자바스크립트 객체
자바스크립트의 기본 타입(data type)은 객체(object)입니다.

객체란 이름(name)과 값(value)으로 구성된 프로퍼티(property)의 정렬되지 않은 집합입니다.

프로퍼티의 값으로 함수가 올 수도 있는데, 이러한 프로퍼티를 메소드(method)라고 합니다.

예제

var cat = "나비"; // 일반적인 변수의 선언

// 객체도 많은 값을 가지는 변수의 하나임.

var kitty = { name: "나비", family: "코리안 숏 헤어", age: 1, weight: 0.1 };

cat          // 나비

kitty.name   // 나비

자바스크립트에서는 숫자, 문자열, 불리언, undefined 타입을 제외한 모든 것이 객체입니다.

하지만 숫자, 문자열, 불리언과 같은 원시 타입은 값이 정해진 객체로 취급되어, 객체로서의 특징도 함께 가지게 됩니다.

객체의 프로퍼티 참조
자바스크립트에서 객체의 프로퍼티를 참조하는 방법은 다음과 같습니다.

문법
객체이름.프로퍼티이름

또는

객체이름["프로퍼티이름"]

예제

var person = {

    name: "홍길동",      // 이름 프로퍼티를 정의함.

    birthday: "030219",  // 생년월일 프로퍼티를 정의함.

    pId: "1234567",      // 개인 id 프로퍼티를 정의함.

    fullId: function() { // 생년월일과 개인 id를 합쳐서 주민등록번호를 반환함.

        return this.birthday + this.pId;

    }

};

person.name    // 홍길동

person["name"] // 홍길동

객체의 메소드 참조
자바스크립트에서 객체의 메소드를 참조하는 방법은 다음과 같습니다.

문법
객체이름.메소드이름()

예제

var person = {

    name: "홍길동",

    birthday: "030219",

    pId: "1234567",

    fullId: function() {

        return this.birthday + this.pId;

    }

};

person.fullId() // 0302191234567

person.fullId;  // function () { return this.birthday + this.pId; } 

점 표기법 vs 괄호 표기법 ( dot notation, bracket notation)

자바스크립트에서 객체 내부 프로퍼티에 접근하는 방법엔, 점 표기법 , 괄호 표기법 2가지가 있습니다.

likelion 이란 객체가 있고, 해당 객체의 property 에 접근하는 코드를 작성해보겠습니다.

let likelion = {
    number: '9th',
    member: 21,
    univ: "pnu"
}

아래처럼 두 방법 모두 객체의 프로퍼티에 접근할 수 있습니다.

// 점 표기법
likelion.number // 9th
likelion.member // 21

// 괄호 표기법
likelion['univ'] // 'pnu'
 

각 방법마다 장점이 있는데,

점 표기법이 괄호 표기법에 비해 간결하게 작성할 수 있어 가독성 측면에서 좋습니다.

그렇다면 괄호 표기법의 장점은 무엇일까요?

바로바로 객체의 프로퍼티에 변수를 활용하여 접근할 수 있는 점입니다. 글로는 무슨 말인지 모르겠으니 코드를 보겠습니다.

점 표기법의 한계

객체의 프로퍼티에 접근하여 원하는 값(: changingValue)으로 변경하는 함수 changeProperty() 가 있습니다.

점 표기법으로 likelion 의 member 값(21 -> 300)을 변경해보겠습니다.

const changeProperty = (object, property, changingValue) => {
    object.property = changingValue
}

changePropery(likelion, member, 300) // Uncaught ReferenceError: member is not defined

changeProperty의 인자 member가 정의되지 않았다는 에러메시지가 발생합니다.

즉 member 를 변수로서 사용하고 싶었지만, 점 표기법에서는 이런 방법이 불가능합니다.

(점 표기법의 한계는) 괄호 표기법으로 극복

const changeProperty = (object, property, changingValue) => {
    object[property] = changingValue
}

changePropery(likelion, "member", 300) 

// likelion = {number: '9th', member: 300, univ: "pnu"}

괄호 표기법을 사용하면 "member" 변수를 활용하여 객체의 프로퍼티에 접근할 수 있습니다. likelion 객체의 member 값이 21 에서 300 으로 변경 된 것을 확인할 수 있습니다.

비동기 데이터에서 괄호표기법
이렇게 괄호 표기법을 사용하면, 아직 객체 내부가 정의되지 않은 경우에도 접근할 수 있는 이점이 있습니다.

예를 들어 API 통신으로 어떤 객체(= result)를 받아올 때, 해당 객체의 내부 값을 변경하는 코드를 작성한다고 생각해봅시다.

result 객체의 a 라는 property 가 존재한다해도, API 통신 이전에는 해당 property 는 정의되지 않은 상태입니다.

점 표기법은 정의되지 않은 result 객체에 접근할 수 없지만, 괄호 표기법은 해당 프로퍼티를 변수화하기 때문에 접근이 가능해집니다.

비동기로 데이터를 호출하는 경우, 프로퍼티에 접근하고 싶다면 괄호 표기법을 사용합시다

this란?

this는 일반적으로 메서드를 호출한 객체가 저장되어 있는 속성입니다. 하지만 this 속성은 메서드를 호출할 때뿐 아니라 일반 함수를 호출할 때도 만들어지며 이벤트 리스너가 호출될 때에도 this 속성이 만들어집니다. 문제는 this 속성에 저장되는 값이 동일한 값이 아니라 각각 다르다는 점입니다.

this가 만들어지는 경우

1.일반 함수에서의 this (window 객체)

2.일반 중첩 함수에서의 this (window 객체)

3.이벤트 리스너에서의 this (이벤트를 발생시킨 객체)

4.메서드에서의 this (메서드를 호출한 객체)

5.메서드 내부의 중첩 함수에서 this (window 객체)

1.일반 함수에서의 this

var data = 10;
 
function thisFn(){
    
    this.data = 20;
    
    console.log("this.data = 20; 실행한 후 ===== ===== =====");            
    console.log("1.data : " + data);
    console.log("2.this.data : " + this.data);
    console.log("3.window.data : " + window.data);
    
    data = 30;
    
    console.log("data = 30; 실행한 후 ===== ===== =====");            
    console.log("1.data : " + data);
    console.log("2.this.data : " + this.data);
    console.log("3.window.data : " + window.data);
}
 
thisFn();
cs

출력결과

this.data = 20; 실행한 후 ===== ===== =====

1.data : 20

2.this.data : 20

3.window.data : 20

data = 30; 실행한 후 ===== ===== =====

1.data : 30

2.this.data : 30

3.window.data : 30

설명

일반 함수 내부에서 this는 전역 객체인 window가 저장됩니다.

2.일반 중첩 함수에서 this

var data = 10;
 
function thisOuterFn(){
 
    function thisInnerFn(){
 
        this.data = 20;
 
        data = 30;
 
        console.log("1.data : " + data);
        console.log("2.this.data : " + this.data);
        console.log("3.window.data : " + window.data);
    }    
 
    thisInnerFn();
}
 
thisOuterFn();

cs

출력결과

1.data : 30

2.this.data : 30

3.window.data : 30

설명

thisInnerFn() 함수는 thisOuterFn() 함수에 만들어져 있기 때문에 thisOuterFn() 내부에서만 사용할 수 있는 전형적인 중첩 함수입니다. 따라서 일반 중첩 함수에서 this 역시 window가 됩니다.

3.이벤트 리스너에서의 this

var data = 10;
        
$(document).ready(function(){
    
    $("#thisButton").click(function(){
 
        this.data = 20;
        
        console.log("this.data = 20; 실행한 후 ===== ===== =====");            
        console.log("1.data : " + data);
        console.log("2.this.data : " + this.data);
        console.log("3.window.data : " + window.data);
        
        data = 30;
        
        console.log("data = 30; 실행한 후 ===== ===== =====");            
        console.log("1.data : " + data);
        console.log("2.this.data : " + this.data);
        console.log("3.window.data : " + window.data);
    });
});

cs
        

출력결과

this.data = 20; 실행한 후 ===== ===== =====

1.data : 10

2.this.data : 20

3.window.data : 10

data = 30; 실행한 후 ===== ===== =====

1.data : 30

2.this.data : 20

3.window.data : 30

설명

이벤트 리스너에서 this는 이벤트를 발생시킨 객체가 됩니다.

4.메서드에서의 this

var data = 10;
 
function thisFn() {
 
    this.data = 0;
}
 
thisFn.prototype.thisMethod=function(){
 
    this.data = 20;
    
    console.log("this.data = 20; 실행한 후 ===== ===== =====");            
    console.log("1.data : " + data);
    console.log("2.this.data : " + this.data);
    console.log("3.window.data : " + window.data);
    
    data = 30;
    
    console.log("data = 30; 실행한 후 ===== ===== =====");            
    console.log("1.data : " + data);
    console.log("2.this.data : " + this.data);
    console.log("3.window.data : " + window.data);
}
 
var thisFn = new thisFn();
 
thisFn.thisMethod();

cs

출력결과

this.data = 20; 실행한 후 ===== ===== =====

1.data : 10

2.this.data : 20

3.window.data : 10

data = 30; 실행한 후 ===== ===== =====

1.data : 30

2.this.data : 20

3.window.data : 30

설명

메서드에서 this는 객체 자신이 저장됩니다.

5.메서드 내부의 중첩 함수에서의 this

var data = 10;
 
function thisOuterFn() {
 
    this.data=0;
}
 
thisOuterFn.prototype.thisMethod = function(){
    
    function thisInnerFn(){
    
        this.data = 20;
        
        console.log("this.data = 20; 실행한 후 ===== ===== =====");            
        console.log("1.data : " + data);
        console.log("2.this.data : " + this.data);
        console.log("3.window.data : " + window.data);
        
        data = 30;
        
        console.log("data = 30; 실행한 후 ===== ===== =====");            
        console.log("1.data : " + data);
        console.log("2.this.data : " + this.data);
        console.log("3.window.data : " + window.data);
    }
 
    thisInnerFn();
}
 
var thisOuterFn = new thisOuterFn();
 
thisOuterFn.thisMethod();

cs

출력결과

this.data = 20; 실행한 후 ===== ===== =====

1.data : 20

2.this.data : 20

3.window.data : 20

data = 30; 실행한 후 ===== ===== =====

1.data : 30

2.this.data : 30

3.window.data : 30

설명

객체의 메서드 내부에 만들어지는 중첩 함수에서 this는 객체가 아닌 window가 됩니다.

배열과 배열 내장 함수

배열의 정의

프로그램을 만들 때 종종 값들의 목록을 저장해야 할 때가 있습니다. 이를 위해서 JavaScript에서는 배열(array)이라고 하는 형태의 값을 이용합니다.

배열을 만들기 위해 변수를 선언할 때는 값의 목록을 꺾쇠괄호로 묶고 각각의 값을 쉼표로 구분합니다.

var xPositions = [33, 72, 64];

배열에는 숫자뿐만 아니라 어떤 JavaScript 값도 배열에 저장할 수 있습니다. 다음은 문자열을 저장한 예시입니다.

var myFriends = ['Winston', 'OhNoesGuy', 'John', 'Sophia'];

배열의 길이를 나타내거나, 배열의 길이를 바탕으로 어떤 작업을 해야 하는 경우가 생길 수 있습니다. 다행히도 모든 배열은 'length' 속성을 가지고 있어서 배열의 현재 길이를 알 수 있습니다.

text(myFriends.length, 200, 200); // Displays "4"

배열 항목의 접근과 수정

배열에서 특정 위치의 값에 접근하려면, 배열에서의 위치를 나타내는 "인덱스"를 사용해서 접근해야 합니다. 배열의 첫번째 "인덱스"는 "0"이므로, 배열의 첫번째 요소에 접근하려면 먼저 순서대로 배열의 이름과 대괄호[ ] , 0을 씁니다.

text(myFriends[0], 200, 0); // Displays "Winston"

두 번째 요소는 인덱스 "1", 세 번째 요소는 인덱스 "2", 네 번째 요소는 인덱스 "3"에 있습니다.

text(myFriends[1], 200, 100); // Displays "OhNoesGuy"
text(myFriends[2], 200, 200); // Displays "John"
text(myFriends[3], 200, 300); // Displays "Sophia"

위에서 text() 명령어를 이용해서 이름을 표현한 것 같이, 배열의 모든 요소에 대해서 어떤 행동을 하고자 할 때가 있습니다. 이때, 모든 코드를 하나하나 작성하기보다는 for 반복문을 사용해서 배열의 각 요소를 순회하는 것이 더 낫습니다. 인덱스를 0부터 시작해서 배열의 끝에 도달할 때까지 인덱스를 하나씩 늘려 나갑니다. 방법은 다음과 같습니다.

for (var i = 0; i < myFriends.length; i++) {
   text(myFriends[i], 200, (i+1)*100);
}

반복문이 진행될 때의 변화하는 인덱스를 보여주기 위해 'i'를 대괄호 안에 입력한 것을 주목하세요.

배열은 여러 방법으로 바꿀 수 있습니다.배열의 값을 변경해 봅시다.

myFriends[1] = "TheErrorBuddy";

배열 메소드

sort

배열을 오름차순 내림차순으로 정렬한다.

const arr = [5, 3, 2, 4, 6, 1];
const res;

res = arr.sort(); // sort((a, b) => a - b)과 동일
console.log(res);
// [1, 2, 3, 4, 5, 6]

res = arr.sort((a, b) => b - a);
console.log(res);
// [6, 5, 4, 3, 2, 1]

join

배열을 문자열로 변환한다.

배열.join(); // 구분자를 넣지 않으면 컴마가 포함되어 문자열로 합쳐진다.
배열.join('.'); // 구분자를 넣어주면 아이템 사이에 구분자를 넣어서 문장여로 합쳐진다.

const fruits = ['apple', 'banana', 'orange'];
let res;

res = fruits.join();
console.log(res);
// 'apple,banana,orange'

res = fruits.join(' ');
console.log(res);
// 'apple banana orange'

split

문자열을 배열로 변환한다.

문자열.split();// 구분자를 넣지 않으면 문자열 한 덩이라가 배열의 아이템 1개로 들어간다.
문자열.split('.'); // 구분자를 기준으로 쪼개서저 배열로 변환된다.

const fruits = '🍎, 🥝, 🍌, 🍒';
const arr = fruits.split(',');

console.log(arr);
// ["🍎", " 🥝", " 🍌", " 🍒"]

reverse

배열의 아이템 순서를 뒤집는다.

배열.reverse();

const array = [1, 2, 3, 4, 5];
const res = array.reverse();

console.log(res);
// [5, 4, 3, 2, 1]

console.log(array); // 원래 배열도 변경이 되어있다.
// [5, 4, 3, 2, 1]

splice

인덱스로 배열의 아이템을 삭제한다.

인덱스로 배열의 아이템을 여러개 삭제한다.

인덱스로 배열의 아이템을 삭제하고 해당 인덱스에 새로운 아이템을 추가한다.

단, 반환값은 때어낸(삭제한요소) 배열이다.

배열.splice(인덱스, 삭제할갯수, 추가할 아이템...);

const array = [1, 2, 3, 4, 5];
let res = array.splice(1, 3);

console.log(res);
// [2, 3, 4]
console.log(array);
// [1, 5]

slice

배열의 특정한 부분을 리턴한다.

배열.slice(시작인덱스, 끝 인덱스);// 끝인덱스의 앞까지만 포함한다.

const array = [1, 2, 3, 4, 5];
let res;
      
res = array.slice(2); // 2부터 쭉
console.log(res);
// [3, 4, 5]

res = array.slice(1, 3);
console.log(res);
// [2, 3]

find

배열의 모든 요소들을 돌면서 전달한 콜백함수의 인자로 넣고 호출한다.

콜백 함수의 반환된 값이 true이면 그 즉시 멈추고 해당 요소를 리턴한다.

배열.find();

students 배열에서 90점인 학생을 찾아라.

const res = students.find((student) => student.score === 90);

console.log(res);
// Student {name: "C", age: 30, enrolled: true, score: 90}

filter

배열의 모든 요소들을 돌면서 전달한 콜백함수의 인자로 넣고 호출한다.

콜백 함수의 반환된 값이 true인 요소들을 모아 새로운 배열을 만들어서 리턴한다.

배열.filter();

등록된 학생들만으로 이루어진 배열을 만들어라.

const res = students.filter((student) => student.enrolled);

console.log(res);
// (3) [Student, Student, Student]
// 0: Student {name: "A", age: 29, enrolled: true, score: 45}
// 1: Student {name: "C", age: 30, enrolled: true, score: 90}
// 2: Student {name: "E", age: 18, enrolled: true, score: 88}

map

배열의 모든 요소들을 돌면서 전달한 콜백함수의 인자로 넣고 호출한다.

콜백함수의 반환된 값들을 모두 요소로 담아서 새로운 배열을 리턴한다.

배열.map();

학생들의 점수 배열을 만들어라.

const res = students.map((student) => student.score);

console.log(res);
//  [45, 80, 90, 66, 88]

reduce / reduceRight

reduce
원하는 시작점부터 모든 배열의 요소들을 돌면서 어떤 값을 누적할 때 사용한다.(앞 요소부터)

reduceRight
배열의 제일 뒤(오른쪽)부터 시작하여 모든 배열의 요소를 돌면선 어떤 값을 누적한다.

배열.reduce(콜백함수, 누적값의 초기값);
배열.reduceRight(콜백함수, 누적값의 초기값)

모든 학생들의 평균 점수를 구하라.

const res = students.reduce((prev, curr) => {
    // prev는 이전의 콜백함수의 리턴값이 저장된다.
    // curr은 배열의 아이템을 순차적으로 전달 받는다.
    return prev + curr.score;
}, 0);

console.log(res / students.length);
// 73.8
const res = students.reduce((prev, curr) => prev + curr.score, 0);

console.log(res / students.length);
// 73.8

pop

배열 뒷부분의 값을 삭제

var arr = [ 1, 2, 3, 4 ];
arr.pop();
console.log( arr ); // [ 1, 2, 3 ]

push

배열 뒷부분에 값을 삽입

var arr = [ 1, 2, 3, 4 ];
arr.push( 5 );
console.log( arr ); // [ 1, 2, 3, 4, 5 ]

unshift

배열 앞부분에 값을 삽입

var arr = [ 1, 2, 3, 4 ];
arr.unshift( 0 );
console.log( arr ); // [ 0, 1, 2, 3, 4 ]

shift

배열 앞부분의 값을 삭제

var arr = [ 1, 2, 3, 4 ];
arr.shift();
console.log( arr ); // [ 2, 3, 4 ]

splice

배열의 특정위치에 요소를 추가하거나 삭제
splice( index, 제거할 요소 개수, 배열에 추가될 요소 )

var arr = [ 1, 2, 3, 4, 5, 6, 7 ];
arr.splice( 3, 2 );
console.log( arr ); // [ 1, 2, 3, 6, 7 ] 

3번째 인덱스에서부터 2개 제거

var arr = [ 1, 2, 3, 4, 5, 6, 7 ];
arr.splice( 2, 1, "a", "b");
console.log( arr ); // [ 1, 2, "a", "b", 4, 5, 6, 7 ]

2번째 인덱스에서 1개 제거 후 "a"와 "b"를 추가

slice( startIndex, endIndex)

배열의 startIndex부터 endIndex까지(endIndex는 불포함)에 대한 shallow copy를 새로운 배열 객체로 반환

var arr = [ 1, 2, 3, 4, 5, 6, 7 ];
var newArr = arr.slice( 3, 6 );
console.log( 'slice',  newArr ); // [ 4, 5, 6 ]

concat

다수의 배열을 합치고 병합된 배열의 사본을 반환

var arr1 = [ 1, 2, 3 ];
var arr2 = [ 4, 5, 6 ];
var arr3 = arr2.concat( arr1 );
console.log( arr3 ); // [ 4, 5, 6, 1, 2, 3 ]

every

배열의 모든 요소가 제공한 함수로 구현된 테스트를 통과하는지를 테스트

var arr =[ 1, 2, 3, 4, 5, 6, 7, 8, 9, 10 ];
var isEven = function( value ) {

  // value가 2의 배수이면 true를 반환한다.
  return value % 2 === 0;
};
console.log( arr.every( isEven ) ); // false  모든 요소가 true이면 true를 return 하고 그렇지 않으면 false

some

지정된 함수의 결과가 true일 때까지 배열의 각 원소를 반복

var arr =[ 1, 2, 3, 4, 5, 6, 7, 8, 9, 10 ];
var isEven = function( value ) {

  // value가 2의 배수이면 true를 반환한다.
  return value % 2 === 0;
};
console.log( arr.some( isEven ) ); // true  하나라도 true이면 true를 return

forEach

배열의 각 원소별로 지정된 함수를 실행한다.

var arr =[ 1, 2, 3 ];
arr.forEach( function( value ) {
  console.log( value );   // 1 2 3
});

map

배열의 각 원소별로 지정된 함수를 실행한 결과로 구성된 새로운 배열을 반환한다.

var arr =[ 1, 2, 3, 4, 5, 6, 7, 8, 9, 10 ];
var isEven = function( value ) {
  return value % 2 === 0;
};
var newArr = arr.map( isEven );
console.log( newArr ); // [ false, true, false, true, false, true, false, true, false, true ]

filter

지정된 함수의 결과 값을 true로 만드는 원소들로만 구성된 별도의 배열을 반환한다.

var arr =[ 1, 2, 3, 4, 5, 6, 7, 8, 9, 10 ];
var isEven = function( value ) {
  return value % 2 === 0;
};
var newArr = arr.filter( isEven );
console.log( newArr ); // [ 2, 4, 6, 8, 10 ]

reduce

누산기(accumulator) 및 배열의 각 값(좌에서 우로)에 대해 (누산된) 한 값으로 줄도록 함수를 적용

var arr =[ 1, 2, 3, 4, 5, 6, 7, 8, 9, 10 ];
var value = arr.reduce( function( previousValue, currentValue, index ) {
  return previousValue + currentValue;
});
console.log( value ); // 55

reverse

배열의 원소 순서를 거꾸로 바꾼다.

var arr =[ 1, 2, 3, 4 ];
arr.reverse();
console.log( arr ); // [ 4, 3, 2, 1 ]

sort

배열의 원소를 알파벳순으로, 또는 지정된 함수에 따른 순서로 정렬한다. 모든 원소를 문자열로 취급해 사전적으로 정렬

var arr = [ 13, 12, 11, 10, 5, 3, 2, 1 ];
arr.sort();
console.log( arr ); // [ 1, 10, 11, 12, 13, 2, 3, 5 ];

// sort에 함수로 정렬
var arr = [ 13, 12, 11, 10, 5, 3, 2, 1 ];
arr.sort( function( a, b ) {
  return a - b;
})
console.log( arr ); // [ 1, 2, 3, 5, 10, 11, 12, 13 ]

toString

배열을 문자열로 바꾸어 반환한다

var arr =[ 1, 2, 3, 4 ];
console.log( arr.toString() ); // 1, 2, 3, 4
valueOf
toString과 비슷, 그러나 배열을 반환

var arr =[ 1, 2, 3, 4 ];
console.log( arr.valueOf() ); // [ 1, 2, 3, 4 ]

join

배열 원소 전부를 하나의 문자열로 합친다.

var arr =[ 1, 2, 3, 4 ];
console.log( arr.join() );      // 1,2,3,4
console.log( arr.join( '-' ) ); // 1-2-3-4

DOM

탐색

document.getElementById()

태그에 있는 id 속성을 사용하여 해당 태그에 접근하여 하고 싶은 작업을 할 때 쓰는 함수입니다

해당 id가 없는 경우 null 에러가 발생합니다. ID가 없는 요소에 접근하려면 document.querySelector() (opens new window)를 사용하세요.

#사용법
document.getElementById(id);에 해당 element의 id를 넣음으로 사용합니다

#반환값
주어진 id와 일치하는 dom 요소를 나타내는 Element 객체를 반환하거나 주어진 id와 일치하는 dom 요소가 없으면 null을 return 합니다

#예시
버튼을 누르면 버튼 글자가 바뀌는 스크립트입니다.

#HTML

<button id="jsmode">바뀌기 전 text</button>

#JS

const mode = document.getElementById("jsmode");
mode.addEventListener("click", function() {
  if (mode.innerText === "바뀌기 전 text") {
    mode.innerText = "바뀐 text!";
  } else {
    mode.innerText = "바뀌기 전 text";
  }
});

위와 같이 버튼은 "jsmode"라는 Id를 찾도록 getElementById 함수를 사용합니다.

mode라는 return 값을 이용하여 이후 addEventListener 함수를 통해 클릭시 innerText가 "바뀐 text!"로 바뀌도록 합니다.

document.getElementsByName()

document.getElementsByName()는

name을 기준으로 모든 요소를 가져와서

일괄적으로 컨트롤할 수 있는 편리한 함수입니다.

id는 고유한 반면에

name은 중복이 될 수 있으므로(쉽게 말해서 그룹의 개념이므로)

상당히 편리하게 사용될 수 있습니다.

document.getElementsByName()의 간단한 사용 예제는 다음과 같습니다.

<p name="test">1</p>
<p name="test">2</p>
<p name="test">3</p>
<p name="test">4</p>
<p name="test">5</p>

<script>
    var p = document.getElementsByName("test"); // test라는 name을 가진 요소를 모두 가져온다

    for(var i=0; i<p.length; i++) { // for문을 돌면서 출력할 수 있다. 1, 2, 3, 4, 5가 차례대로 출력될 것이다
        alert(p[i].innerHTML);
    }
</script>

getElementsByTagName()

getElementsByTagName()는 문서 전체 또는 특정 노드에서 ()안의 매개변수 값 엘리먼트를 찾을 수 있습니다.

문법
document.getElementsByTagName("tagname");

//예제

//p태그를 가진 두번째 요소를 선택
var example1 = document.getElementsByTagName("p")[1];
//p태그를 가진 두번째 요소안의 strong 태그를 가진 요소를 선택
var example2 = example1.getElementsByTagName("strong");

document.getElementsByClassName()

문서객체 중 지정된 클래스(Class)값을 가져오는데 사용되는 함수 이다.
읽은 객체는 배열로 저장 된다.

	<input type="text" name="fruits" class="items" value="apple" size="10">

	<input type="text" name="fruits" class="items" value="banana" size="10">

	<input type="text" name="fruits" class="items" value="orange" size="10">

	<input type="text" name="fruits" class="items" value="berry" size="10">

	<input type="text" name="fruits" class="items" value="melon" size="10">



    <script>

		window.onload = function () {	

			alert(document.getElementsByClassName("items").length);



			var array_fruits = document.getElementsByClassName("items");



			//변수 array_fruits 는 문서 객체를 가지는 배열로 들어 간다.

	

			for (var i = 0; i < array_fruits.length; i++) {

				alert(array_fruits[i].value);

			}

		}

    </script>

document.querySelector()

1. querySelector()
   원하는 요소를 아이디(#), 클래스(.), 태그 값을 입력해서 하나만 찾는다.

(리스트나 반복되는 영역에서 해당 명령어를 사용하게 되면 가장 첫번째로 있는 DOM 요소를 찾는다.)

<div id="wrap">
  <ul>
    <li>리스트 1</li>
    <li>리스트 2</li>
    <li>리스트 3</li>
  </ul>
</div>

<script>
  var wrapper = document.querySelector('#wrap');
  var lists = wrapper.querySelector('li');
  
  console.log(wrapper);  // <div id="wrap"> 영역을 찾는다.
  console.log(lists);  // #wrap 하위에 있는 첫 번째 li를 찾는다.
</script>

생성

document.createElement()

자바스크립트를 이용하여 문서에 HTML 요소를 추가할 수 있습니다. 이 때 필요한 자바스크립트 속성은 다음과 같습니다.

document.createElement()
documetn.createTextNode()
는 요소를 만듭니다. 예를 들어

document.createElement( 'h1' )
은 다음과 같은 코드를 생성합니다.

<h1></h1>

document.createTextNode()

document.createTextNode()는 선택한 요소에 텍스트를 추가합니다. 예를 들어

document.createTextNode( 'My Text' )

는 My Text라는 문자열을 만듭니다.

제어

element.appendChild

먼저 appendChild는 오로지 node객체만 자식 요소로 추가할 수 있다
코드를 통해 상세히 알아보자

const divElem = document.createElement('div')
const pElem = document.createElemment('p')

divElem.appendChild(pElem)'

// 결과 : <div><p></p></div>

위와 같이 appendChild()는 노드에 하나의 노드만 추가할 수 있다

.setAttribute()

.setAttribute()는 선택한 요소(element)의 속성(attribute) 값을 정합니다.

문법
element.setAttribute( 'attributename', 'attributevalue' )

attributename에는 속성 이름을, attributevalue에는 속성값을 넣습니다.

예를 들어

document.getElementById( 'xyz' ).setAttribute( 'title', 'This is title' )

id 값이 xyz인 요소의 title 속성을 This is title로 정합니다. 만약 이미 속성값이 존재한다면 그 값을 지우고 새 값을 적용합니다.

element.getAttribute

.getAttribute()는 선택한 요소(element)의 특정 속성(attribute)의 값을 가져옵니다.

문법
element.getAttribute( 'attributename' )

예를 들어

var jb = document.getElementById( 'xyz' ).getAttribute( 'title' );

는 id의 값이 xyz인 요소의 title 속성 값을 변수 jb에 저장합니다.

element.innerHTML

.innerHTML은 특정 요소의 내용을 가져오거나, 특정 요소의 내용을 변경합니다.

문법 1
element.innerHTML
element의 내용을 가져옵니다. 예를 들어

var jb = document.getElementById( 'xyz' ).innerHTML;

은 id의 값이 xyz인 요소의 내용을 변수 jb에 저장합니다.

문법 2
element.innerHTML = content
선택한 element의 내용을 content로 바꿉니다. 예를 들어

document.getElementById( 'xyz' ).innerHTML = 'ABC';

는 id의 값이 xyz인 요소의 내용을 ABC로 바꿉니다.