JavaScript

카테고리 없음
JavaScript - html을 사용한 실습 (노드)

큐트아리 2023. 11. 5. 18:25
오늘은 노드를 사용해 실습해보겠습니다.
노드
node.js
HTML
CSS
React
현재 시간은 오전 10시 30분입니다
< 코드 >
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>노드</title>
    <script> 
        // 윈도우.onload는 싹다 읽고 실행하고싶을때 쓰는 애지만 얘는 호이스팅되는 애라 필요없음
        function appendNode(){
            const parent = document.getElementById('list')
            console.log(parent)
            const newItem = document.getElementById('item1')
            console.log(newItem)
            // list div에 item을 붙이기
            parent.appendChild(newItem)
            // <h3 id="item1">JavaScript</h3>이 위로 올라감
        }

        function insertNode(){
            const parent = document.getElementById('list')
            const backend = document.getElementById('backend')
            // item2를 선택해서 backend 앞에 넣기
            const newItem = document.getElementById('item2')
            parent.insertBefore(newItem,backend)
        }

        function appendText() {
            // 텍스트 가져오기
            const text = document.getElementById('text').firstChild
            console.log(text) // text.insertData가 적용되고 랜더링이 적용되고나서 이게 한번더 찍혀서 결과값이 현재 시간은 아주아주 피곤한 월요일 오전 10시 30분입니다가 나옵니다
            // 현재 시간은 오전 10시 30분입니다를 수정하기
            text.insertData(7,'아주아주 피곤한 월요일 ') 
            //console.log(text)
        }
        function createNode(){
            const newItem = document.getElementById('item1')
            const newNode = document.createElement('p') // 가상으로 p태그 만들어달라는 소리
            newNode.innerHTML = '<b>😘새로운 요소가 나타났다</b>' //innerHTML = <p>여기에HTML넣겠다</p>
            // newNode.innerHTML = HTML 요소와 텍스트 삽입 
            // newNode.innerText = 텍스트만 삽입
            document.body.insertBefore(newNode,newItem) // body안의 newItem앞에 newNode생성
        }
        function createAttr(){
            const newItem = document.getElementById('item2')
            const newAttr = document.createAttribute('style') // style 속성생성
            newAttr.value = 'color:red; background-color:gold'
            newItem.setAttributeNode(newAttr)
        }

        function createText(){
            const textNode = document.getElementById('ct')
            const newText = document.createTextNode('아리바보는 냥냥이')
            textNode.appendChild(newText) // p태그 안에다가 이걸 추가하면됨
        }
        function removeNode(){
            const parent = document.getElementById('list')
            const removeItem = document.getElementById('backend')
            const result = parent.removeChild(removeItem)
            console.log(result)
        }
        function removeAttr(){
            const newItem = document.getElementById('item2')
            newItem.removeAttribute('style')

        }
        function cloneElement(){
            const parent = document.getElementById('list')
            const originItem = document.getElementById('cl')
            parent.appendChild(originItem.cloneNode(true)) // True는 자식까지 복사하란 의미
        }
    </script>
</head>
<body>
    <h2 id="cl">노드</h2>
    <div id="list">
        <p id="backend">node.js</p>
        <p>HTML</p>
        <p>CSS</p>
    </div>
    <p id='item2'>React</p>
    <h3 id="item1">JavaScript</h3>
    <hr>
    <p id="text">현재 시간은 오전 10시 30분입니다</p>
    <hr>
    <button onclick="appendNode()">노드추가1</button>
    <button onclick="insertNode()">노드추가2</button>
    <button onclick="appendText()">텍스트노드추가</button>
    <hr>
    <p id="ct"></p>
    <hr>
    <button onclick="createNode()">노드생성</button>
    <button onclick="createAttr()">속성노드생성</button>
    <button onclick="createText()">텍스트노드생성</button>
    <hr>
    <button onclick="removeNode()">노드삭제</button>
    <button onclick="removeAttr()">속성노드삭제</button>
    <hr>
    <button onclick="cloneElement()">노드복제</button>


</body>
</html>