자바 스크립트(js) 입문 공부 9. createElement & appendChild, value 입력한 값 불러오기

 

document.createElement

 

우리는 랜더링의 중간 과정 중 DOM 단계에서 document 을 통해 개체에 접근할 수 있습니다. 

document의 createElement 메소드는 지정된 이름의 HTML 요소를 만들어 반환해 줍니다. 

 

 

상기 코드로 HTML 에는 <div> <p> <a> 태그가 생성이 됩니다. 

이 기능을 활용하면 <ul> <li> 리스트를 작성하는 것도 가능합니다. 

하지만 이것은 화면에서 반환하는 것이 아니라 DOM 단계에서 반환하기 때문에 화면에 추가되지 않습니다. 

화면에 추가하기 위해서는 그 다음으로 appendChild 메소드를 사용해야 합니다. 

 

appendChild

appendChild 메소드는 DOM 내 개별 요소(‘노드’라고도 함)에 자식 요소를 추가할 때 사용하는 메소드입니다.

appendChild 를 해줌으로써 document의 createElement 로 추가된 HTML 태그가 화면에 추가 됩니다.

appendChild는 개별 요소가 다 가지고 있는 요소입니다. 즉, 노드 트리에 구성하고 있는 노드를 추가해주는 것 입니다.

 

 

 

appendChild 메소드 vs append 메소드

 

appendChild 메소드와 비슷한 역할을 하는 append 메소드도 있습니다.

둘 다 타겟 요소에 자식 요소를 추가한다는 점에서 같지만, 다음과 같은 차이점이 있습니다. 

appendChild	append
DOM 내에 Html 요소가 추가되는 반환값이 있다.	append 는 반환 데이터가 없다. (return 값을 반환하지 않는다.)   자바의 void 에 해당한다.
요소에 노드(객체요소) 또는 DOMString (text)문자열을 자식 요소로 추가할 수 있다.	노드(객체요소)만을 추가할 수 있다.
한 번에 여러 개의 노드를 추가할 수 있다.	한 번에 오직 한 개의 노드만을 추가할 수 있다.

 

value

<input>, <select> 처럼 입력 값을 받을 때 사용되는 요소들이 있습니다. 

여기에서 사용자가 입력한 값을 읽어들일 때에는 요소의 value 속성에 접근을 해야 합니다. 

즉 어떤 요소에 접근하고자 할 때 다음과 같은 차이가 있습니다. 

- 요소의 텍스트에 접근하고 싶다 : textContent 또는 innerText

- 사용자가 요소에 입력한 값에 접근하고 싶다 : value 

 

여기서 '접근' 이라는 말을 쓰는데 이는 입력 요소의 value 에서 읽고 쓰는 것을 말합니다. 

즉 입력된 요소에 대해서 콘솔에 출력을 하건, 사용자의 입력값을 변경할 수 있는 것이에요. 

value 를 사용하는 형태는 다음과 같습니다. 

 

value 로 form의 값에 접근하기

자바스크립트에서 document, 즉 HTML에 작성한 form 에 접근하는 방법이 여러가지가 있습니다. 

1. form 에 이름을 주고 자바스크립트에서 이름으로 접근

 HTML form name = "myForm"

자바스크립트에서 let f = document.myForm;

 

2. form 의 인덱스 번호로 접근 

HTML 문서에서 첫번째 form 에 접그  

let f = document.forms[0];

 

3. 폼 태그 안에 있는 name 값을 가져올 수 있습니다. 

let name = document.myForm.name.value; 

 

4. 객체의 이름 속성을 이용해서 접근 (요소 뒤에 s를 붙여야 합니다. 값이 여러개가 있을 수도 있기 때문에) 

let birth = document.getElementsByName("birth")[0].value; 

(= 요소들 중 이름이 birth 인 0 번째 인덱스 값을 가져온다.) 

 

5. id 속성을 통해서 접근  (name 과 비슷) 

let age = document.getElementById("age").value; 

 

6. 선택자로 접근하기, 해당 선택자의 첫 번째 요소 

obj = document.querySelector(".layout) 

 

이렇게 value 로 값을 가져오기 위해서는 form 에서 여러 입력 값을 설정해주면 됩니다. 

 <form action="이벤트 객체">
        <input name = "nickname" placeholder="닉네임"/>
        <input name = "character" placeholder="특징"/>
        <input type="submit" value="입력완료 "/>
    </form>"

form에서 이벤트가 제출되는 submit 이벤트가 발생하면 action 속성의 url 로 입력값이 제출되지만,

이벤트 객체를 통해 기본 기능을 차단할 수 있습니다. 

 

여기까지 개체와 값의 접근에 대해서 알아보았습니다. 

이후에 생성자에 대해서 알아볼게요.