[강의]Javascript - document객체, 노드, 폼 객체, 폼의 접근, input 태그 접근

이강민·2021년 12월 29일

[강의]Javascript

목록 보기

7/8

document 객체

웹 페이지 자체를 의미하는 객체
웹 페이에 존재하는 HTML 요소에 접근할 때는 반드시 document 객체로부터 시작

getElementsByTagName() : 해당 태그 이름의 요소들을 모두 선택(배열)
getElementById() : 해당 아이디의 요소를 선택(1개만)
getElementsByClassName() : 해당 클래스에 속한 요소를 모두 선택(배열)
getElementsByName() : 해당 name 속성값을 가지는 요소를 모두 선택(배열)

	// 1개라도 배열로 잡음
        const h1 = document.getElementsByTagName('h1')
        console.log(h1)
        // 클래스 네임은 당근 여러개 잡으니깐 배열로 잡음
        const h2 = document.getElementsByClassName('h2')
        console.log(h2)
        // 이러면 모든 li의 모든 태그를 잡고
        const tagName = document.getElementsByTagName('li');
        console.log(tagName)
        //태그이름의 갯수만큼 반복하면 모든 태그를 출력할 수 있다!
        for (let i = 0; i < tagName.length; i++) {
            console.log(tagName[i])            
        }
        console.log("------------")
        //js라는 클래스는 2개
        const className = document.getElementsByClassName('js')
        console.log(className)
        //for in 문으로 배열의 갯수 만큼 반복시킨다.(i는 index)
        for (const i in className) {
            console.log(className[i])
        }
        console.log("------------")
        //이 친구만 1개 잡네?
        const id = document.getElementById('server');
        console.log(id)
        console.log("------------")
        
        //view라는 태그의 이름을 가진 놈을 다 잡는다.
        const name = document.getElementsByName("view");
        //for of문으로 배열의 값들을 출력한다. 그 값은 태그임 
        for (const e of name) {
            console.log(e)
            //값을 가져와 style에 접근하고 style의 border에 접근해서 값을 대입한다.
            e.style.border = "3px dotted blue";
        }
        console.log("------------")

        //css스타일 선택자형식으로 접근가능하고 li.js의 태그들을 가져온다.
        const querySelector = document.querySelectorAll('li.js');
        //console.log(querySelector)
        //마찬가지로 배열의 값을 가져온다. 
        for (const e of querySelector) {
            console.log(e)
            //배열의 값을 가져와서 innerHTML에 접근한다음 값을 넣는다.
            e.innerHTML = e.innerHTML + "입니다."
        }

노드

HTML DOM은 노드라고 불리는 계층적 단위에 정보를 저장
노드 트리는 노드들의 집합이며 노드간의 관계를 보여줌

노드의 종류

문서 노드(document node) : 문서 전체를 나타내는 노드
요소 노드(element node) : HTML 요소는 요소 노드이며 속성 노드를 가질 수 있는 유일한 노드
속성 노드(attribute node) : HTML 요소의 속성은 속성 노드이며 요소 노드에 관한 정보를 가지고 있음
텍스트 노드(text node) : HTML 문서의 모든 텍스트는 텍스트 노드
주석 노드(comment node) : 모든 주석은 주석 노드

노드간의 관계

parentNode : 부모노드
childNodes : 자식 노드 리스트
firstchild : 첫번째 자식 노드
lastchild : 마지막 자식 노드
nextSibling : 다음 형제 노드
previousSibling : 이전 형제 노드

	   const gnb = document.getElementById('gnb')
            //gnb 밑으로 다모여
            console.log(gnb)

            //gnb 니 부모는 누고? div인데예?
            console.log(gnb.parentNode)

            //gnb 니 밑으로 좌우로 정렬, 모보던 놈도 껴있네?, 넌 요소가 아니잖아!
            //childNodes : 비요소 노드들도 포함
            console.log(gnb.childNodes)
            //ul 뒤에 숨어 있던 놈도 알 수 있다.
            console.log(gnb.childNodes[1].childNodes[1])

            //gnb 니 밑에 요소 데려와
            //children : 요소노드들만 담겨있져
            console.log(gnb.children)
            //하지만 아래처럼 접근하면 비요소 노드도 꺼낼 수 있지!
            console.log(gnb.children[0]) // ul 요소
            //console.log(gnb.children[0].nextSibling) // 비요소 노드 포함
            console.log(gnb.children[0].nextElementSibling) // 다음 요소 노드
            //ul뒤에 숨어있던 녀석 나와라! 
            console.log(gnb.children[0].children[1].nextElementSibling)
            console.log(gnb.children[0].firstChild) //text 노드
            console.log(gnb.children[0].firstElementChild) //첫번째 요소노드

노드 추가

appendChild()
새로운 노드를 해당 노드의 자식 노드 리스트 맨 마지막에 추가
insertBefore()
새로운 노드를 특정 자식 노드 바로 앞에 추가
insertData()
새로운 노드를 텍스트 데이터에 새로운 텍스트로 추가

<body>
    <h2>노드추가</h2>
    <p id="item1">Javascript</p>
    <p id="item2">TypeScript</p>
    <hr>
    <div id="list">
        <p id="backend">node.js</p>
        <p>HTML</p>
        <p>CSS</p>
    </div>
    <p id="text">지금 시간은 오후 4시 7분입니다.</p>
    <hr>
    <button onclick="appendNode()">노드추가1</button>
    <button onclick="insertNode()">노드추가2</button>
    <button onclick="appendText()">텍스트추가</button>
</body>

	    const appendNode = function() {
                //list 태그를 가져오고, 이 태그도 아래 자식들이 있다.
                const parent = document.getElementById('list')
                console.log(parent)
                //item1 Id 명을 가진 태그도 가져와서
                const newItem = document.getElementById('item1')
                //list태그에 맨 아래에 newItem을 붙인다. 
                parent.appendChild(newItem)
            }
            //insertNode 명을 가진 함수를 만든다.
            const insertNode = function () {
                
                //list 태그를 가져오고, 이 태그도 아래 자식들이 있다.
                const parent = document.getElementById('list')
                //p태그를 가져온다. list의 자식노드
                const backend = document.getElementById('backend')
                //item1 Id 명을 가진 태그도 가져와서
                const newItem = document.getElementById('item2')
                //item2이라는 노드를 list의 자식노드의 앞에다가 붙인다.
                parent.insertBefore(newItem, backend)
            }
            //appendText라는 함수를 만든다.
            const appendText = function(){
                //text라는 id를 가진 태그의 첫번째 자식노드(text를 의미함)
                const text = document.getElementById('text').firstChild;
                console.log(text)
                //text에다가 첫번째 매개변수는 넣고자하는 위치 2번째 매개변수는 들어가고자 하는 값을 말함
                text.insertData(0, " 집에 가고싶은 ")
            }

노드 생성

createElement()
새로운 요소 느드를 만든다
createAttribute()
새로운 속성 노드를 만든다
createTextNode()
새로운 텍스트 노드를 만든다

<body>
    <h2>노드의 생성 </h2>
    <p id="el">새로운 문장이 이 문장 앞에 추가됨</p>
    <p id="attr">이 단락에 새로운 속성이 생성됨</p>
    <p id="text"></p>

    <button onclick="createNode()">요소노드생성</button>
    <button onclick="createAttr()">속성노드생성</button>
    <button onclick="createText()">텍스트노드생성</button>
</body>

const createNode = function(){
        //id가 el인 놈을 선택
        const elNode = document.getElementById('el');
        //새롭게 만들 엘리먼트 이름을 설정함
        const newNode = document.createElement('p');
        //새롭게 만들 엘리먼트의 innerHTML 을 만듦
        newNode.innerHTML = '<b>✈</b><input></input>';
        //body태그에 insertBefore로 새로만들 태그를 el 앞에다가 만든다.
        document.body.insertBefore(newNode,elNode);
    }
    const createAttr = function(){
        //attr라는 id를 가진 놈을 선택
        const attr = document.getElementById('attr')
        //속성을 만드는데 속성 이름을 style로 만들어 style 속성을 만든다. 
        //그렇담 name이나 class 속성도 가능할까? 당근 가능하다.
        const nameAttr = document.createAttribute('name')
        nameAttr.value = "attr;"
        attr.setAttributeNode(nameAttr)
        const newAttr = document.createAttribute('style');
        //스타일 내용을 직접적어줘야하는 귀찮음... 어디 뭐 편한 기능없나? 후..
        newAttr.value = "color:#fff; background-color:black;"
        //attr 엘리먼트 속성에 newAttr value를 때려 박는다. 
        attr.setAttributeNode(newAttr)
    }

    const createText = function(){
        //text id를 선택함
        const textNode= document.getElementById('text');
        //간단하게 Text만 추가할 때 편하겠다!
        const newText = document.createTextNode('🎄🎋🎉🎈🎀🎁');
        textNode.appendChild(newText);
    }

노드 제거

removeChild()
- 자식 노드 리스트에서 특정 자식 노드를 제거
- 성공적으로 노드가 제거되면 제거되는 노드가 리턴
removeAttribute()
- 속성 제거

<body>
    <h2>노드 제거</h2>
    <div id="list">
        <p>HTML</p>
        <p id="item">CSS</p>
        <p id="js" style=" width : 100px; background-color: rgb(245, 214, 37); color: white; text-align: center;">Javascript</p>
        <p>Typescript</p>
    </div>
    <button onclick="removeNode()">요소노드삭제</button>
    <button onclick="removeAttr()">속성노드삭제</button>
</body>

  //removeNode 라는 이름의 함수를 만든다.
    const removeNode = function(){
        // 우리는 부모요소를 선택하고 자식노드 통채로 삭제할 것이다. 
        const parent = document.getElementById("list") // 얘는 부모요소
        const removeItem = document.getElementById("item") // 얘는 자식 요소
        //부모요소의 자식 요소를 삭제한다. 가슴이 아픔...
        const result = parent.removeChild(removeItem) 
        //제거된 노드의 마지막을 보고싶다..
        console.dir(result)
    }
    //removeAttr라는 함수를 만든다.
    const removeAttr = function(){
        // 속성이 잔뜩 들어있는 요소를 선택하고 이 요소 속성을 없앤다. 
        const js = document.getElementById('js')
        //bye bye style..
      js.removeAttribute("style")
    }

노드 복제

cloneNode()
기존에 존재하는 노드와 동일한 새로운 노드를 생성하고 리턴
매개값으로 true를 넘기면 복제되는 노드의 모든 속성과 자식노드고 같이 복제
false를 넘기면 속성노드만 복제하고 자식노드는 복제하지 않는다.

<body>
    <h2>노드복제</h2>
    <div id="item">
        <h3>복제된 아이템</h3>
    </div>
     <div id="list">
         <p>HTML</p>
         <p>CSS</p>
         <p>Javascript</p>
         <p>Typescript</p>
     </div>
     <button onclick="cloneElementTrue()">노드복제 true</button>
     <button onclick="cloneElementFalse()">노드복제 false</button>
</body>

//clone True를 인자로 넘겨주어 복제할 자식까지 모두 가져온다.
    const cloneElementTrue = function(){
        //복제해서 붙일 부모요소
        const parent = document.getElementById("list")
        //복제할 요소 
        const orginItem  = document.getElementById("item")
        //자식요소까지 모두 복제함
        const cloneItem = orginItem.cloneNode(true);
        //붙일 요소의 자식요소로 복제된 요소를 붙인다. 
        parent.appendChild(cloneItem)
    }
    //false로 복제하면 자식요소를 제외하고 가져온다. 가져오는 대상에 스타일을 설정해서 보기쉽게 했다 
    const cloneElementFalse = function(){
        const parent = document.getElementById("list")
        const orginItem  = document.getElementById("item")
        const cloneItem = orginItem.cloneNode(false);
        parent.appendChild(cloneItem)
    }

폼 객체

    <form id="regForm" name="myForm">
        <input type="text" name="userid" id = "id">
    </form>

폼의 접근

const frm = document.getElementById("regForm");
const frm = document.myForm;

input 태그 접근

document.myForm.userid
document.myForm.elements[0]
document.myForm.elements['userid']
document.getElementById("id")

<body>
    <h2>폼 객체</h2>
    <!-- 폼 객체에는 name으로 접근이 가능하다. -->
    <form name="frm1">
        <input type="search" name="search" placeholder="검색어를 입력하세요" ><br>
        <input type="submit" value="확인">
    </form>
    <hr>
    <form name="frm2">
        <input type="text" name="userid" id="id" placeholder="아이디를 입력하세요"><br>
        <input type="password" name="userpw" id="pw" placeholder="비밀번호를 입력하세요"><br>
        <input type="submit" value="확인">
    </form>
</body>

  // document에 폼 객체 이름으로 접근한다.
        //frm1에 접근한거임 
        const frm1 = document.frm1;
        console.log(frm1)
        // frm2에 접근한거임
        const frm2 = document.frm2;
        //frm1의 하위객체로 또 다른 name에 접근가능하다.
        console.log(frm1.search.placeholder)
        //이렇게 직접 바꿀 수도 있다.
        frm1.search.placeholder = "바꿔주삼"
        console.log(frm1.search.placeholder)
        //마찬가지로 해당 value를 직접 바꿀수 있다. 
        frm2.userid.value = "apple"

        //document.forms : 문서에 있는 form들을 다 가진 배열
        //document.forms[1] : 문서에 있는 form들 중 두번째 form
        //document.forms[1][1] : 문서에 있는 form들 중 두번째 form안의 두번째 input

        //forms는 document에 생성된 form들을 말한다. forms[1]은 frm2임.
        //frm2를 보면 두번째 요소가 input으로 [1][1]로 접근하면 input태그 - 비밀번호에 접근 가능하다!
        console.log(document.forms[1][1].placeholder)
        //객체로 접근하는 방법으로 키값을 직접 쓰는 것임. 아래처럼 쓸수도 있다. 대신 key값은 문자열로 작성해야함
        console.log(document.forms['frm2'].elements['userid'])
        //form으로 접근안해도 객체형태로 id에 접근가능 
        console.log(document.getElementById('id').value)

이강민

AllTimeDevelop

이전 포스트

[강의]Javascript - 프로토타입, Math객체, String객체, Date객체, window 객체, document객체

다음 포스트

[강의]Javascript - document객체, 노드, 폼 객체, 폼의 접근, input 태그 접근

[강의]Javascript

document 객체

노드

노드의 종류

노드간의 관계

노드 추가

노드 생성

노드 제거

노드 복제

폼 객체

폼의 접근

input 태그 접근

[강의]Javascript - 프로토타입, Math객체, String객체, Date객체, window 객체, document객체

[강의]Javascript - 정규표현식, 이벤트, 이벤트 타겟, 이벤트 객체, 이벤트 전파, 이벤트 전파 방지

0개의 댓글