Goeun's Devlog. · A Jekyll theme

Javascript - HTML 엘리먼트 가져오기, 삭제하기, 이동하기

04 Aug 2018 • Javascript

1. 엘리먼트 가져오기

1.1 queryselector

CSS 선택자 형식으로 엘리먼트를 가져올 수 있다.
가져오는 엘리먼트는 1 개

<h1 id="hello-a" className = "test"> Hello wolrd ! A </h1>

<script>

document.getElementById("hello-a")
= document.querySelector("#hello-a")

document.getElementsByTagName("h1")
= document.querySelector("h1")

document.getElementsbyClassName("test")
= document.querySelector(".test");

</script>

1.2 querySelectorAll

CSS 선택자 형식으로 엘리먼트를 배열 형태로 가져온다.
가져오는 엘리먼트 복수 개

<h1> Hello world ! A </h1>
<h1> Hello world ! B </h1>
<h1> Hello world ! C </h1>

<script>

var arr = document.querySelectorAll("h1");

for (var i=0; i<arr.length; i++){
	arr[i].style.color = "red";
}

</script>

See the Pen Javascript : querySelectorAll() by Cathy Go Eun Woo (@cathy-go-eun-woo) on CodePen.

2. `<style> vs <script>`

Script 태그 안에서 스타일 속성을 사용할 때 몇가지 규칙이 있음.

2.1 pixel

2.1.1 style 태그

<style>
h1{

height : 10px;

}
</style>

2.1.2 script 태그 : px 단위에 따옴표

<script>

var header = document.querySelector("h1");
header.height = "10px"

</script>

2.2 특수기호 ‘-‘

2.2.1 style 태그

<style>
h1{

font-family : 'sans-serif';

}
</style>

2.2.2 script 태그 : ‘-‘으로 끊긴 단어의 첫 글자를 대문자로 변경

<script>

var header = document.querySelector("h1");
header.fontFamily = "sans-serif";
header.backgroundImage
header.boxSizing
header.listStyle
...

</script>

3. 엘리먼트 제거하기

준비물 : 제거하고자하는 엘리먼트 + 그 엘리먼트의 부모 객체

3.1 제거방법 1 : removeChild()

var header = document.querySelector("h1");	//제거하고자 하는 엘리먼트
var body = document.body;	// 그 엘리먼트의 부모 객체
body.removeChild(header);

3.2 제거방법 2 : parentNode.removeChild()

더 많이 사용되는 방법

var header = document.querySelector("h1");	//제거하고자 하는 엘리먼트
header.parentNode.removeChild(header);

4. 엘리먼트 이동하기

appendChild() 이용하기

See the Pen Javascript : appendChild() by Cathy Go Eun Woo (@cathy-go-eun-woo) on CodePen.

Javascript - DOM (Document Object Model)

30 Jul 2018 • Javascript

문서 객체 모델
웹브라우저가 HTML 페이지를 인식하는 방법
태그 = 요소 = 문서객체
각각의 태그 –> 요소 노드
실제 입력되는 텍스트 –> 텍스트 노드

1.1 요소 태그 생성

body 태그 내부에 태그 생성하기

// h1 요소 생성
var header = document.createElement("h1");
var image = document.createElement("img");

// body 태그에 붙이기
document.body.appendChild(header);
document.body.appendChild(image);

결과

<html>
...
	<body>

    	<h1></h1>
		<img></img>

    </body>
</html>

1.2 텍스트 노드 생성

요소 태그 안에 텍스트 삽입하기

// 텍스트노드 생성
var textNode = document.createTextNode("Hello world");
// 텍스트 값 삽입
header.appendChild(textNode);

결과

<html>
...
	<body>

    	<h1>Hello world</h1>
		<img></img>

    </body>
</html>

1.3 속성 태그 생성

속성 태그 생성 : createAttribute()

// 속성 태그 생성
var attr = document.createAttribute("src");

// 속성 값 삽입
attr.value = "http://placehold.it/300x300"

1.4 간단하게 사용하기

1.4.1 header.innerHTML 내부에 텍스트 입력하기

//header.innerHTML = "Hello world";

1.4.2 setAttribute() 사용하기

image.setAttribute("src","http://placehold.it/300x300")

1.4.3 선언한 attribute 바로 가져오기

image.src = "http://placehold.it/300x300"

See the Pen Javascript : DOM by Cathy Go Eun Woo (@cathy-go-eun-woo) on CodePen.

Javascript - BOM (Browser Object Model)

30 Jul 2018 • Javascript

브라우저 객체 모델
웹브라우저에서 사용하는 자바스크립트에서만 사용할 수 있는 객체 모델
모든 브라우저 객체들은 window 객체에 귀속

   - BOM 객체의 종류

      window.location
      window.navigator
      window.history
      window.screen
      window.documqent

2. window.onload( )

HTML 읽는 순서 : 위에서 아래로 읽음
HTML > HEAD > TITLE > SCRIPT > BODY > …
document.querySelecor(“”) : css selector를 통해 DOM을 찾을 수 있음.
head 태그 안의 script에 작성할 경우 body에 있는 선택자에 선택되지 않음.

<html>
  <head>
    <title>Document Object Model</title>
    <script>
      // 에러 발생, 이 '<script></script>' 태그 내부에서 'h1' 태그를 찾을 수 없습니다.
        document.querySelector("h1").style.color = "red";
    </script>
  </head>
  <body>
    <h1>Process -1 </h1>
    <script>document.write('script test 2')</script>
    <h2>Process -2</h2>
    <script>document.write('script test 2')</script>
  </body>
</html>

해결방법 1 : script 태그를 body 태그 안으로 옮긴다

<body>
    <h1>Process -1 </h1>
    <script>document.write('script test 2')</script>
    <h2>Process -2</h2>
    <script>document.write('script test 2')</script>

     <script>
     //script 태그를 body 태그 안으로 이동
        document.querySelector("h1").style.color = "red";
    </script>
  </body>

해결방법 2 : head 태그 안의 script 에 작성할 때, window.onload( )(화면이 로드될 때 함수 실행) 이벤트를 사용한다.

  <head>
    <title>Document Object Model</title>
    <script>
  // window.onload() 이벤트 사용
  	window.onload = () => { document.querySelector("h1").style.color = "red" };
    </script>
  </head>

Javascript - Event (이벤트 기본, 이벤트 등록하기)

30 Jul 2018 • Javascript

1. 이벤트 기본

1.1 이벤트 타입
이벤트의 종류를 의미한다.
사용자가 마우스를 클릭했을 때 (onClick)  
사용자가 마우스 휠을 돌렸을 때(onMouseWheel)  
텍스트 박스의 입력 값이 바뀌었을 때 (onChange)  
** 1.2 이벤트 핸들러 **
특정 이벤트가 발생했을 때 실행될 코드 (onClick, onChange 이하 …)

2. 이벤트 등록 방법

이벤트 프로그래밍을 하기 위해서는 이벤트의 대상에 이벤트 핸들러를 등록해야 한다.

2.1 inline
이벤트를 이벤트 대상의 태그 속성으로 지정
HTML input 태그 안에 이벤트가 직접 포함
정보(HTML)와 제어(Javascript)가 혼재된 형태이기 때문에 바람직한 방법이라고 할수는 없다.
HTML 태그 안에 이벤트 코드를 작성하므로 복잡한 코드는 작성하기 어렵다.

<!-- Inline -->
<input type ="button" id="target" onClick ="alert('Hello world')" />

getElementById : 하나의 결과만을 리턴하기 때문에 id 값이 2 개일 경우에는 정상 작동하지 않음
this 활용하기 : 코드 관리가 용이함

자기 자신을 참조하는 불편한 방법 : document.getElementById('target').value

<input type="button" id="target" onclick="alert('Hello world, '  +document.getElementById('target').value);" value="button" />

this를 통해서 간편하게 참조할 수 있다 : this.value

<input type="button" onclick="alert('Hello world, '+this.value);" value="button" />

2.2 Property Listener
이벤트 대상이 되는 객체의 프로퍼티로 이벤트 등록
<script> </script> 태그 안에 메서드 정의
이벤트 핸들러의 첫번째 인자 'event' 객체 : 현재 발생한 이벤트에 대한 정보를 얻을 수 있음.
event 객체의 target 프로퍼티 : event 라는 기능자체의 객체
value : event.target 이 가지고 있는 value="button" 출력
Cross Browsing Issue : IE 8 이하에서는 전역객체의 event 프로퍼티로 제공하기 때문에 다음 방식으로 문제 해결.
재사용 불가 : 같은 이벤트 이름으로 단 하나의 이벤트 핸들러만을 사용할 수 있음

var event = event || window.event;
var target = event.target || event.srcElement;

<body>
    <input type="button" id="target" value="button" />

<script>
<!-- Property Listener -->

    var t = document.getElementById('target');
    t.onclick = function(event){
        alert('Hello world, '+event.target.value)
    }
</script>

2.3 addEventListener( )
이벤트를 등록하는 가장 권장되는 방식
복수의 엘리먼트에 하나의 리스너를 등록해서 재사용할 수 있다.
Cross Browsing Issue : IE 8 이하에서는 attachEvent 메소드를 사용

var t = document.getElementById('target');

<!-- addEventListener -->

if(t.addEventListener){
t.addEventListener('click', function(event){
alert('Hello world, '+event.target.value);
});
} else if(t.attachEvent){ //IE 8 이하
t.attachEvent('onclick', function(event){
alert('Hello world, '+event.target.value);
})
}

같은 이벤트 이름으로 여러 개의 이벤트를 추가할 수 있다.

    var t = document.getElementById('target');
    t.addEventListener('click', function(event){
        alert(1);
    });
    t.addEventListener('click', function(event){
        alert(2);
    });

반대로 여러 엘리먼트를 하나의 이벤트 리스너로 등록하여 사용할 수 있다.

var t1 = document.getElementById('target1');
var t2 = document.getElementById('target2');

function btn_listener(event){
switch(event.target.id){ //id 체크

case 'target1': // target1 에 대한 이벤트 추가
alert(1);
break;

case 'target2': // target2 에 대한 이벤트 추가
alert(2);
break;
}
}

t1.addEventListener('click', btn_listener); //alert(1)
t2.addEventListener('click', btn_listener); //alert(2)

Javascript - 비파괴적 / 파괴적 메서드

30 Jul 2018 • Javascript

1. 비파괴적 메서드 : 자신을 파괴시키지 않으면서 사용되는 메서드.

string 객체 대부분의 메서드가 비파괴적 메서드
원래 변수를 변화시키지 않음.
결과값을 변경하려면 비파괴적 메서드를 호출한 변수를 다시 저장

var str = "hello world";
str.toUpperCase();
//toUppercase() : 비파괴적 메서드 , 원래 변수를 변화시키지 않음. 문자열을 대문자로 변환

document.write(str); //hello world

//결과값을 변화시키려면 아래 코드처럼 작성
str = str.toUpperCase(); // 비파괴적 메서드를 호출한 변수를 다시 저장
document.write(str); //HELLO WORLD

1.1 메서드 체이닝 (비파괴적 메서드) : 여러개의 메서드를 연속하여 호출

str = str
    .toLowerCase()
    .fontcolor("red")
    .anchor("test");

document.write(str);

2. 파괴적 메서드 : 자기 자신을 변화시키는 메서드

array 객체 대부분의 메서드가 파괴적 메서드
메서드 호출만으로 의미를 가짐 : 파괴적 메서드 호출 시 객체 내부의 값이 변경됨

var arr = [1,2,3,4,5];
arr.push(6);	// arr배열의 마지막 위치에 6 삽입
arr.push(7);	// arr배열의 마지막 위치에 7 삽입
arr.push(8);	// arr배열의 마지막 위치에 8 삽입
document.write(arr);  //[1,2,3,4,5,6,7,8]

arr.reverse();	//reverse() : 배열 순서를 거꾸로
document.write(arr); //[8,7,6,5,4,3,2,1]

Javascript - HTML 엘리먼트 가져오기, 삭제하기, 이동하기

1. 엘리먼트 가져오기

1.1 queryselector

1.2 querySelectorAll

2. <style> vs <script>

2.1 pixel

2.2 특수기호 ‘-‘

3. 엘리먼트 제거하기

3.1 제거방법 1 : removeChild()

3.2 제거방법 2 : parentNode.removeChild()

4. 엘리먼트 이동하기

Javascript - DOM (Document Object Model)

1.1 요소 태그 생성

1.2 텍스트 노드 생성

1.3 속성 태그 생성

1.4 간단하게 사용하기

Javascript - BOM (Browser Object Model)

2. window.onload( )

Javascript - Event (이벤트 기본, 이벤트 등록하기)

1. 이벤트 기본

2. 이벤트 등록 방법

Javascript - 비파괴적 / 파괴적 메서드

1. 비파괴적 메서드 : 자신을 파괴시키지 않으면서 사용되는 메서드.

2. 파괴적 메서드 : 자기 자신을 변화시키는 메서드

2. `<style> vs <script>`