DOM APIs

html 문서 전체는 document 객체로 가져온다. 예컨데, document.title은 웹 문서 및 탭의 제목을 가리키는데, 그때 그때 새로운 메시지 등을 알리는데 사용할 수 있다 ← 이 문단에 마우스를 올리고 브라우저 창 제목표시줄의 현재 탭 제목을 보세요..

                                    
                                        const doc_title= document.title // 현재 문서의 제목을 변수로 저장한다

                                        document.querySelector('#title_change').addEventListener('mouseenter', () => document.title='다시 오셨네요 ^^'); // 마우스를 올리면; 문서 타이틀을 변경한다
                                        document.querySelector('#title_change').addEventListener('mouseleave', () => document.title= doc_title); // 마우스를 내리면; 다시 원래 제목을 넣어준다
                                    
                                

☞ 여기서 <p> 태그 영역 전체는 p 요소 노드가 되며, 그 내부의 class= "para" 부분은 속성 노드, 텍스트 영역 부분은 텍스트 노드가 된다 ← html 태그의 시작 및 끝 부분 공백은 제외하고, 각 태그 앞/뒤의 연속적인 공백 문자는 '빈 노드'로 생성된다!

➥ 노드는 DOM 트리의 계층 구조상 지위만 아니라, 다른 노드를 기준으로 하는 위치로도 참조된다. 우선, Root 는 DOM 트리의 최상위 노드를 말하는데, html 문서에서의 최상위 노드는 언제나 html 노드이다. Child 는 현재 노드 밑 단계에 속한 노드들(= 자식 요소들)을, Parent 는 현재 노드를 포함하고 있는 상위 노드(= 부모 요소)를 가리킨다. 한편, Sibling 은 현재 노드와 동일한 단계에 위치하는 노드들(= 형제 요소들)을, Descendant 는 DOM 트리에서 하위 수준에 포함된 노드들(= 후손 요소들)을 가리킨다

✓   각 요소들은 . 연산자에 의한 체인 연결로 참조할 수 있지만, 요소 노드 사이에 있는 공백 노드의 존재로 인해 다루기에 불편하다. 그에 공백 노드를 제외한 요소만의 참조를 위한 속성도 준비되어 있지만(예컨대, 부모요소.children), 역시 불편하여 실상은 요소의 id 나 class 를 쓰게 된다!

                                    
                                        const el= document.querySelector('#my_container')

                                        for (const child of el.children) { // el 내부 모든 자식 요소들로 루프를 돈다 ← children은 (텍스트 노드 등은 제외하고)요소 노드만을 대상으로 한다!
                                            console.log(child.tagName) // el에 포함된 모든 태그명을 출력한다
                                        }
                                    
                                

☞ NodeList 컬렉션은 유사배열 객체이므로 for 문이나 forEach() 메서드로 반복하거나, Array.from() 메서드를 써서 배열로 변환할 수도 있다. 나아가, entries(), values(), keys() 등의 메서드들도 사용할 수 있다!

✓   참고로, document.querySelectorAll()은 호출 시점에서의 정적 노드 리스트를 가져오는 반면, 부모요소.children은 돔의 변경 사항을 실시간으로 반영한다. 따라서, 노드 리스트에서 순회하거나, 그 길이(length)를 가져와야 할 때는 이 점에 유의해야 한다!

현재 시각은?

                                    
                                        let time_pic= document.querySelector('#on_click_button')

                                        function cPic() { // 이벤트 처리함수
                                            let d= new Date()
                                            alert("현재 시각: " + d.toLocaleString())
                                        }
                                    
                                        time_pic.onclick= cPic // Click 이벤트로 cPic() 함수를 호출한다
                                    
                                

☞ 이벤트 처리함수 호출 시에는 일반 함수 호출과는 달리 함수명 뒤에 ()를 붙이지 않는다 ← 뒤에 괄호를 붙이게 되면; 이벤트 호출 버튼을 클릭하기 전에 먼저 함수 코드가 실행되어버린다!

✓   참고로, 최근에는 이 on 이벤트보다는 이벤트 리스너 를 쓰는 것이 일반적이다. 타겟.addEventListener()는 같은 리스너에 대해 다수의 핸들러 함수를 등록할 수 있다는 점, 제거 시에도 짝이 되는 removeEventListener()가 존재한다는 점, 같은 이벤트 타입에 대해 손쉽게 복수의 이벤트 핸들러 함수를 등록할 수 있다는 점 등에서 on 이벤트에 비해 보다 유용하다!

* 경주 남산 날씨정보) 약간 흐림 (현재 23도) 추가정보 보기

➥ 대상요소.insertAdjacentHTML('삽입위치', 'html코드')는 주어진 html코드 를 대상요소를 기준으로 하는 삽입위치 값에 맞추어 삽입한다:

✓   사용 중인 모든 요소를 없애고 새로 파싱하는 innerHTML()과는 달리, 이미 사용 중인 요소는 제외하고 새로 추가되는 요소에 대해서만 작업한다는 점에서 차이가 있는데, 당연히 돔 갱신 속도도 더 빠르다 ← 참고로, 일반 텍스트는 insertAdjacentText() 메서드를 쓸 수도 있지만, textContent 속성을 쓰는 것이 쉽고 간결하다!

                                    
                                        const log_var= document.querySelector('#log') // 조작하려는 대상요소(#log)에 대한 참조변수 log_var
                                    
                                

* 아래서, html 코드로 <p>기존 p 문단</p> 요소를 작성했습니다:

기존 p 문단

** 이어서, 위 <p> 요소에 <p id="log_element_p">기존 p 문단</p>로 id 를 넣어주고, 다음 스크립트 코드를 작성해주면; 위 <p> 요소 안 텍스트가 아래와 같이 바뀌게 됩니다!

기존 p 문단

                                    
                                        const log= document.querySelector('#log_element_p')
                                        log.textContent= '기존 p 문단의 내용을 변경함!'
                                    
                                

                                                    
                                                        const listEl= document.querySelector('.log_element_list li:nth-child(2)')
                                                        listEl.textContent= '두번째 li의 값 변경함!'
                                                    
                                                

* 아래, 리스트들을 각각 클릭해보세요..

• 리스트1
• 리스트2
• 리스트3

                                    
                                        document.querySelectorAll('.ex_list_item').forEach((targetBox) => { // forEach() 사용 가능!
                                            targetBox.addEventListener('click', () => alert(`${targetBox.textContent}`))
                                        })
                                    
                                

** 위 스크립트 코드의 querySelectorAll('.ex_list_item') 대신에 getElementsByClassName('ex_list_item')를 쓰게되면; forEach() 메서드는 사용할 수 없고, 아래와 같이 for 문을 써야하는데, 여기서는 Click 이벤트 또한 사용할 수 없다!

                                    
                                        const box_list= document.getElementsByClassName('ex_list_item')

                                        for (let i=0; i < box_list.length; i++) { // for문 사용 ← forEach()는 사용할 수 없다!
                                            console.log(box_list[i].textContent + " ") // 여기서 클릭 이벤트는 쓸 수 없다!
                                        }
                                    
                                

☞ querySelectorAll()에 의해 반환되는 노드 리스트는 호출 시점에서의 정적 요소들인 반면, getElementByID() 등에서의 노드 리스트는 동적으로 바뀌는 요소들을 반영하므로 리스트를 순회하면서 요소를 추가하거나 리스트의 길이를 알아야 하는 경우 등에는 노드 리스트 객체의 정적 복사본을 만들어 순회해야 한다!

✓   특별한 이유가 없다면; querySlector() 및 querySlectorAll()을 쓰는 것이 알아보기 쉽고, 이점도 많다. 나아가, querySlector('#id')는 getElementByID('id명')과는 달리, Document 객체만 아니라 Element 객체에서도 사용할 수 있다!

• 서울 남산
• 경주 남산
• 강릉 남산

• 서울 남산
• 경주 남산
• 강릉 남산

                                    
                                        const namsans= document.querySelectorAll("#ko-namsans li")
                                        const log1000= document.querySelector('.silla1000-log')
                                    
                                        for (const namsan of namsans) {
                                            if (namsan.matches(".silla_1000")) { // silla_1000 클래스를 가진 요소를 찾으면;
                                                log1000.textContent= `${namsan.textContent}은 신라 천년의 보고!` // 해당 요소에 silla1000-log 클래스를 가진 요소의 값으로 넣어준다!
                                            }
                                        }
                                    
                                

                                    
                                        const article= document.querySelector("article") // article 요소를 참조하는 변수 article

                                        const para= document.createElement("p") // 빈 p 요소를 생성한다
                                        para.textContent= "새로 만든 p 요소에 컨텐츠를 넣어줌" // 만들어진 p 요소에 텍스트를 넣어준다
                                        article.append(para) // 생성된 p 요소(와 텍스트)를 article 내부 맨 끝에 붙인다
                                    
                                

☞ 참고로, document.createTextNode('텍스트')는 텍스트 노드 를 생성하지만, 굳이 이것을 사용해야만 할 이유는 없다 ← 그 이유는 위 코드에서 스스로 확인해보십시오..

* 아래서, html 코드로 <ol> 리스트를 작성했습니다:

1. 리스트
2. 리스트
3. 리스트

** 이제, 아래 스크립트 코드를 작성해줍니다:

☞ 요소 노드만 아니라 텍스트 문자열도 가능한데, 이는 자동적으로 텍스트 노드로 생성된다!

*** <ol> 요소 맨 앞에 들어갈 <li> 요소는 스스로 작성해서 덧붙여주십시오.. 결과는?

1. 리스트
2. 리스트
3. 리스트

✓   부모요소.appendChild('자식노드')는 자식노드 를 부모요소 내부 맨 끝에 삽입하는데, 역시 현재로서는 굳이 쓸 이유가 없어진 구식이다!

* 아래서, html 코드로 제목 라인을 작성했습니다:

제 1장

** 이제, 아래 스크립트 코드를 작성해줍니다:

제 1장

                                    
                                        const introduce= "* 이 파트에서는 노드의 생성과 삽입, 삭제에 관해 살펴봅니다"
                                        const heading= document.querySelector("h5.h5_heading")

                                        heading.after(document.createElement('hr'), introduce)
                                    
                                

➥ 이전에 살펴본 부모요소.append/prepend()로는 자식 리스트 중간에 요소 노드나 텍스트 노드를 삽입할 수 없다. 그런 이유로, 이와 같이 기준으로 삼을 형제노드의 참조를 가져온 뒤, 그 앞이나 뒤에 삽입하는 것이다 ← 참고로, (요소 노드만 아니라)텍스트 노드를 기준점으로 삼는 것도 가능하다!

✓   참고로, 부모요소.insertBefore(새노드, 기준노드)는 부모요소 내부의 기준노드 앞에 새노드 를 추가하는데, 요소.before/after()를 사용하는 것이 알기 쉽고, 더 유용하다!

                                    
                                        const meBox= document.querySelector('.box_me')

                                        meBox.remove() // meBox 자신을 제거한다
                                    
                                

* 먼저, <span> 요소를 만들고 클래스 값을 넣어줍니다: <span class="box_me1">Me</span>

이어서, 아래 스크립트 코드를 작성해줍니다: 결과는? Me

                                    
                                        const old_pBox= document.querySelector('.box_me1')

                                        const new_pBox= document.createElement('span')
                                        new_pBox.textContent= '새로운 Me'

                                        old_pBox.replaceWith(new_pBox) // old_pBox를 새로 생성한 new_pBox로 대체한다!
                                    
                                

➥ 부모요소.removeChild(자식노드)는 부모요소 내부 자식노드 를 제거하지만, 요소.remove()(로 스스로 요소 자신을 제거할 수 있는데) 굳이 어렵게 쓸 이유가 없다! 또한, 부모요소.replaceChild(새노드, 기존노드)는 부모요소 내부 기존노드를 제거하고 새노드로 대체하지만, 이 또한 요소.replaceWith(새노드)(로 스스로 요소 자신을 대체할 수 있는데) 굳이 어렵게 사용할 이유는 없다 ← 다만, 이전에 작성된 코드들에서는 자주 나오기에 코드 읽기를 위해 부가했습니다 ㅡㅡ;

✓   참고로, 요소 내부에 자식노드 가 존재하는지 여부는 요소.hasChildNodes()로 확인할 수 있다!

* 먼저, 복사하려는 텍스트 문단을 만들고, 이를 복사해서 넣어줄 <div> 박스를 만든다:

(복사하려는 텍스트)

                                    
                                        const introduce_1= document.querySelector('p.inter_p1')
                                        const heading_1= document.querySelector(".heading5")
                                    
                                        // heading_1 다음에 introduce_2를 복사해서 넣으려는 의도였지만..
                                        heading_1.after(introduce_1) // 기존에 존재하던 요소이기에, 이동이 된다!
                                    
                                

☞ 이 스크립트를 적용한 이후의 결과는? 아래를 보십시오:

(복사하려는 텍스트)

* 아래, <span> 요소(전부)를 복사해서 <p> 요소 박스 안에 붙여넣고자 한다:

☞ 이 스크립트를 적용한 이후의 결과는? 아래를 보십시오:

➥ 다른 문서에 있는 노드를 복사해올 때는; document.importNode(가져올 노드[, true]) 메서드를 사용한다: var clone_node= document.importNode(가져올 노드, true); ← true 옵션을 주면; 하위 자식요소들까지 모두 포함한다

• 임시 <ul> 및 <li>

* 이제, 아래 스크립트 코드를 작성하여 넣어주면; 생성되는 DocumentFragment의 자식노드들은 모두 (한번에)DOM으로 이동하고, 스크립트에는 빈 DocumentFragment만 남게된다!

                                    
                                        const list= document.querySelector("#fruits_list")
                                        const fruits= ["배", "사과", "감귤"]

                                        const fragment= new DocumentFragment()

                                        fruits.forEach((fruit) => {
                                            const li= document.createElement("li")
                                            li.textContent= fruit
                                            fragment.appendChild(li)
                                        });

                                        list.appendChild(fragment)
                                    
                                

☞ 이 스크립트를 적용한 이후의 결과는? 아래를 보십시오:

✓   DocumentFragment는 일반 요소노드처럼 사용할 수 있지만, 활성화된 문서 트리구조의 일부가 아니므로 내부 트리를 변경해도 문서에 아무런 영향을 주지 않으며, 문서에 삽입될 때는 (자신이 아니라!)자식요소들이 (모두 일거에!)돔으로 이동하기에 리플로우도 발생하지 않아 성능상 이점이 크다!

                                    
                                        function setTheme(name) { /* 스타일시트에 Link 생성 및 삽입하는 함수 */
                                            // <link href="themes/name.css" rel='stylesheet'>를 생성하여 스타일시트 파일을 불러온다
                                            let link= document.createElement('link')
                                            link.id= 'theme'
                                            link.rel= 'stylesheet'
                                            link.href= `themes/${name}.css`

                                            // id가 [theme]인 기존 링크를 찾아 교체 또는 삽입한다
                                            let currentTheme= document.querySelector('#theme')
                                            if (currentTheme) currentTheme.replaceWith(link) // 링크 교체
                                            else document.head.append(link) // 링크 삽입
                                        }
                                    
                                

                                        
                                            <script id="my-data" type="text/x">
                                                "userId": "jcunicom", "userName": "Kjc"
                                            </script>
                                        
                                    

                                        
                                            const me_data= document.querySelector("#my-data").text

                                            console.log("사용자 정보:", me_data); // 사용자 정보: "userId": "jcunicom", "userName": "Kjc"
                                        
                                    

✓   src 속성이 없는 인라인 <script> 요소에는 text 속성이 있고, 그 안의 컨텐츠는 절대 브라우저에 표시되지 않는다(꺽쇠 및 & 기호 또한 html 파서에 의해 분석되지 않고 그대로 표시된다). 이러한 특징은 <script> 요소를 애플리케이션에 사용할 임의의 텍스트 데이터를 안전하게 보관해둘 장소로 활용할 수 있도록 해준다!

                                        
                                            <!-- 웹서버에 보관된 데이터 -->
                                            <script id="data" type="application/json">
                                                { "userId": "jcunicom", "userName": "Kjc" }
                                            </script>
                                        
                                    

                                        
                                            const user_info= JSON.parse(document.querySelector("#data").text)

                                            console.log("사용자 정보:", user_info) // 사용자 정보: { userId: 'jcunicom', userName: 'Kjc' }
                                        
                                    

                                        
                                            <script type="module" src="components/search-box.js"></script>
                                        
                                    

✓   웹 브라우저는 컴포넌트가 정의되기 전에 웹 컴포넌트를 만날 경우, 범용 HTMLElement 노드를 DOM 트리에 추가해둔 뒤, 나중에 커스텀 엘러먼트가 정의되면; 이를 업그레이드하게 된다. 만약, 웹 컴포넌트에 자식요소가 존재한다면; 자식요소는 컴포넌트가 정의되기 전에는 부정확하게 표시되는데, 이 경우, Css를 써서 숨겨줄 수 있다:

                                    
                                        search-box:not(:defined){
                                            display: inline-block; width: 300px; height: 50px; opacity: 0;
                                        }
                                    
                                

☞ <search-box> 컴포넌트가 정의되기 전에는 숨기되, 위와 같이 최종 레이아웃과 크기를 미리 확보해두면; 요소가 생성되면서 주변 컨텐츠를 다시 렌더링해 성능이 떨어지는 일을 막을 수 있다!

░ 웹 컴포넌트를 직접 작성하는 것은 어렵습니다. 그런 연유로 두서없이 간략한 소개만 했습니다. 나중에라도 필요해지시면; 웹 컴포넌트 작성을 도와주는 Lit.dev 라이브러리를 써보십시오..

클릭 - 목없는 부처님

                                    
                                        <button id="new_para"> 클릭 - 목없는 부처님 </button>
                                    
                                

                                    
                                        let txt_para= document.querySelector('#new_para')

                                        txt_para.addEventListener('click', function() { // 클릭 이벤트가 발생하면;
                                            const attr= document.createAttribute('class') // 'class' 속성을 생성하고,
                                            attr.value= 'ex_box rounded' // 그 속성에 값을 넣는다
                                            new_para.setAttributeNode(attr) // 만든 attr 속성(과 그 값)을 new_para 요소에 넣어준다

                                            const img_new= document.createElement('img') // img 요소를 만들어,
                                            img_new.setAttribute('src', '_images/목없는부처님-small.jpg') // src 속성을 만들고, 값을 넣어준다
                                            new_para.append(img_new) // new_para 내부 맨 뒤에 삽입한다
                                        });
                                    
                                

✓   참고로, 요소에 특정 속성 이 존재하는지 여부는 요소.hasAttribute("속성") 메서드로 확인할 수 있다!

                                        
                                            const para= document.querySelectorAll("div p")[0]

                                            const attrs= para.attributes // para의 모든 속성들을 NamedNodeMap 객체로 가져온다
                                            console.log(attrs) // NamedNodeMap {0: class, 1: style, length: 2}
                                        
                                    

➥ NamedNodeMap 객체는 요소 객체가 지닌 속성과 그 값이 담긴 읽기전용 유사배열 객체로서, 요소.attributes.속성명.value로 그 값 에 접근할 수 있다:

                                    
                                        <button type="button" value="클릭!">버튼</button>
                                    
                                

                                    
                                        const btn= document.querySelector('button')

                                        console.log(btn.attributes.type.value, btn.attributes.value.value) // button 클릭!
                                    
                                

                                    
                                        const attr= document.querySelector('[data-my-name]')

                                        // DOMStringMap은 dataset 속성을 통해 접근할 수 있다:
                                        attr.dataset // DOMStringMap {myName: 'Kjc'}

                                        // data- 속성값 가져오기 1. 'data-' 뒤의 속성 이름 부분을 사용해 속성값을 가져온다
                                        attr.dataset.myName // Kjc ← 이름은 카멜케이스 방식으로 변환하여야 한다!

                                        // data- 속성값 가져오기 2. 완전한 html 속성명과 getAttribute()를 사용해 속성값을 가져온다
                                        attr.getAttribute('data-my-name') // Kjc
                                    
                                

여기에 마우스를 올리세요..

                                    
                                        .change_color_red { color: red }
                                        .change_color_green { color: green }
                                    
                                

☞ 기존에 설정되어 있던 속성들은 완전히 비워지고(위 html 코드의 기존 클래스값들은 다 제거된다!) 새로이 추가하는 값만 들어간다!

여기 클릭해주세요..

☞ classList 속성은 현재의 살아 있는 상태에 반응한다!

✓   요소의 classList에 특정 클래스 가 있는지 여부는 요소.classList.contains('클래스') 메서드로 확인할 수 있다!

                                    
                                        const pic_style= document.querySelector('#color_change')
                                        const ele_style= document.getElementById("box-style_ex")
                                    
                                        pic_style.onclick= () => ele_style.style.backgroundColor= ''; // 인라인 스타일 속성(배경색) 설정
                                    
                                

                                    
                                        // [요소1]의 인라인 스타일을 [요소2]의 인라인 스타일에 복사하기:
                                        요소2.setAttribute("style", 요소1.getAttribute("style"))

                                        // CSSStyleDeclaration 객체의 cssText 속성 사용하기:
                                        요소2.style.cssText= 요소1.style.cssText
                                    
                                

                                            
                                                function tp_pos(tooltip, x, y) { // 툴팁 표시 및 위치(x, y) 설정 함수
                                                    tooltip.style.display= "block" // 따옴표로 묶어주어야 한다!
                                                    tooltip.style.position= "absolute"
                                                    tooltip.style.top= `${y}px` // 숫자도 따옴표로 묶고, 단위도 반드시 써주어야 한다!
                                                    tooltip.style.left= `${x}px`
                                                }
                                            
                                        

➥ style 속성으로는 웹 브라우저에 의해 계산된 스타일 값을 확인할 수 없는 경우가 있는데, window 객체의 getComputedStyle(요소[, '가상요소']) 메서드를 쓰면; 인자로 전달받은 요소의 모든 Css 속성값을 담은, 요소의 스타일이 변경 될 때마다 실시간으로 업데이트되는 살아있는 상태의 CSSStyleDeclaration 객체를 가져올 수 있다:

이 박스의 가로/세로 크기 는 입니다

✓   인라인 스타일로서의 CSSStyleDeclaration 객체와는 달리, 계산된 스타일로서의 CSSStyleDeclaration 객체는 읽기 전용이며, % 등의 크기 단위는 모두 px 로 변경되고, 색상값은 모두 rgb(a) 형식으로 표시된다. padding 같은 단축 속성 또한 각각의 방향별로 표시된다 ← 그외에도 많은 특이한 차이점들이 있어 실제로 사용하기에는 좀 혼란스러우니 참고하십시오 ㅡㅡ;

클릭하여 제 글자색을 바꿔주세요..

                                    
                                        let txt= document.querySelector('.click_me_color') // 이벤트 대상

                                        txt.addEventListener('click', function() { // 클릭 이벤트가 발생하면;
                                            txt.style.color= 'red' // txt의 글자색을 'red' 색으로 변경한다 
                                        });

                                        txt.addEventListener('click', function(e) { // 이벤트 객체 e를 매개변수로 전달하여 처리한다
                                            e.currentTarget.style.color= 'red' // e.currentTarget ← 발생한 이벤트가 등록된 DOM 요소
                                        });

                                        function setStyle() {
                                            this.style.color= 'red' // 이 this는 자신을 호출한 txt의 this임!
                                        }

                                        txt.addEventListener('click', setStyle); // 이벤트를 처리할 함수를 호출한다
                                    
                                

☞ 위 3가지 방식 모두 같은 결과를 가져온다!

1. 이벤트 핸들러 함수는 해당 이벤트에 관한 정보가 들어있는 이벤트 타입의 객체 하나만을 매개변수로 받는데(그 이름은 무엇이든 상관없다), 이 이벤트 객체는 발생한 이벤트 관련 다양한 정보가 저장된 프로퍼티와 이벤트 흐름을 제어하는 메서드들을 담고 있다:

클릭, Me

                                                    
                                                        #div_tile_container {
                                                            height: 135px; width: 100%;
                                                        } .div_tile_color {
                                                            height: 95px; width: 20%; float: left;
                                                        }
                                                    
                                                

                                                    
                                                        function random_num() {
                                                            return Math.floor(Math.random()*256); // 0 ~ 255 사이의 정수
                                                        }

                                                        function backgroundColor() {
                                                            const randomColor= `rgb(${random_num()}, ${random_num()}, ${random_num()})`
                                                            return randomColor;
                                                        }

                                                        const container_bgc= document.querySelector('#div_tile_container')
                                                        container_bgc.addEventListener('click', e => e.target.style.backgroundColor= backgroundColor())
                                                    
                                                

* 버튼을 클릭하여 메시지창을 닫은 뒤, 곧바로 다시 클릭해보고.. 마지막 버튼 클릭 이후 10초가 지난 이후에 다시 클릭해보세요..

버튼 클릭

                                            
                                                const btn= document.querySelector('.btn_click_remove')

                                                btn.addEventListener('click', function(e) { // 익명함수 이벤트 리스너
                                                    alert("버튼 클릭!")
                                                    e.removeEventListener('click', arguments.callee) // 이벤트 객체 자신(arguments.callee)을 호출하여 이벤트를 제거한다!
                                                });
                                            
                                        

                                                
                                                    const controller= new AbortController()
                                                    let btn= document.querySelector('.btn_click_rem')
                                                    
                                                    function random_num(number) {
                                                        return Math.floor(Math.random()*number);
                                                    }
                                                    
                                                    btn.addEventListener("click", function() {
                                                        const randomColor= `rgb(${random_num(255)}, ${random_num(255)}, ${random_num(255)})`
                                                        btn_click_cont.style.backgroundColor= randomColor
                                                    }, { signal: controller.signal }); // 이 이벤트 핸들러에 AbortSignal을 전달한다
                                                    
                                                    // .. 필요한 작업들 ← 중간에라도 원하던 일이 끝나면; 아래 코드로 점프한다 
                                                    
                                                    controller.abort() // 이 컨트롤러와 연관된 모든 이벤트 핸들러를 제거한다
                                                
                                            

                                    
                                        document.addEventListener('DOMContentLoaded', () => {
                                            const imgs= document.querySelectorAll('img')
                                        
                                            imgs.forEach((img) => {
                                                img.addEventListener('contextmenu', (e) => { // 이미지에서 마우스 우측 버튼이 클릭되면;
                                                    e.preventDefault() // 우측 버튼의 기본 기능인 단축메뉴 기능을 제거한다!
                                                    alert("마우스 우측버튼 사용 불가!")
                                                });
                                            });
                                        });
                                    
                                

☞ preventDefault()는 현재 이벤트가 발생한 요소의 기본 이벤트 동작을 중지한다 - 단, defaultPrevented 속성값만 true 로 바뀐 채 이벤트 전파는 멈추지 않는다!

갈 수 있게 해주세요.. 소소한 이야기 로 가기

                                                
                                                    document.addEventListener('이벤트 이름', 핸들러 함수, { // 옵션객체
                                                        capture: true, // 캡쳐링(기본값: false)
                                                        once: true, // 이벤트 한번 호출 후 자동 제거(기본값: false)
                                                        passive: true, // 이벤트 기본 동작 취소 불가(기본값: false)
                                                        signal // AbortSignal 연결 ← 지정한 AbortSignal 객체의 abort() 메서드를 호출하면; 이 옵션은 자동 제거된다!
                                                    });
                                                
                                            

* 아래, 각 영역별로 한번씩 클릭해보세요..

                                    
                                        const outbox_b= document.getElementById('outbox_bubble')
                                        const inbox_b= document.getElementById('inbox_bubble')
                                        const spanbox_b= document.getElementById('span_bubble')
                                    
                                        const area_box= [outbox_b, inbox_b, spanbox_b]
                                        area_box.forEach(box => {
                                            box.addEventListener('click', () => {
                                                alert(`${box.tagName}`)
                                            }, false); // 버블링: 기본값 false
                                        });
                                    
                                

☞ 위 스크립트에서 false (버블링: 기본값) 대신 true (캡쳐링) 값을 주어 버블링 대 캡쳐링의 차이를 확인해보십시오..

✓   3번째 인자로 true/false 값을 주는 것은 최근의 옵션객체 옵션 이전에 사용되던 방식인데, 여전히 (구버전 브라우저까지 포함하여, 공히)지원되는 '구식' 방식입니다!

자유게시판

1. 게시글
2. 게시글
3. 게시글
4. 게시글
5. ..

                                    
                                        const ul_lists= document.getElementById('ol_list_bubble')

                                        ul_lists.addEventListener('click', (e) => {
                                            alert("게시판 클릭함!")
                                            console.log(e.target.id) // gesi_id_1 ← 이벤트가 처음 발생했던 대상 DOM 요소(= li), ol로까지 버블링한다!
                                            // console.log(e.currentTarget.id) // ol_list_bubble ← 발생한 이벤트가 등록된 DOM 요소(= ol)
                                        });        
                                    
                                

☞ 이렇게 상위 요소 <ol>로 이벤트를 위임하면; <ol> 아래 각 <li>를 클릭할 때 이벤트 버블링을 통해 상위 요소인 <ol>에서 이벤트를 받아 제어할 수 있게 된다 ← 단, 이 경우 각 <li>별로 제어할 수는 없다!

➥ 이벤트 리스너는 html 요소를 포함한 모든 DOM 요소에 이벤트를 등록할 수 있을 뿐 아니라 여타 메서드를 활용하여 더욱 정밀하게 이벤트 전파를 제어할 수 있다. 예컨대, stopPropagation() 메서드는 현재 요소에서 이벤트를 끝내고 다음 단계로 이벤트가 전파되는 것을 막는다(단, 그 이벤트에 연결된 다른 이벤트 리스너들은 변함없이 동작한다). 한편, stopImmediatePropagation() 메서드는 모든 이벤트 핸들러를 즉각 정지시킨다!

                                    
                                        <button id="btn_this">this</button>
                                    
                                

                                    
                                        function Person(name) {
                                            this.name= name 
                                            this.sayHello= function() {
                                                alert("hello " + this.name) // hello
                                            }
                                        }
                                        const per= new Person('Kjc')

                                        const btn= document.getElementById('btn_this')
                                        btn.addEventListener('click', per.sayHello) // hello !
                                    
                                

☞ 호출받는 Person() 함수 내부 this 는 이벤트가 발생한 btn의 this 가 된다!

                                    
                                        // 방법 1: bind() 메서드로 this의 주체를 묶어주기
                                        btn.addEventListener('click', per.sayHello.bind(per)) // hello Kjc
                                    
                                

                                                    
                                                        class Counter_click {
                                                            constructor() {
                                                                this.clickedCount= 0 // 버튼 클릭 횟수

                                                                const btn= document.querySelector('.cli-button')
                                                                const clickedCountText= document.querySelector('.clickedCountText')

                                                                // btn.addEventListener('click', function() { // 일반 함수로 이벤트 리스너 정의
                                                                //     this.clickedCount += 1
                                                                //     clickedCountText.textContent= this.clickedCount // NaN ← 이 this는 이벤트 대상인 btn의 this이다!
                                                                // });

                                                                btn.addEventListener('click', () => { // 화살표 함수로 이벤트 리스너 정의
                                                                    this.clickedCount += 1 // 여기서 this는 Counter_click 클래스 내부를 참조한다!
                                                                    clickedCountText.textContent= this.clickedCount // 여기서 this는 Counter_click 클래스 내부를 참조한다!
                                                                });
                                                            }
                                                        }

                                                        new Counter_click()
                                                    
                                                

* 먼저, 이벤트를 전달받을 타깃 요소를 만들어준다:

이벤트를 전달받을 타깃 요소

** 다음, 이벤트를 전달받을 타깃 요소에 id 를 넣어주고(id="target-ele"), 아래 스크립트 코드를 작성해준다:

                                    
                                        const target_el= document.getElementById('target-ele') // 이벤트 타깃
                                        target_el.addEventListener('view', function(e) { // 이벤트 리스너 등록
                                            target_el.textContent= `이벤트 전달함!`
                                        });
                                        
                                        // 커스텀 이벤트 객체 생성(및 초기화)
                                        const evt_custom= new Event('view', { bubbles: false, cancelable: false });                                      
                                        target_el.dispatchEvent(evt_custom) // 만든 커스텀 이벤트를 타깃으로 전달한다
                                    
                                

이벤트를 전달받을 타깃 요소

✓   브라우저가 전송하는 이벤트는 이벤트 루프를 통해 비동기적으로 처리기들을 호출하지만, dispatchEvent()로 전달하는 이벤트는 처리기를 동기적으로(= 순서대로) 호출한다 - 즉, 모든 적합한 처리기의 호출과 반환이 끝나야 dispatchEvent() 역시 반환된다!

                                    
                                        const log_obj= document.querySelector('.p_para_obj')

                                        // CustomEvent 생성
                                        const evt_p= new CustomEvent("view", {
                                            bubbles: false, cancelable: false, detail: { name: "Kjc" }
                                        });
                                        
                                        // 적합한 이벤트 수신기 부착
                                        log_obj.addEventListener("view", (e) => log_obj.textContent= e.detail.name)
                                        
                                        // 이벤트 발송
                                        log_obj.dispatchEvent(evt_p) // Kjc
                                    
                                

☞ 이벤트 리스너에서는 e.detail.name 식으로 접근하여 값을 가져올 수 있다!

[새로고침]한 뒤, 5초간 기다리세요..

                                    
                                        const box_element= document.querySelector('#dispatch_box')

                                        box_element.addEventListener('user', () => {
                                            box_element.textContent= '자동 커스텀 이벤트 발생 !'
                                        });

                                        setTimeout(() => {
                                            box_element.dispatchEvent(new Event('user')) // 자동 이벤트 생성
                                        }, 5000);
                                    
                                

                                    
                                        const formElement= document.querySelector('#form-submit')
        
                                        function handleSubmit(event) {
                                            const isYes= confirm('이 내용으로 제출하시겠습니까?')
                                            if (isYes === false) { event.preventDefault() } // 전송 취소
                                        };

                                        formElement.addEventListener('submit', handleSubmit)
                                    
                                

☞ 폼 전송 체크는 <form> 요소를 참조해야 한다!

입력폼 이벤트 예)

Keydown 이벤트 예)

☞ keyup 이벤트 외에 keypress, keydown 등으로 바꿔서도 확인해보십시오..

Keyup 이벤트 예)

터치 이벤트 예)

탭 전환 이벤트 예)

✓   이 Page Visibility API는 사용자가 페이지를 보고 있지 않은 한 다음 슬라이드로 넘어가지 않아야 하는 이미지 캐러셀이 있는 사이트, 특정 정보에 대한 대시보드를 표시하는 애플리케이션이 페이지가 표시되지 않을 때 서버에 업데이트를 요청하고 싶지 않은 사이트, 페이지가 미리 렌더링 되는 시기를 감지하여 정확한 페이지 조회 수를 유지하려는 사이트, 디바이스가 대기 상태에 있을 때(예컨대, 절전모드로 전환하는 경우) 소리를 끄고 싶어 하는 경우 등에 유용하게 사용할 수 있다!

브라우저 창크기 변동 이벤트 예)

░ Css 좌표계에 관한 기본적 이해가 필요하시면; 본 Css 강좌의 Css 표준 좌표계 부분을 참조하십시오..

요소의 크기 및 위치정보 예)

➥ 반대로, 뷰포트에서 특정 좌표에 있는 요소가 무엇인지 알아야할 때도 있는데, 이때는 Document 객체의 elementFromPoint() 메서드를 사용할 수 있다: 원하는 x, y 좌표값(예컨대, 마우스 이벤트의 clientX, clientY 값)을 주어 이 메서드를 호출하면; 지정된 위치에 있는 Element 객체가 반환된다 ← 이 메서드의 의도는 해당 지점에서 가장 안쪽의(곧, 가장 깊이 중첩된) 요소 및 가장 위쪽의(곧, z-index 값이 가장 큰) 요소를 반환하는 것이다!

                                    
                                        window.addEventListener('scroll', () => {
                                            console.log('스크롤 작업: ', window.scrollX, window.scrollY)
                                        })
                                    
                                

☞ window.scrollX/scrollY(및 pageXOffset/pageYOffset)는 수평/수직으로 스크롤한 픽셀값, 곧 현재 뷰포트 좌상단 모서리의 (x, y) 좌표가 된다!

윈도우 창 스크롤 작업)

                                    
                                        let documentHeight= document.documentElement.offsetHeight // 문서 높이
                                        let viewportHeight= window.innerHeight // 뷰포트 높이

                                        // 마지막 페이지가 보이도록 스크롤한다
                                        window.scrollTo(0, documentHeight - viewportHeight)
                                    
                                

☞ 참고로, scrollTo(x, y)는 scroll(x, y)와 사실상 같은 움직임을 보인다!

                                    
                                        if (window.scrollY) { // y축 방향으로 스크롤했다면;
                                            window.scroll(0, 0) // 스크롤을 문서의 (0, 0) 위치로 재설정
                                        }

                                        window.scrollBy(0, window.innerHeight) // 한 페이지 아래로 스크롤
                                        // window.scrollBy(0, -window.innerHeight) // 한 페이지 위로 스크롤
                                    
                                

✓   behavior 옵션을 주어 스크롤 움직임을 설정해줄 수도 있다:

                                    
                                        window.scrollTo({
                                            left: 0,
                                            top: documentHeight - viewportHeight,
                                            behavior: "smooth" // 부드러운 스크롤
                                        });
                                    
                                

☞ behavior: 속성값에는 "instant" (단번에 스크롤), "auto" (브라우저 및 스크롤 대상요소나 Css에 설정된 scroll-behavior 속성에 따른다)도 있다!

                                        
                                            const el= document.querySelector("#box")

                                            el.scrollIntoView({ behavior: "smooth", block: "start", inline: "nearest" })
                                        
                                    

                                    
                                        document.locatin= "http://www.sosohan.xyz" // 절대 URL로 이동
                                        document.location= "/about#history=express" // (현재 문서를 기준으로 하는)상대 URL 및 (id가 지정된)해시로 바로 이동하는 것도 가능하다!

                                        document.location= "#top" // 현재 문서의 최상단으로 이동한다
                                    
                                

                                    
                                        location.href= "http://www.sosohan.xyz/about?test=1#history=express" // URL 전체

                                        location.path= "/about2" // 페이지 이동
                                        location.search= "?test=2" // 검색 매개변수 변경
                                        location.hash= "#history=v-pills-LocationObj" // 해시 추가
                                    
                                

➥ location.reload([true])는 현재 페이지를 다시 읽어오는데(= F5키), true 옵션을 주면; (게시판에서 새 글을 확인하는 등의 경우에)브라우저 캐시를 무시하고 [새로고침]을 실행한다. location.assign(URL)(= document.location= "URL")은 현재 문서에 새 주소를 할당하여 이동하는데, history 스택에 추가되며 [뒤로] 버튼을 통해 (현재 문서로)다시 돌아올 수 있다. 반면, location.replace(URL)은 assign()과 같은 방식으로 작동하되, 현재 문서에 대한 history 스택이 초기화되어, [뒤로] 버튼을 누르면; (현재 문서가 아니라)그 이전 문서로 돌아가게 된다!

• 오렌지 앵커
• 사과 앵커
• 수박 앵커

* 현재 hash 위치는?

                                    
                                        function funcRef() {
                                            const hash= location.hash
                                            document.querySelector('.log-hash_ex').textContent= `현재 위치는 「${hash}」입니다!`
                                        }

                                        window.addEventListener('hashchange', funcRef) // 해시값이 바뀌면; funcRef() 함수를 실행한다
                                    
                                

☞ 참고로, 이 이벤트는 history.pushState()나 history.replaceState()에 의해 해시가 수정될 때는 발생하지 않는다!

✓   history.go() 메서드는 이동할 단계를 지정해줄 수 있다: go(-1/0/1)(= 뒤로/새로고침/앞으로), go(-2/2)(= 2단계 뒤로/다음으로)

✓   두번째 인자는 상태의 타이틀을 나타낼 문자열이 들어가지만, 대부분의 브라우저에서 지원하지 않기에 빈 문자열을 넣어주면 된다. 마지막 인자는 새 히스토리 항목의 URL 인데(생략 시; 문서의 현재 URL), 실제 페이지 이동은 하지 않으며, 새 URL이 상대 URL인 경우 현재 URL을 기준으로 하며, 새 URL은 현재 URL과 동일출처여야 한다!

히스토리 이벤트 예)

➥ 이 API의 주요 목적은 React나 Vue와 같이 가상 DOM을 사용하는 싱글 페이지 애플리케이션 ^SPA 웹사이트를 지원하는 것이다. 이러한 웹사이트는 SPA 라우터에서의 페이지 이동에, fetch()와 같은 JavaScript API를 사용하여 페이지 전부를 새로 불러오는 대신, 새로운 컨텐츠만으로 페이지를 업데이트한다. 이에 서버에서 새 페이지를 로드하지 않고도 웹사이트를 사용할 수 있으므로, 웹사이트의 속도를 높일 수 있게된다!

                                    
                                        let name= localStorage.username // 스토리지에 저장된 username 값

                                        if (! name) {
                                            name= prompt("너 이름이 어떻게 돼?")
                                            localStorage.username= name // 사용자의 응답을 받아 스토리지에 저장한다
                                        }
                                    
                                

웹 스토리지 예)

➥ 로컬/세션 스토리지의 프로퍼티는 delete 연산자를 써서 제거할 수도 있고, Object.keys() 및 for .. in 루프를 써서 열거할 수도 있다. 또한, 아래와 같은 메서드들도 사용할 수 있다:

• localStorage.setItem(키, 값) 스토리지에 (객체와 같은 방식으로)키와 값 저장
• localStorage.getItem(키) 저장된 값 가져오기(없으면; null) ← localStorage.키, localStorage['키'] 방식으로도 사용할 수 있다!
• localStorage.removeItem(키) 저장된 특정 키 삭제
• localStorage.clear() 스토리지 키 전부 비우기
• localStorage.key(인덱스) 인덱스 번호에 해당하는 키
• localStorage.length 저장된 항목의 개수

✓   일반 객체와는 달리, 스토리지에 저장되는 데이터는 항시 문자열로 저장되므로 문자열이 아닌 데이터를 저장할 때는 직접 인코딩/디코딩해주어야 한다:

                                    
                                        localStorage.x= 10 // "10" ← 이 숫자는 자동으로 문자열로 변환되어 저장된다!
                                        let x= parseInt(localStorage.x) // 10 ← 가져와서 사용할 때는 다시 숫자로 파싱해주어야 한다!

                                        localStorage.lastRead= new Date().toUTCString(); // 날짜를 문자열로 저장함
                                        let lastRead= new Date(Date.parse(localStorage.lastRead)); // 가져올 때는 다시 파싱하여 사용하여야 한다!

                                        localStorage.data= JSON.stringify(data) // 인코딩 후 저정한다
                                        let data= JSON.parse(localStorage.data) // 파싱하여 가져온다
                                    
                                

• key 스토리지 이벤트 객체의 바뀐 키 ← clear() 시는 null 을 반환한다
• oldValue, newValue 이전 키, 새로운 키 ← 새로 추가된 경우는 oldValue가, 제거된 경우에는 newValue가 null 이 된다
• url 키를 바꾼 문서의 URL
• storageArea 영향을 받은 스토리지 객체(localStorage나 sessionStorage)

✓   localStroage(및 stroage 이벤트)는 같은 웹사이트를 방문 중인 창(및 탭) 전체에 메시지를 전송하는 역할을 할 수 있다. 예컨대, 사용자가 웹사이트의 배경 음악을 중지하도록 요청한 때, 웹사이트는 이를 localStorage에 저장해서 사용자가 다시 방문할 때 이를 적용하고, 이는 또한 같은 사이트를 표시하는 창 및 탭 전체에 적용되는 것이다!