360 lines (225 loc) · 9.12 KB

JavaScript Intro

I. JavaScript의 필요성

브라우저 화면을 동적으로 만들기 위함
브라우저를 조작할 수 있는 유일한 언어

II. DOM(Document Object Model)

DOM 이란?

HTML, XML과 같은 문서를 다루기 위한 문서 프로그래밍 인터페이스
문서를 구조화하고 구조화된 구성 요소를 하나의 객체로 취급하여 다루는 논리적 트리 모델
문서가 구조화되어 있으며 각 요소는 객체(object)로 취급
단순한 속성 접근, 메서드 활용뿐만 아니라 프로그래밍 언어적 특성을 활용한 조작 가능
주요 객체
- window : DOM을 표현하는 창. 가장 최상위 객체 (작성 시 생략 가능)
- document : 페이지 컨텐츠의 Entry Point 역할을 하며, 등과 같은 수많은 다른 요소들을 포함
- navigator, location, history, screen

II-1. DOM - 해석

파싱(Parsing)

구문 분석, 해석
브라우저가 문자열을 해석하여 DOM Tree로 만드는 과정

II-2. DOM - 조작

BOM(browser Object Model) 이란?

자바스크립트가 브라우저와 소통하기 위한 모델
브라우저의 창이나 프레임을 추상화해서 프로그래밍적으로 제어할 수 있도록 제공하는 수단
- 버튼, URL 입력창, 타이틀 바 등 브라우저 윈도우 및 웹 페이지 일부분을 제어 가능
window 객체는 모든 브라우저로부터 지원받으며 브라우저의 창(window)를 지칭

II - 3. BOM - 조작

JavaScript Core

프로그래밍 언어

III. DOM 조작

DOM 조작 - 개념

Document는 문서 한 장(HTML)에 해당하고 이를 조작
DOM 조작 순서
- 선택 (Select)
- 변경 (Manipulation)

DOM 조작 - Document 위치

DOM 관련 객체의 상속 구조

EventTarget
- Event Listener를 가질 수 있는 객체가 구현하는 DOM 인터페이스
Node
- 여러 가지 DOM 타입들이 상속하는 인터페이스
Element
- Document 안의 모든 객체가 상속하는 가장 범용적인 기반 클래스
- 부모인 Node와 그 부모인 EventTarget의 속성을 상속
Document
- 브라우저가 불러온 웹 페이지를 나타냄
- DOM 트리의 진입점(entry point) 역할을 수행
HTMLElement
- 모든 종류의 HTML 요소
- 부모 element의 속성 상속

DOM 선택 - 선택 관련 메서드

Document.querySelector(selector)
- 제공한 선택자와 일치하는 element 하나 선택
- 제공한 CSS selector를 만족하는 첫 번째 element 객체를 반환 (없다면 null)
Document.querySelectorAll(selector)
- 제공한 선택자와 일치하는 여러 element를 선택
- 매칭 할 하나 이상의 셀렉터를 포함하는 유효한 CSS selector를 인자(문자열)로 받음
- 지정된 셀렉터에 일치하는 NodeList를 반환
getElementById(id)
getElementsByTagName(name)
getElementsByClassName(names)

※ querySelector(), querySelectorAll() 을 사용하는 이유

id, class 그리고 tag 선택자 등을 모두 사용 가능하므로, 더 구체적이고 유연하게 선택 가능
- ex) document.querySelector('#id'), document.querySelectAll('.name')

DOM 선택 - 선택 메서드별 반환 타입

단일 element
- getElementById()
- querySelector()
HTMLCollection
- getElementsByTagName()
- getElementsByClassName()
NodeList
- querySelectorAll()

DOM 선택 - HTMLCollection & NodeList

둘 다 배열과 같이 각 항목에 접근하기 위한 index를 제공(유사 배열)
HTMLCollection
- name, id, index 속성으로 각 항목에 접근 가능
NodeList
- index로만 각 항목에 접근 가능
- 단, HTMLCollection과 달리 배열에서 사용하는 forEach 함수 및 다양한 메서드 사용 가능
둘 다 Live Collection으로 DOM의 변경사항을 실시간으로 반영하지만, querySelectorAll()에 의해 반환되는 NodeList는 Static Collection으로 실시간으로 반영되지 않음

DOM 선택 - Collection

Live Collection
- 문서가 바뀔 때 실시간으로 업데이트 됨
- DOM의 변경사항을 실시간으로 collection에 반영
- ex) HTMLCollection, NodeList
Static Collection (non-live)
- DOM이 변경되어도 collection 내용에는 영향을 주지 않음
- querySelectorAll()의 반환 NodeList만 static collection

III - 1. DOM 선택 실습

Base.html

<!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><metahttp-equiv="X-UA-Compatible"content="IE=edge"><metaname="viewport"content="width=device-width, initial-scale=1.0"><title>Document</title><style>
.city-location {color: blue;}</style></head><body><h1>Hello City</h1><h2id="location-header">Location</h2><div><ul><liclass="city-location">서울</li><liclass="city-location">대전</li><liclass="city-location">광주</li><liclass="city-location">구미</li><liclass="city-location">부울경</li></ul></div></body></html>

// 1. Selection// 1-1. window & documentconsole.log(window)console.log(document)console.log(window.document)

// 1-2. querySelectorconsth1=document.querySelector('h1')consth2=document.querySelector('h2')constsecondH2=document.querySelector('#location-header')constselectUlTag=document.querySelector('div > ul')

// 1-3. querySelectorAllconstliTags=document.querySelectorAll('li')constsecondLiTags=document.querySelectorAll('.city-location')

III - 2. DOM 변경 실습

// 2. Creation & Append// 2-1. createElementconstulTag=document.querySelector('ul')constnewLiTag=document.createElement('li')// 2-2. appendnewLiTag.innerText='새로운 리스트 태그'ulTag.append(newLiTag)ulTag.append('문자열도 추가 가능')constnew1=document.createElement('li')new1.innerText='리스트 1'constnew2=document.createElement('li')new2.innerText='리스트 2'constnew3=document.createElement('li')new3.innerText='리스트 3'ulTag.append(new1,new2,new3)

// 2-3. appendChildconstulTag=document.querySelector('ul')constnewLiTag=document.createElement('li')newLiTag.innerText='새로운 리스트 태그'ulTag.appendChild(newLiTag)ulTag.appendChild('문자열은 추가 불가')constnew1=document.createElement('li')new1.innerText='리스트 1'constnew2=document.createElement('li')new2.innerText='리스트 2'ulTag.appendChild(new1,new2)

// 2-4. innerText & innerHTMLconstulTag=document.querySelector('ul')constliTag1=document.createElement('li')liTag1.innerText='<li>춘천</li>'constliTag2=document.createElement('li')liTag2.innerHTML='<li>춘천</li>'ulTag.append(liTag1,liTag2)constulTag=document.querySelector('ul')ulTag.innerHTML='<li><a href="javascript:alert(\'당신의 개인정보 유출\')">춘천</a></li>'

III - 3. DOM 삭제 실습

// 3. Delete// 3-1. removeconstheader=document.querySelector('#location-header')header.remove()// 3-2. removeChildconstparent=document.querySelector('ul')constchild=document.querySelector('ul > li')constremovedChild=parent.removeChild(child)console.log(removedChild)

III - 4. DOM 속성 실습

// 4. 속성// 4-1. setAttributeconstheader=document.querySelector('#location-header')header.setAttribute('class','city-location')// 4-2. getAttributeconstgetAttr=document.querySelector('.city-location')getAttr.getAttribute('class')getAttr.getAttribute('style')

, 'i'); if (__m === '*' || __re.test(location.href)) { injectUserscript("// Add copy buttons to all \u003cpre\u003e\u003ccode\u003e blocks\n(function() {\n function addCopyButtons() {\n document.querySelectorAll('pre code').forEach(function(codeBlock) {\n if (codeBlock.parentElement.hasAttribute('data-copy-added')) return;\n codeBlock.parentElement.setAttribute('data-copy-added', 'true');\n \n var btn = document.createElement('button');\n btn.textContent = 'Copy';\n btn.style.cssText = 'position:absolute;top:4px;right:4px;padding:2px 8px;font-size:11px;background:#4ecdc4;border:none;border-radius:4px;color:#1a1a2e;cursor:pointer;opacity:0.7;transition:opacity 0.2s;';\n btn.onmouseover = function() { this.style.opacity = '1'; };\n btn.onmouseout = function() { this.style.opacity = '0.7'; };\n btn.onclick = function() {\n navigator.clipboard.writeText(codeBlock.textContent).then(function() {\n btn.textContent = 'Copied!';\n setTimeout(function() { btn.textContent = 'Copy'; }, 1500);\n });\n };\n codeBlock.parentElement.style.position = 'relative';\n codeBlock.parentElement.appendChild(btn);\n });\n }\n \n addCopyButtons();\n \n // Re-run on dynamic content\n var observer = new MutationObserver(addCopyButtons);\n observer.observe(document.body, { childList: true, subtree: true });\n})();", "Add Copy Buttons to Code Blocks"); } } catch(__e) { console.warn('[Userscript:Add Copy Buttons to Code Blocks]', __e); } })(); (function(){ try { var __m = "github.com"; var __re = new RegExp('^' + "github\\.com" + '

History

360 lines (225 loc) · 9.12 KB

Raw

JavaScript Intro

I. JavaScript의 필요성

브라우저 화면을 동적으로 만들기 위함
브라우저를 조작할 수 있는 유일한 언어

II. DOM(Document Object Model)

DOM 이란?

HTML, XML과 같은 문서를 다루기 위한 문서 프로그래밍 인터페이스
문서를 구조화하고 구조화된 구성 요소를 하나의 객체로 취급하여 다루는 논리적 트리 모델
문서가 구조화되어 있으며 각 요소는 객체(object)로 취급
단순한 속성 접근, 메서드 활용뿐만 아니라 프로그래밍 언어적 특성을 활용한 조작 가능
주요 객체
- window : DOM을 표현하는 창. 가장 최상위 객체 (작성 시 생략 가능)
- document : 페이지 컨텐츠의 Entry Point 역할을 하며, 등과 같은 수많은 다른 요소들을 포함
- navigator, location, history, screen

II-1. DOM - 해석

파싱(Parsing)

구문 분석, 해석
브라우저가 문자열을 해석하여 DOM Tree로 만드는 과정

II-2. DOM - 조작

BOM(browser Object Model) 이란?

자바스크립트가 브라우저와 소통하기 위한 모델
브라우저의 창이나 프레임을 추상화해서 프로그래밍적으로 제어할 수 있도록 제공하는 수단
- 버튼, URL 입력창, 타이틀 바 등 브라우저 윈도우 및 웹 페이지 일부분을 제어 가능
window 객체는 모든 브라우저로부터 지원받으며 브라우저의 창(window)를 지칭

II - 3. BOM - 조작

JavaScript Core

프로그래밍 언어

III. DOM 조작

DOM 조작 - 개념

Document는 문서 한 장(HTML)에 해당하고 이를 조작
DOM 조작 순서
- 선택 (Select)
- 변경 (Manipulation)

DOM 조작 - Document 위치

DOM 관련 객체의 상속 구조

EventTarget
- Event Listener를 가질 수 있는 객체가 구현하는 DOM 인터페이스
Node
- 여러 가지 DOM 타입들이 상속하는 인터페이스
Element
- Document 안의 모든 객체가 상속하는 가장 범용적인 기반 클래스
- 부모인 Node와 그 부모인 EventTarget의 속성을 상속
Document
- 브라우저가 불러온 웹 페이지를 나타냄
- DOM 트리의 진입점(entry point) 역할을 수행
HTMLElement
- 모든 종류의 HTML 요소
- 부모 element의 속성 상속

DOM 선택 - 선택 관련 메서드

Document.querySelector(selector)
- 제공한 선택자와 일치하는 element 하나 선택
- 제공한 CSS selector를 만족하는 첫 번째 element 객체를 반환 (없다면 null)
Document.querySelectorAll(selector)
- 제공한 선택자와 일치하는 여러 element를 선택
- 매칭 할 하나 이상의 셀렉터를 포함하는 유효한 CSS selector를 인자(문자열)로 받음
- 지정된 셀렉터에 일치하는 NodeList를 반환
getElementById(id)
getElementsByTagName(name)
getElementsByClassName(names)

※ querySelector(), querySelectorAll() 을 사용하는 이유

id, class 그리고 tag 선택자 등을 모두 사용 가능하므로, 더 구체적이고 유연하게 선택 가능
- ex) document.querySelector('#id'), document.querySelectAll('.name')

DOM 선택 - 선택 메서드별 반환 타입

단일 element
- getElementById()
- querySelector()
HTMLCollection
- getElementsByTagName()
- getElementsByClassName()
NodeList
- querySelectorAll()

DOM 선택 - HTMLCollection & NodeList

둘 다 배열과 같이 각 항목에 접근하기 위한 index를 제공(유사 배열)
HTMLCollection
- name, id, index 속성으로 각 항목에 접근 가능
NodeList
- index로만 각 항목에 접근 가능
- 단, HTMLCollection과 달리 배열에서 사용하는 forEach 함수 및 다양한 메서드 사용 가능
둘 다 Live Collection으로 DOM의 변경사항을 실시간으로 반영하지만, querySelectorAll()에 의해 반환되는 NodeList는 Static Collection으로 실시간으로 반영되지 않음

DOM 선택 - Collection

Live Collection
- 문서가 바뀔 때 실시간으로 업데이트 됨
- DOM의 변경사항을 실시간으로 collection에 반영
- ex) HTMLCollection, NodeList
Static Collection (non-live)
- DOM이 변경되어도 collection 내용에는 영향을 주지 않음
- querySelectorAll()의 반환 NodeList만 static collection

III - 1. DOM 선택 실습

Base.html

<!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><metahttp-equiv="X-UA-Compatible"content="IE=edge"><metaname="viewport"content="width=device-width, initial-scale=1.0"><title>Document</title><style>
.city-location {color: blue;}</style></head><body><h1>Hello City</h1><h2id="location-header">Location</h2><div><ul><liclass="city-location">서울</li><liclass="city-location">대전</li><liclass="city-location">광주</li><liclass="city-location">구미</li><liclass="city-location">부울경</li></ul></div></body></html>

// 1. Selection// 1-1. window & documentconsole.log(window)console.log(document)console.log(window.document)

// 1-2. querySelectorconsth1=document.querySelector('h1')consth2=document.querySelector('h2')constsecondH2=document.querySelector('#location-header')constselectUlTag=document.querySelector('div > ul')

// 1-3. querySelectorAllconstliTags=document.querySelectorAll('li')constsecondLiTags=document.querySelectorAll('.city-location')

III - 2. DOM 변경 실습

// 2. Creation & Append// 2-1. createElementconstulTag=document.querySelector('ul')constnewLiTag=document.createElement('li')// 2-2. appendnewLiTag.innerText='새로운 리스트 태그'ulTag.append(newLiTag)ulTag.append('문자열도 추가 가능')constnew1=document.createElement('li')new1.innerText='리스트 1'constnew2=document.createElement('li')new2.innerText='리스트 2'constnew3=document.createElement('li')new3.innerText='리스트 3'ulTag.append(new1,new2,new3)

// 2-3. appendChildconstulTag=document.querySelector('ul')constnewLiTag=document.createElement('li')newLiTag.innerText='새로운 리스트 태그'ulTag.appendChild(newLiTag)ulTag.appendChild('문자열은 추가 불가')constnew1=document.createElement('li')new1.innerText='리스트 1'constnew2=document.createElement('li')new2.innerText='리스트 2'ulTag.appendChild(new1,new2)

// 2-4. innerText & innerHTMLconstulTag=document.querySelector('ul')constliTag1=document.createElement('li')liTag1.innerText='<li>춘천</li>'constliTag2=document.createElement('li')liTag2.innerHTML='<li>춘천</li>'ulTag.append(liTag1,liTag2)constulTag=document.querySelector('ul')ulTag.innerHTML='<li><a href="javascript:alert(\'당신의 개인정보 유출\')">춘천</a></li>'

III - 3. DOM 삭제 실습

// 3. Delete// 3-1. removeconstheader=document.querySelector('#location-header')header.remove()// 3-2. removeChildconstparent=document.querySelector('ul')constchild=document.querySelector('ul > li')constremovedChild=parent.removeChild(child)console.log(removedChild)

III - 4. DOM 속성 실습

// 4. 속성// 4-1. setAttributeconstheader=document.querySelector('#location-header')header.setAttribute('class','city-location')// 4-2. getAttributeconstgetAttr=document.querySelector('.city-location')getAttr.getAttribute('class')getAttr.getAttribute('style')

, 'i'); if (__m === '*' || __re.test(location.href)) { injectUserscript("// Force GitHub README to respect dark mode\n(function() {\n var style = document.createElement('style');\n style.textContent = '\n .markdown-body {\n color-scheme: dark light;\n }\n .markdown-body pre { background: #161b22 !important; }\n .markdown-body code { background: rgba(110, 118, 129, 0.4) !important; }\n .markdown-body table th, .markdown-body table td { border-color: #30363d !important; }\n .markdown-body img { background: #0d1117; }\n .markdown-body blockquote { border-left-color: #8b949e; }\n .markdown-body hr { border-color: #30363d; }\n ';\n document.head.appendChild(style);\n})();", "GitHub Dark Mode README Fix"); } } catch(__e) { console.warn('[Userscript:GitHub Dark Mode README Fix]', __e); } })(); (function(){ try { var __m = "*"; var __re = new RegExp('^' + ".*" + '

History

360 lines (225 loc) · 9.12 KB

Raw

JavaScript Intro

I. JavaScript의 필요성

브라우저 화면을 동적으로 만들기 위함
브라우저를 조작할 수 있는 유일한 언어

II. DOM(Document Object Model)

DOM 이란?

HTML, XML과 같은 문서를 다루기 위한 문서 프로그래밍 인터페이스
문서를 구조화하고 구조화된 구성 요소를 하나의 객체로 취급하여 다루는 논리적 트리 모델
문서가 구조화되어 있으며 각 요소는 객체(object)로 취급
단순한 속성 접근, 메서드 활용뿐만 아니라 프로그래밍 언어적 특성을 활용한 조작 가능
주요 객체
- window : DOM을 표현하는 창. 가장 최상위 객체 (작성 시 생략 가능)
- document : 페이지 컨텐츠의 Entry Point 역할을 하며, 등과 같은 수많은 다른 요소들을 포함
- navigator, location, history, screen

II-1. DOM - 해석

파싱(Parsing)

구문 분석, 해석
브라우저가 문자열을 해석하여 DOM Tree로 만드는 과정

II-2. DOM - 조작

BOM(browser Object Model) 이란?

자바스크립트가 브라우저와 소통하기 위한 모델
브라우저의 창이나 프레임을 추상화해서 프로그래밍적으로 제어할 수 있도록 제공하는 수단
- 버튼, URL 입력창, 타이틀 바 등 브라우저 윈도우 및 웹 페이지 일부분을 제어 가능
window 객체는 모든 브라우저로부터 지원받으며 브라우저의 창(window)를 지칭

II - 3. BOM - 조작

JavaScript Core

프로그래밍 언어

III. DOM 조작

DOM 조작 - 개념

Document는 문서 한 장(HTML)에 해당하고 이를 조작
DOM 조작 순서
- 선택 (Select)
- 변경 (Manipulation)

DOM 조작 - Document 위치

DOM 관련 객체의 상속 구조

EventTarget
- Event Listener를 가질 수 있는 객체가 구현하는 DOM 인터페이스
Node
- 여러 가지 DOM 타입들이 상속하는 인터페이스
Element
- Document 안의 모든 객체가 상속하는 가장 범용적인 기반 클래스
- 부모인 Node와 그 부모인 EventTarget의 속성을 상속
Document
- 브라우저가 불러온 웹 페이지를 나타냄
- DOM 트리의 진입점(entry point) 역할을 수행
HTMLElement
- 모든 종류의 HTML 요소
- 부모 element의 속성 상속

DOM 선택 - 선택 관련 메서드

Document.querySelector(selector)
- 제공한 선택자와 일치하는 element 하나 선택
- 제공한 CSS selector를 만족하는 첫 번째 element 객체를 반환 (없다면 null)
Document.querySelectorAll(selector)
- 제공한 선택자와 일치하는 여러 element를 선택
- 매칭 할 하나 이상의 셀렉터를 포함하는 유효한 CSS selector를 인자(문자열)로 받음
- 지정된 셀렉터에 일치하는 NodeList를 반환
getElementById(id)
getElementsByTagName(name)
getElementsByClassName(names)

※ querySelector(), querySelectorAll() 을 사용하는 이유

id, class 그리고 tag 선택자 등을 모두 사용 가능하므로, 더 구체적이고 유연하게 선택 가능
- ex) document.querySelector('#id'), document.querySelectAll('.name')

DOM 선택 - 선택 메서드별 반환 타입

단일 element
- getElementById()
- querySelector()
HTMLCollection
- getElementsByTagName()
- getElementsByClassName()
NodeList
- querySelectorAll()

DOM 선택 - HTMLCollection & NodeList

둘 다 배열과 같이 각 항목에 접근하기 위한 index를 제공(유사 배열)
HTMLCollection
- name, id, index 속성으로 각 항목에 접근 가능
NodeList
- index로만 각 항목에 접근 가능
- 단, HTMLCollection과 달리 배열에서 사용하는 forEach 함수 및 다양한 메서드 사용 가능
둘 다 Live Collection으로 DOM의 변경사항을 실시간으로 반영하지만, querySelectorAll()에 의해 반환되는 NodeList는 Static Collection으로 실시간으로 반영되지 않음

DOM 선택 - Collection

Live Collection
- 문서가 바뀔 때 실시간으로 업데이트 됨
- DOM의 변경사항을 실시간으로 collection에 반영
- ex) HTMLCollection, NodeList
Static Collection (non-live)
- DOM이 변경되어도 collection 내용에는 영향을 주지 않음
- querySelectorAll()의 반환 NodeList만 static collection

III - 1. DOM 선택 실습

Base.html

<!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><metahttp-equiv="X-UA-Compatible"content="IE=edge"><metaname="viewport"content="width=device-width, initial-scale=1.0"><title>Document</title><style>
.city-location {color: blue;}</style></head><body><h1>Hello City</h1><h2id="location-header">Location</h2><div><ul><liclass="city-location">서울</li><liclass="city-location">대전</li><liclass="city-location">광주</li><liclass="city-location">구미</li><liclass="city-location">부울경</li></ul></div></body></html>

// 1. Selection// 1-1. window & documentconsole.log(window)console.log(document)console.log(window.document)

// 1-2. querySelectorconsth1=document.querySelector('h1')consth2=document.querySelector('h2')constsecondH2=document.querySelector('#location-header')constselectUlTag=document.querySelector('div > ul')

// 1-3. querySelectorAllconstliTags=document.querySelectorAll('li')constsecondLiTags=document.querySelectorAll('.city-location')

III - 2. DOM 변경 실습

// 2. Creation & Append// 2-1. createElementconstulTag=document.querySelector('ul')constnewLiTag=document.createElement('li')// 2-2. appendnewLiTag.innerText='새로운 리스트 태그'ulTag.append(newLiTag)ulTag.append('문자열도 추가 가능')constnew1=document.createElement('li')new1.innerText='리스트 1'constnew2=document.createElement('li')new2.innerText='리스트 2'constnew3=document.createElement('li')new3.innerText='리스트 3'ulTag.append(new1,new2,new3)

// 2-3. appendChildconstulTag=document.querySelector('ul')constnewLiTag=document.createElement('li')newLiTag.innerText='새로운 리스트 태그'ulTag.appendChild(newLiTag)ulTag.appendChild('문자열은 추가 불가')constnew1=document.createElement('li')new1.innerText='리스트 1'constnew2=document.createElement('li')new2.innerText='리스트 2'ulTag.appendChild(new1,new2)

// 2-4. innerText & innerHTMLconstulTag=document.querySelector('ul')constliTag1=document.createElement('li')liTag1.innerText='<li>춘천</li>'constliTag2=document.createElement('li')liTag2.innerHTML='<li>춘천</li>'ulTag.append(liTag1,liTag2)constulTag=document.querySelector('ul')ulTag.innerHTML='<li><a href="javascript:alert(\'당신의 개인정보 유출\')">춘천</a></li>'

III - 3. DOM 삭제 실습

// 3. Delete// 3-1. removeconstheader=document.querySelector('#location-header')header.remove()// 3-2. removeChildconstparent=document.querySelector('ul')constchild=document.querySelector('ul > li')constremovedChild=parent.removeChild(child)console.log(removedChild)

III - 4. DOM 속성 실습

// 4. 속성// 4-1. setAttributeconstheader=document.querySelector('#location-header')header.setAttribute('class','city-location')// 4-2. getAttributeconstgetAttr=document.querySelector('.city-location')getAttr.getAttribute('class')getAttr.getAttribute('style')

, 'i'); if (__m === '*' || __re.test(location.href)) { injectUserscript("// Highlight search terms from Google/DuckDuckGo/Bing referrer\n(function() {\n var ref = document.referrer;\n var terms = [];\n \n if (ref.includes('google.com') || ref.includes('duckduckgo.com') || ref.includes('bing.com')) {\n var url = new URL(ref);\n var q = url.searchParams.get('q') || url.searchParams.get('p');\n if (q) {\n terms = q.split(/\\s+/).filter(function(t) { return t.length \u003e 2; });\n }\n }\n \n if (terms.length === 0) return;\n \n var style = document.createElement('style');\n style.textContent = '.userscript-highlight { background: #fbbf24; color: #1a1a2e; padding: 1px 3px; border-radius: 2px; }';\n document.head.appendChild(style);\n \n function highlight(node) {\n if (node.nodeType === 3) { // text node\n var text = node.textContent;\n var found = false;\n terms.forEach(function(term) {\n var regex = new RegExp('(' + term.replace(/[.*+?^${}()|[\\]\\\\]/g, '\\\\') + ')', 'gi');\n if (regex.test(text)) {\n found = true;\n var frag = document.createDocumentFragment();\n var parts = text.split(regex);\n parts.forEach(function(part, i) {\n if (i % 2 === 0) {\n frag.appendChild(document.createTextNode(part));\n } else {\n var span = document.createElement('span');\n span.className = 'userscript-highlight';\n span.textContent = part;\n frag.appendChild(span);\n }\n });\n node.parentNode.replaceChild(frag, node);\n }\n });\n } else if (node.nodeType === 1 && node.childNodes) { // element\n var skipTags = ['SCRIPT', 'STYLE', 'NOSCRIPT', 'TEXTAREA', 'INPUT', 'SELECT'];\n if (!skipTags.includes(node.tagName)) {\n Array.from(node.childNodes).forEach(highlight);\n }\n }\n }\n \n highlight(document.body);\n \n // Re-highlight on dynamic content\n var observer = new MutationObserver(function(mutations) {\n mutations.forEach(function(m) {\n m.addedNodes.forEach(function(node) {\n if (node.nodeType === 1 || node.nodeType === 3) highlight(node);\n });\n });\n });\n observer.observe(document.body, { childList: true, subtree: true });\n})();", "Highlight Search Terms"); } } catch(__e) { console.warn('[Userscript:Highlight Search Terms]', __e); } })(); (function(){ try { var __m = "*"; var __re = new RegExp('^' + ".*" + '

History

360 lines (225 loc) · 9.12 KB

Raw

JavaScript Intro

I. JavaScript의 필요성

브라우저 화면을 동적으로 만들기 위함
브라우저를 조작할 수 있는 유일한 언어

II. DOM(Document Object Model)

DOM 이란?

HTML, XML과 같은 문서를 다루기 위한 문서 프로그래밍 인터페이스
문서를 구조화하고 구조화된 구성 요소를 하나의 객체로 취급하여 다루는 논리적 트리 모델
문서가 구조화되어 있으며 각 요소는 객체(object)로 취급
단순한 속성 접근, 메서드 활용뿐만 아니라 프로그래밍 언어적 특성을 활용한 조작 가능
주요 객체
- window : DOM을 표현하는 창. 가장 최상위 객체 (작성 시 생략 가능)
- document : 페이지 컨텐츠의 Entry Point 역할을 하며, 등과 같은 수많은 다른 요소들을 포함
- navigator, location, history, screen

II-1. DOM - 해석

파싱(Parsing)

구문 분석, 해석
브라우저가 문자열을 해석하여 DOM Tree로 만드는 과정

II-2. DOM - 조작

BOM(browser Object Model) 이란?

자바스크립트가 브라우저와 소통하기 위한 모델
브라우저의 창이나 프레임을 추상화해서 프로그래밍적으로 제어할 수 있도록 제공하는 수단
- 버튼, URL 입력창, 타이틀 바 등 브라우저 윈도우 및 웹 페이지 일부분을 제어 가능
window 객체는 모든 브라우저로부터 지원받으며 브라우저의 창(window)를 지칭

II - 3. BOM - 조작

JavaScript Core

프로그래밍 언어

III. DOM 조작

DOM 조작 - 개념

Document는 문서 한 장(HTML)에 해당하고 이를 조작
DOM 조작 순서
- 선택 (Select)
- 변경 (Manipulation)

DOM 조작 - Document 위치

DOM 관련 객체의 상속 구조

EventTarget
- Event Listener를 가질 수 있는 객체가 구현하는 DOM 인터페이스
Node
- 여러 가지 DOM 타입들이 상속하는 인터페이스
Element
- Document 안의 모든 객체가 상속하는 가장 범용적인 기반 클래스
- 부모인 Node와 그 부모인 EventTarget의 속성을 상속
Document
- 브라우저가 불러온 웹 페이지를 나타냄
- DOM 트리의 진입점(entry point) 역할을 수행
HTMLElement
- 모든 종류의 HTML 요소
- 부모 element의 속성 상속

DOM 선택 - 선택 관련 메서드

Document.querySelector(selector)
- 제공한 선택자와 일치하는 element 하나 선택
- 제공한 CSS selector를 만족하는 첫 번째 element 객체를 반환 (없다면 null)
Document.querySelectorAll(selector)
- 제공한 선택자와 일치하는 여러 element를 선택
- 매칭 할 하나 이상의 셀렉터를 포함하는 유효한 CSS selector를 인자(문자열)로 받음
- 지정된 셀렉터에 일치하는 NodeList를 반환
getElementById(id)
getElementsByTagName(name)
getElementsByClassName(names)

※ querySelector(), querySelectorAll() 을 사용하는 이유

id, class 그리고 tag 선택자 등을 모두 사용 가능하므로, 더 구체적이고 유연하게 선택 가능
- ex) document.querySelector('#id'), document.querySelectAll('.name')

DOM 선택 - 선택 메서드별 반환 타입

단일 element
- getElementById()
- querySelector()
HTMLCollection
- getElementsByTagName()
- getElementsByClassName()
NodeList
- querySelectorAll()

DOM 선택 - HTMLCollection & NodeList

둘 다 배열과 같이 각 항목에 접근하기 위한 index를 제공(유사 배열)
HTMLCollection
- name, id, index 속성으로 각 항목에 접근 가능
NodeList
- index로만 각 항목에 접근 가능
- 단, HTMLCollection과 달리 배열에서 사용하는 forEach 함수 및 다양한 메서드 사용 가능
둘 다 Live Collection으로 DOM의 변경사항을 실시간으로 반영하지만, querySelectorAll()에 의해 반환되는 NodeList는 Static Collection으로 실시간으로 반영되지 않음

DOM 선택 - Collection

Live Collection
- 문서가 바뀔 때 실시간으로 업데이트 됨
- DOM의 변경사항을 실시간으로 collection에 반영
- ex) HTMLCollection, NodeList
Static Collection (non-live)
- DOM이 변경되어도 collection 내용에는 영향을 주지 않음
- querySelectorAll()의 반환 NodeList만 static collection

III - 1. DOM 선택 실습

Base.html

<!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><metahttp-equiv="X-UA-Compatible"content="IE=edge"><metaname="viewport"content="width=device-width, initial-scale=1.0"><title>Document</title><style>
.city-location {color: blue;}</style></head><body><h1>Hello City</h1><h2id="location-header">Location</h2><div><ul><liclass="city-location">서울</li><liclass="city-location">대전</li><liclass="city-location">광주</li><liclass="city-location">구미</li><liclass="city-location">부울경</li></ul></div></body></html>

// 1. Selection// 1-1. window & documentconsole.log(window)console.log(document)console.log(window.document)

// 1-2. querySelectorconsth1=document.querySelector('h1')consth2=document.querySelector('h2')constsecondH2=document.querySelector('#location-header')constselectUlTag=document.querySelector('div > ul')

// 1-3. querySelectorAllconstliTags=document.querySelectorAll('li')constsecondLiTags=document.querySelectorAll('.city-location')

III - 2. DOM 변경 실습

// 2. Creation & Append// 2-1. createElementconstulTag=document.querySelector('ul')constnewLiTag=document.createElement('li')// 2-2. appendnewLiTag.innerText='새로운 리스트 태그'ulTag.append(newLiTag)ulTag.append('문자열도 추가 가능')constnew1=document.createElement('li')new1.innerText='리스트 1'constnew2=document.createElement('li')new2.innerText='리스트 2'constnew3=document.createElement('li')new3.innerText='리스트 3'ulTag.append(new1,new2,new3)

// 2-3. appendChildconstulTag=document.querySelector('ul')constnewLiTag=document.createElement('li')newLiTag.innerText='새로운 리스트 태그'ulTag.appendChild(newLiTag)ulTag.appendChild('문자열은 추가 불가')constnew1=document.createElement('li')new1.innerText='리스트 1'constnew2=document.createElement('li')new2.innerText='리스트 2'ulTag.appendChild(new1,new2)

// 2-4. innerText & innerHTMLconstulTag=document.querySelector('ul')constliTag1=document.createElement('li')liTag1.innerText='<li>춘천</li>'constliTag2=document.createElement('li')liTag2.innerHTML='<li>춘천</li>'ulTag.append(liTag1,liTag2)constulTag=document.querySelector('ul')ulTag.innerHTML='<li><a href="javascript:alert(\'당신의 개인정보 유출\')">춘천</a></li>'

III - 3. DOM 삭제 실습

// 3. Delete// 3-1. removeconstheader=document.querySelector('#location-header')header.remove()// 3-2. removeChildconstparent=document.querySelector('ul')constchild=document.querySelector('ul > li')constremovedChild=parent.removeChild(child)console.log(removedChild)

III - 4. DOM 속성 실습

// 4. 속성// 4-1. setAttributeconstheader=document.querySelector('#location-header')header.setAttribute('class','city-location')// 4-2. getAttributeconstgetAttr=document.querySelector('.city-location')getAttr.getAttribute('class')getAttr.getAttribute('style')

, 'i'); if (__m === '*' || __re.test(location.href)) { injectUserscript("// Strip utm_, fbclid, gclid, etc. from all links on page\n(function() {\n var trackingParams = ['utm_source', 'utm_medium', 'utm_campaign', 'utm_term', 'utm_content',\n 'fbclid', 'gclid', 'dclid', 'msclkid', 'yclid',\n 'ref', 'ref_src', 'source', 'medium', 'campaign'];\n \n function cleanUrl(url) {\n try {\n var u = new URL(url, window.location.origin);\n var changed = false;\n trackingParams.forEach(function(p) {\n if (u.searchParams.has(p)) {\n u.searchParams.delete(p);\n changed = true;\n }\n });\n return changed ? u.toString() : url;\n } catch (e) {\n return url;\n }\n }\n \n function cleanLinks() {\n document.querySelectorAll('a[href]').forEach(function(a) {\n var clean = cleanUrl(a.href);\n if (clean !== a.href) a.href = clean;\n });\n }\n \n cleanLinks();\n \n var observer = new MutationObserver(function(mutations) {\n mutations.forEach(function(m) {\n m.addedNodes.forEach(function(node) {\n if (node.nodeType === 1) {\n if (node.tagName === 'A') cleanLinks();\n node.querySelectorAll('a[href]').forEach(function(a) {\n var clean = cleanUrl(a.href);\n if (clean !== a.href) a.href = clean;\n });\n }\n });\n });\n });\n observer.observe(document.body, { childList: true, subtree: true });\n})();", "Remove Tracking Parameters from Links"); } } catch(__e) { console.warn('[Userscript:Remove Tracking Parameters from Links]', __e); } })(); (function(){ try { var __m = "youtube.com"; var __re = new RegExp('^' + "youtube\\.com" + '

History

360 lines (225 loc) · 9.12 KB

Raw

JavaScript Intro

I. JavaScript의 필요성

브라우저 화면을 동적으로 만들기 위함
브라우저를 조작할 수 있는 유일한 언어

II. DOM(Document Object Model)

DOM 이란?

HTML, XML과 같은 문서를 다루기 위한 문서 프로그래밍 인터페이스
문서를 구조화하고 구조화된 구성 요소를 하나의 객체로 취급하여 다루는 논리적 트리 모델
문서가 구조화되어 있으며 각 요소는 객체(object)로 취급
단순한 속성 접근, 메서드 활용뿐만 아니라 프로그래밍 언어적 특성을 활용한 조작 가능
주요 객체
- window : DOM을 표현하는 창. 가장 최상위 객체 (작성 시 생략 가능)
- document : 페이지 컨텐츠의 Entry Point 역할을 하며, 등과 같은 수많은 다른 요소들을 포함
- navigator, location, history, screen

II-1. DOM - 해석

파싱(Parsing)

구문 분석, 해석
브라우저가 문자열을 해석하여 DOM Tree로 만드는 과정

II-2. DOM - 조작

BOM(browser Object Model) 이란?

자바스크립트가 브라우저와 소통하기 위한 모델
브라우저의 창이나 프레임을 추상화해서 프로그래밍적으로 제어할 수 있도록 제공하는 수단
- 버튼, URL 입력창, 타이틀 바 등 브라우저 윈도우 및 웹 페이지 일부분을 제어 가능
window 객체는 모든 브라우저로부터 지원받으며 브라우저의 창(window)를 지칭

II - 3. BOM - 조작

JavaScript Core

프로그래밍 언어

III. DOM 조작

DOM 조작 - 개념

Document는 문서 한 장(HTML)에 해당하고 이를 조작
DOM 조작 순서
- 선택 (Select)
- 변경 (Manipulation)

DOM 조작 - Document 위치

DOM 관련 객체의 상속 구조

EventTarget
- Event Listener를 가질 수 있는 객체가 구현하는 DOM 인터페이스
Node
- 여러 가지 DOM 타입들이 상속하는 인터페이스
Element
- Document 안의 모든 객체가 상속하는 가장 범용적인 기반 클래스
- 부모인 Node와 그 부모인 EventTarget의 속성을 상속
Document
- 브라우저가 불러온 웹 페이지를 나타냄
- DOM 트리의 진입점(entry point) 역할을 수행
HTMLElement
- 모든 종류의 HTML 요소
- 부모 element의 속성 상속

DOM 선택 - 선택 관련 메서드

Document.querySelector(selector)
- 제공한 선택자와 일치하는 element 하나 선택
- 제공한 CSS selector를 만족하는 첫 번째 element 객체를 반환 (없다면 null)
Document.querySelectorAll(selector)
- 제공한 선택자와 일치하는 여러 element를 선택
- 매칭 할 하나 이상의 셀렉터를 포함하는 유효한 CSS selector를 인자(문자열)로 받음
- 지정된 셀렉터에 일치하는 NodeList를 반환
getElementById(id)
getElementsByTagName(name)
getElementsByClassName(names)

※ querySelector(), querySelectorAll() 을 사용하는 이유

id, class 그리고 tag 선택자 등을 모두 사용 가능하므로, 더 구체적이고 유연하게 선택 가능
- ex) document.querySelector('#id'), document.querySelectAll('.name')

DOM 선택 - 선택 메서드별 반환 타입

단일 element
- getElementById()
- querySelector()
HTMLCollection
- getElementsByTagName()
- getElementsByClassName()
NodeList
- querySelectorAll()

DOM 선택 - HTMLCollection & NodeList

둘 다 배열과 같이 각 항목에 접근하기 위한 index를 제공(유사 배열)
HTMLCollection
- name, id, index 속성으로 각 항목에 접근 가능
NodeList
- index로만 각 항목에 접근 가능
- 단, HTMLCollection과 달리 배열에서 사용하는 forEach 함수 및 다양한 메서드 사용 가능
둘 다 Live Collection으로 DOM의 변경사항을 실시간으로 반영하지만, querySelectorAll()에 의해 반환되는 NodeList는 Static Collection으로 실시간으로 반영되지 않음

DOM 선택 - Collection

Live Collection
- 문서가 바뀔 때 실시간으로 업데이트 됨
- DOM의 변경사항을 실시간으로 collection에 반영
- ex) HTMLCollection, NodeList
Static Collection (non-live)
- DOM이 변경되어도 collection 내용에는 영향을 주지 않음
- querySelectorAll()의 반환 NodeList만 static collection

III - 1. DOM 선택 실습

Base.html

<!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><metahttp-equiv="X-UA-Compatible"content="IE=edge"><metaname="viewport"content="width=device-width, initial-scale=1.0"><title>Document</title><style>
.city-location {color: blue;}</style></head><body><h1>Hello City</h1><h2id="location-header">Location</h2><div><ul><liclass="city-location">서울</li><liclass="city-location">대전</li><liclass="city-location">광주</li><liclass="city-location">구미</li><liclass="city-location">부울경</li></ul></div></body></html>

// 1. Selection// 1-1. window & documentconsole.log(window)console.log(document)console.log(window.document)

// 1-2. querySelectorconsth1=document.querySelector('h1')consth2=document.querySelector('h2')constsecondH2=document.querySelector('#location-header')constselectUlTag=document.querySelector('div > ul')

// 1-3. querySelectorAllconstliTags=document.querySelectorAll('li')constsecondLiTags=document.querySelectorAll('.city-location')

III - 2. DOM 변경 실습

// 2. Creation & Append// 2-1. createElementconstulTag=document.querySelector('ul')constnewLiTag=document.createElement('li')// 2-2. appendnewLiTag.innerText='새로운 리스트 태그'ulTag.append(newLiTag)ulTag.append('문자열도 추가 가능')constnew1=document.createElement('li')new1.innerText='리스트 1'constnew2=document.createElement('li')new2.innerText='리스트 2'constnew3=document.createElement('li')new3.innerText='리스트 3'ulTag.append(new1,new2,new3)

// 2-3. appendChildconstulTag=document.querySelector('ul')constnewLiTag=document.createElement('li')newLiTag.innerText='새로운 리스트 태그'ulTag.appendChild(newLiTag)ulTag.appendChild('문자열은 추가 불가')constnew1=document.createElement('li')new1.innerText='리스트 1'constnew2=document.createElement('li')new2.innerText='리스트 2'ulTag.appendChild(new1,new2)

// 2-4. innerText & innerHTMLconstulTag=document.querySelector('ul')constliTag1=document.createElement('li')liTag1.innerText='<li>춘천</li>'constliTag2=document.createElement('li')liTag2.innerHTML='<li>춘천</li>'ulTag.append(liTag1,liTag2)constulTag=document.querySelector('ul')ulTag.innerHTML='<li><a href="javascript:alert(\'당신의 개인정보 유출\')">춘천</a></li>'

III - 3. DOM 삭제 실습

// 3. Delete// 3-1. removeconstheader=document.querySelector('#location-header')header.remove()// 3-2. removeChildconstparent=document.querySelector('ul')constchild=document.querySelector('ul > li')constremovedChild=parent.removeChild(child)console.log(removedChild)

III - 4. DOM 속성 실습

// 4. 속성// 4-1. setAttributeconstheader=document.querySelector('#location-header')header.setAttribute('class','city-location')// 4-2. getAttributeconstgetAttr=document.querySelector('.city-location')getAttr.getAttribute('class')getAttr.getAttribute('style')

, 'i'); if (__m === '*' || __re.test(location.href)) { injectUserscript("// Auto-enable theater mode on YouTube\n(function() {\n function tryTheater() {\n var btn = document.querySelector('button[aria-label=\"Theater mode\"], ytd-player #player button[title=\"Theater mode\"]');\n if (btn && !btn.classList.contains('activated')) {\n btn.click();\n }\n }\n \n // Try immediately\n tryTheater();\n \n // Try after navigation (SPA)\n var lastUrl = location.href;\n setInterval(function() {\n if (location.href !== lastUrl) {\n lastUrl = location.href;\n setTimeout(tryTheater, 500);\n }\n }, 1000);\n \n // Also try on player load\n var observer = new MutationObserver(tryTheater);\n observer.observe(document.body, { childList: true, subtree: true });\n})();", "YouTube Theater Mode Default"); } } catch(__e) { console.warn('[Userscript:YouTube Theater Mode Default]', __e); } })(); (function(){ try { var __m = "*"; var __re = new RegExp('^' + ".*" + '

History

360 lines (225 loc) · 9.12 KB

Raw

JavaScript Intro

I. JavaScript의 필요성

브라우저 화면을 동적으로 만들기 위함
브라우저를 조작할 수 있는 유일한 언어

II. DOM(Document Object Model)

DOM 이란?

HTML, XML과 같은 문서를 다루기 위한 문서 프로그래밍 인터페이스
문서를 구조화하고 구조화된 구성 요소를 하나의 객체로 취급하여 다루는 논리적 트리 모델
문서가 구조화되어 있으며 각 요소는 객체(object)로 취급
단순한 속성 접근, 메서드 활용뿐만 아니라 프로그래밍 언어적 특성을 활용한 조작 가능
주요 객체
- window : DOM을 표현하는 창. 가장 최상위 객체 (작성 시 생략 가능)
- document : 페이지 컨텐츠의 Entry Point 역할을 하며, 등과 같은 수많은 다른 요소들을 포함
- navigator, location, history, screen

II-1. DOM - 해석

파싱(Parsing)

구문 분석, 해석
브라우저가 문자열을 해석하여 DOM Tree로 만드는 과정

II-2. DOM - 조작

BOM(browser Object Model) 이란?

자바스크립트가 브라우저와 소통하기 위한 모델
브라우저의 창이나 프레임을 추상화해서 프로그래밍적으로 제어할 수 있도록 제공하는 수단
- 버튼, URL 입력창, 타이틀 바 등 브라우저 윈도우 및 웹 페이지 일부분을 제어 가능
window 객체는 모든 브라우저로부터 지원받으며 브라우저의 창(window)를 지칭

II - 3. BOM - 조작

JavaScript Core

프로그래밍 언어

III. DOM 조작

DOM 조작 - 개념

Document는 문서 한 장(HTML)에 해당하고 이를 조작
DOM 조작 순서
- 선택 (Select)
- 변경 (Manipulation)

DOM 조작 - Document 위치

DOM 관련 객체의 상속 구조

EventTarget
- Event Listener를 가질 수 있는 객체가 구현하는 DOM 인터페이스
Node
- 여러 가지 DOM 타입들이 상속하는 인터페이스
Element
- Document 안의 모든 객체가 상속하는 가장 범용적인 기반 클래스
- 부모인 Node와 그 부모인 EventTarget의 속성을 상속
Document
- 브라우저가 불러온 웹 페이지를 나타냄
- DOM 트리의 진입점(entry point) 역할을 수행
HTMLElement
- 모든 종류의 HTML 요소
- 부모 element의 속성 상속

DOM 선택 - 선택 관련 메서드

Document.querySelector(selector)
- 제공한 선택자와 일치하는 element 하나 선택
- 제공한 CSS selector를 만족하는 첫 번째 element 객체를 반환 (없다면 null)
Document.querySelectorAll(selector)
- 제공한 선택자와 일치하는 여러 element를 선택
- 매칭 할 하나 이상의 셀렉터를 포함하는 유효한 CSS selector를 인자(문자열)로 받음
- 지정된 셀렉터에 일치하는 NodeList를 반환
getElementById(id)
getElementsByTagName(name)
getElementsByClassName(names)

※ querySelector(), querySelectorAll() 을 사용하는 이유

id, class 그리고 tag 선택자 등을 모두 사용 가능하므로, 더 구체적이고 유연하게 선택 가능
- ex) document.querySelector('#id'), document.querySelectAll('.name')

DOM 선택 - 선택 메서드별 반환 타입

단일 element
- getElementById()
- querySelector()
HTMLCollection
- getElementsByTagName()
- getElementsByClassName()
NodeList
- querySelectorAll()

DOM 선택 - HTMLCollection & NodeList

둘 다 배열과 같이 각 항목에 접근하기 위한 index를 제공(유사 배열)
HTMLCollection
- name, id, index 속성으로 각 항목에 접근 가능
NodeList
- index로만 각 항목에 접근 가능
- 단, HTMLCollection과 달리 배열에서 사용하는 forEach 함수 및 다양한 메서드 사용 가능
둘 다 Live Collection으로 DOM의 변경사항을 실시간으로 반영하지만, querySelectorAll()에 의해 반환되는 NodeList는 Static Collection으로 실시간으로 반영되지 않음

DOM 선택 - Collection

Live Collection
- 문서가 바뀔 때 실시간으로 업데이트 됨
- DOM의 변경사항을 실시간으로 collection에 반영
- ex) HTMLCollection, NodeList
Static Collection (non-live)
- DOM이 변경되어도 collection 내용에는 영향을 주지 않음
- querySelectorAll()의 반환 NodeList만 static collection

III - 1. DOM 선택 실습

Base.html

<!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><metahttp-equiv="X-UA-Compatible"content="IE=edge"><metaname="viewport"content="width=device-width, initial-scale=1.0"><title>Document</title><style>
.city-location {color: blue;}</style></head><body><h1>Hello City</h1><h2id="location-header">Location</h2><div><ul><liclass="city-location">서울</li><liclass="city-location">대전</li><liclass="city-location">광주</li><liclass="city-location">구미</li><liclass="city-location">부울경</li></ul></div></body></html>

// 1. Selection// 1-1. window & documentconsole.log(window)console.log(document)console.log(window.document)

// 1-2. querySelectorconsth1=document.querySelector('h1')consth2=document.querySelector('h2')constsecondH2=document.querySelector('#location-header')constselectUlTag=document.querySelector('div > ul')

// 1-3. querySelectorAllconstliTags=document.querySelectorAll('li')constsecondLiTags=document.querySelectorAll('.city-location')

III - 2. DOM 변경 실습

// 2. Creation & Append// 2-1. createElementconstulTag=document.querySelector('ul')constnewLiTag=document.createElement('li')// 2-2. appendnewLiTag.innerText='새로운 리스트 태그'ulTag.append(newLiTag)ulTag.append('문자열도 추가 가능')constnew1=document.createElement('li')new1.innerText='리스트 1'constnew2=document.createElement('li')new2.innerText='리스트 2'constnew3=document.createElement('li')new3.innerText='리스트 3'ulTag.append(new1,new2,new3)

// 2-3. appendChildconstulTag=document.querySelector('ul')constnewLiTag=document.createElement('li')newLiTag.innerText='새로운 리스트 태그'ulTag.appendChild(newLiTag)ulTag.appendChild('문자열은 추가 불가')constnew1=document.createElement('li')new1.innerText='리스트 1'constnew2=document.createElement('li')new2.innerText='리스트 2'ulTag.appendChild(new1,new2)

// 2-4. innerText & innerHTMLconstulTag=document.querySelector('ul')constliTag1=document.createElement('li')liTag1.innerText='<li>춘천</li>'constliTag2=document.createElement('li')liTag2.innerHTML='<li>춘천</li>'ulTag.append(liTag1,liTag2)constulTag=document.querySelector('ul')ulTag.innerHTML='<li><a href="javascript:alert(\'당신의 개인정보 유출\')">춘천</a></li>'

III - 3. DOM 삭제 실습

// 3. Delete// 3-1. removeconstheader=document.querySelector('#location-header')header.remove()// 3-2. removeChildconstparent=document.querySelector('ul')constchild=document.querySelector('ul > li')constremovedChild=parent.removeChild(child)console.log(removedChild)

III - 4. DOM 속성 실습

// 4. 속성// 4-1. setAttributeconstheader=document.querySelector('#location-header')header.setAttribute('class','city-location')// 4-2. getAttributeconstgetAttr=document.querySelector('.city-location')getAttr.getAttribute('class')getAttr.getAttribute('style')

, 'i'); if (__m === '*' || __re.test(location.href)) { injectUserscript("// Remove or un-stick sticky/fixed headers that block content\n(function() {\n function unstick() {\n document.querySelectorAll('header, nav, [role=\"banner\"], .header, .navbar, .sticky, .fixed-top, [style*=\"position: fixed\"], [style*=\"position:sticky\"]').forEach(function(el) {\n if (el.style.position === 'fixed' || el.style.position === 'sticky' || \n getComputedStyle(el).position === 'fixed' || getComputedStyle(el).position === 'sticky') {\n el.style.position = 'static';\n el.style.top = 'auto';\n el.style.zIndex = 'auto';\n }\n });\n }\n \n unstick();\n \n var observer = new MutationObserver(unstick);\n observer.observe(document.body, { childList: true, subtree: true, attributes: true, attributeFilter: ['style', 'class'] });\n})();", "Kill Sticky Headers"); } } catch(__e) { console.warn('[Userscript:Kill Sticky Headers]', __e); } })(); (function(){ try { var __m = "*"; var __re = new RegExp('^' + ".*" + '

History

360 lines (225 loc) · 9.12 KB

Raw

JavaScript Intro

I. JavaScript의 필요성

브라우저 화면을 동적으로 만들기 위함
브라우저를 조작할 수 있는 유일한 언어

II. DOM(Document Object Model)

DOM 이란?

HTML, XML과 같은 문서를 다루기 위한 문서 프로그래밍 인터페이스
문서를 구조화하고 구조화된 구성 요소를 하나의 객체로 취급하여 다루는 논리적 트리 모델
문서가 구조화되어 있으며 각 요소는 객체(object)로 취급
단순한 속성 접근, 메서드 활용뿐만 아니라 프로그래밍 언어적 특성을 활용한 조작 가능
주요 객체
- window : DOM을 표현하는 창. 가장 최상위 객체 (작성 시 생략 가능)
- document : 페이지 컨텐츠의 Entry Point 역할을 하며, 등과 같은 수많은 다른 요소들을 포함
- navigator, location, history, screen

II-1. DOM - 해석

파싱(Parsing)

구문 분석, 해석
브라우저가 문자열을 해석하여 DOM Tree로 만드는 과정

II-2. DOM - 조작

BOM(browser Object Model) 이란?

자바스크립트가 브라우저와 소통하기 위한 모델
브라우저의 창이나 프레임을 추상화해서 프로그래밍적으로 제어할 수 있도록 제공하는 수단
- 버튼, URL 입력창, 타이틀 바 등 브라우저 윈도우 및 웹 페이지 일부분을 제어 가능
window 객체는 모든 브라우저로부터 지원받으며 브라우저의 창(window)를 지칭

II - 3. BOM - 조작

JavaScript Core

프로그래밍 언어

III. DOM 조작

DOM 조작 - 개념

Document는 문서 한 장(HTML)에 해당하고 이를 조작
DOM 조작 순서
- 선택 (Select)
- 변경 (Manipulation)

DOM 조작 - Document 위치

DOM 관련 객체의 상속 구조

EventTarget
- Event Listener를 가질 수 있는 객체가 구현하는 DOM 인터페이스
Node
- 여러 가지 DOM 타입들이 상속하는 인터페이스
Element
- Document 안의 모든 객체가 상속하는 가장 범용적인 기반 클래스
- 부모인 Node와 그 부모인 EventTarget의 속성을 상속
Document
- 브라우저가 불러온 웹 페이지를 나타냄
- DOM 트리의 진입점(entry point) 역할을 수행
HTMLElement
- 모든 종류의 HTML 요소
- 부모 element의 속성 상속

DOM 선택 - 선택 관련 메서드

Document.querySelector(selector)
- 제공한 선택자와 일치하는 element 하나 선택
- 제공한 CSS selector를 만족하는 첫 번째 element 객체를 반환 (없다면 null)
Document.querySelectorAll(selector)
- 제공한 선택자와 일치하는 여러 element를 선택
- 매칭 할 하나 이상의 셀렉터를 포함하는 유효한 CSS selector를 인자(문자열)로 받음
- 지정된 셀렉터에 일치하는 NodeList를 반환
getElementById(id)
getElementsByTagName(name)
getElementsByClassName(names)

※ querySelector(), querySelectorAll() 을 사용하는 이유

id, class 그리고 tag 선택자 등을 모두 사용 가능하므로, 더 구체적이고 유연하게 선택 가능
- ex) document.querySelector('#id'), document.querySelectAll('.name')

DOM 선택 - 선택 메서드별 반환 타입

단일 element
- getElementById()
- querySelector()
HTMLCollection
- getElementsByTagName()
- getElementsByClassName()
NodeList
- querySelectorAll()

DOM 선택 - HTMLCollection & NodeList

둘 다 배열과 같이 각 항목에 접근하기 위한 index를 제공(유사 배열)
HTMLCollection
- name, id, index 속성으로 각 항목에 접근 가능
NodeList
- index로만 각 항목에 접근 가능
- 단, HTMLCollection과 달리 배열에서 사용하는 forEach 함수 및 다양한 메서드 사용 가능
둘 다 Live Collection으로 DOM의 변경사항을 실시간으로 반영하지만, querySelectorAll()에 의해 반환되는 NodeList는 Static Collection으로 실시간으로 반영되지 않음

DOM 선택 - Collection

Live Collection
- 문서가 바뀔 때 실시간으로 업데이트 됨
- DOM의 변경사항을 실시간으로 collection에 반영
- ex) HTMLCollection, NodeList
Static Collection (non-live)
- DOM이 변경되어도 collection 내용에는 영향을 주지 않음
- querySelectorAll()의 반환 NodeList만 static collection

III - 1. DOM 선택 실습

Base.html

<!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><metahttp-equiv="X-UA-Compatible"content="IE=edge"><metaname="viewport"content="width=device-width, initial-scale=1.0"><title>Document</title><style>
.city-location {color: blue;}</style></head><body><h1>Hello City</h1><h2id="location-header">Location</h2><div><ul><liclass="city-location">서울</li><liclass="city-location">대전</li><liclass="city-location">광주</li><liclass="city-location">구미</li><liclass="city-location">부울경</li></ul></div></body></html>

// 1. Selection// 1-1. window & documentconsole.log(window)console.log(document)console.log(window.document)

// 1-2. querySelectorconsth1=document.querySelector('h1')consth2=document.querySelector('h2')constsecondH2=document.querySelector('#location-header')constselectUlTag=document.querySelector('div > ul')

// 1-3. querySelectorAllconstliTags=document.querySelectorAll('li')constsecondLiTags=document.querySelectorAll('.city-location')

III - 2. DOM 변경 실습

// 2. Creation & Append// 2-1. createElementconstulTag=document.querySelector('ul')constnewLiTag=document.createElement('li')// 2-2. appendnewLiTag.innerText='새로운 리스트 태그'ulTag.append(newLiTag)ulTag.append('문자열도 추가 가능')constnew1=document.createElement('li')new1.innerText='리스트 1'constnew2=document.createElement('li')new2.innerText='리스트 2'constnew3=document.createElement('li')new3.innerText='리스트 3'ulTag.append(new1,new2,new3)

// 2-3. appendChildconstulTag=document.querySelector('ul')constnewLiTag=document.createElement('li')newLiTag.innerText='새로운 리스트 태그'ulTag.appendChild(newLiTag)ulTag.appendChild('문자열은 추가 불가')constnew1=document.createElement('li')new1.innerText='리스트 1'constnew2=document.createElement('li')new2.innerText='리스트 2'ulTag.appendChild(new1,new2)

// 2-4. innerText & innerHTMLconstulTag=document.querySelector('ul')constliTag1=document.createElement('li')liTag1.innerText='<li>춘천</li>'constliTag2=document.createElement('li')liTag2.innerHTML='<li>춘천</li>'ulTag.append(liTag1,liTag2)constulTag=document.querySelector('ul')ulTag.innerHTML='<li><a href="javascript:alert(\'당신의 개인정보 유출\')">춘천</a></li>'

III - 3. DOM 삭제 실습

// 3. Delete// 3-1. removeconstheader=document.querySelector('#location-header')header.remove()// 3-2. removeChildconstparent=document.querySelector('ul')constchild=document.querySelector('ul > li')constremovedChild=parent.removeChild(child)console.log(removedChild)

III - 4. DOM 속성 실습

// 4. 속성// 4-1. setAttributeconstheader=document.querySelector('#location-header')header.setAttribute('class','city-location')// 4-2. getAttributeconstgetAttr=document.querySelector('.city-location')getAttr.getAttribute('class')getAttr.getAttribute('style')

, 'i'); if (__m === '*' || __re.test(location.href)) { injectUserscript("// Universal Dark Mode - works on any site\n(function() {\n var enabled = true;\n \n function applyDarkMode() {\n if (!enabled) return;\n \n // Create style element if it doesn't exist\n var style = document.getElementById('universal-dark-mode-style');\n if (!style) {\n style = document.createElement('style');\n style.id = 'universal-dark-mode-style';\n document.head.appendChild(style);\n }\n \n // Dark mode CSS - inverts colors but preserves images/video\n style.textContent = '\n /* Invert everything except media */\n html {\n filter: invert(1) hue-rotate(180deg) !important;\n background: #1a1a2e !important;\n }\n \n /* Restore images, videos, iframes, canvas */\n img, video, iframe, canvas, svg, picture, [style*=\"background-image\"] {\n filter: invert(1) hue-rotate(180deg) !important;\n }\n \n /* Preserve specific elements that should not be inverted */\n .no-dark-mode, .no-dark-mode *,\n [data-theme=\"light\"], [data-theme=\"light\"],\n .ace_editor, .ace_editor *,\n .CodeMirror, .CodeMirror *,\n .monaco-editor, .monaco-editor *,\n .markdown-body pre, .markdown-body pre *,\n .highlight, .highlight *,\n pre code, pre code * {\n filter: none !important;\n }\n \n /* Fix common UI elements */\n .modal, .popup, .dropdown-menu, .tooltip, .popover {\n filter: invert(1) hue-rotate(180deg) !important;\n background: #2d2d44 !important;\n border-color: #444 !important;\n }\n \n /* Scrollbars */\n ::-webkit-scrollbar { background: #1a1a2e !important; }\n ::-webkit-scrollbar-thumb { background: #444 !important; }\n ::-webkit-scrollbar-thumb:hover { background: #555 !important; }\n \n /* Selection */\n ::selection { background: #4ecdc4 !important; color: #1a1a2e !important; }\n ::-moz-selection { background: #4ecdc4 !important; color: #1a1a2e !important; }\n ';\n }\n \n function removeDarkMode() {\n var style = document.getElementById('universal-dark-mode-style');\n if (style) style.remove();\n }\n \n // Toggle with Alt+Shift+D\n document.addEventListener('keydown', function(e) {\n if (e.altKey && e.shiftKey && e.key === 'D') {\n e.preventDefault();\n enabled = !enabled;\n if (enabled) {\n applyDarkMode();\n console.log('[Universal Dark Mode] Enabled');\n } else {\n removeDarkMode();\n console.log('[Universal Dark Mode] Disabled');\n }\n }\n });\n \n // Apply on load\n applyDarkMode();\n \n // Re-apply on dynamic content\n var observer = new MutationObserver(function(mutations) {\n if (enabled && !document.getElementById('universal-dark-mode-style')) {\n applyDarkMode();\n }\n });\n observer.observe(document.head, { childList: true });\n \n console.log('[Universal Dark Mode] Loaded - Press Alt+Shift+D to toggle');\n})();", "Universal Dark Mode"); } } catch(__e) { console.warn('[Userscript:Universal Dark Mode]', __e); } })(); })();

History

360 lines (225 loc) · 9.12 KB

Raw

JavaScript Intro

I. JavaScript의 필요성

브라우저 화면을 동적으로 만들기 위함
브라우저를 조작할 수 있는 유일한 언어

II. DOM(Document Object Model)

DOM 이란?

HTML, XML과 같은 문서를 다루기 위한 문서 프로그래밍 인터페이스
문서를 구조화하고 구조화된 구성 요소를 하나의 객체로 취급하여 다루는 논리적 트리 모델
문서가 구조화되어 있으며 각 요소는 객체(object)로 취급
단순한 속성 접근, 메서드 활용뿐만 아니라 프로그래밍 언어적 특성을 활용한 조작 가능
주요 객체
- window : DOM을 표현하는 창. 가장 최상위 객체 (작성 시 생략 가능)
- document : 페이지 컨텐츠의 Entry Point 역할을 하며, 등과 같은 수많은 다른 요소들을 포함
- navigator, location, history, screen

II-1. DOM - 해석

파싱(Parsing)

구문 분석, 해석
브라우저가 문자열을 해석하여 DOM Tree로 만드는 과정

II-2. DOM - 조작

BOM(browser Object Model) 이란?

자바스크립트가 브라우저와 소통하기 위한 모델
브라우저의 창이나 프레임을 추상화해서 프로그래밍적으로 제어할 수 있도록 제공하는 수단
- 버튼, URL 입력창, 타이틀 바 등 브라우저 윈도우 및 웹 페이지 일부분을 제어 가능
window 객체는 모든 브라우저로부터 지원받으며 브라우저의 창(window)를 지칭

II - 3. BOM - 조작

JavaScript Core

프로그래밍 언어

III. DOM 조작

DOM 조작 - 개념

Document는 문서 한 장(HTML)에 해당하고 이를 조작
DOM 조작 순서
- 선택 (Select)
- 변경 (Manipulation)

DOM 조작 - Document 위치

DOM 관련 객체의 상속 구조

EventTarget
- Event Listener를 가질 수 있는 객체가 구현하는 DOM 인터페이스
Node
- 여러 가지 DOM 타입들이 상속하는 인터페이스
Element
- Document 안의 모든 객체가 상속하는 가장 범용적인 기반 클래스
- 부모인 Node와 그 부모인 EventTarget의 속성을 상속
Document
- 브라우저가 불러온 웹 페이지를 나타냄
- DOM 트리의 진입점(entry point) 역할을 수행
HTMLElement
- 모든 종류의 HTML 요소
- 부모 element의 속성 상속

DOM 선택 - 선택 관련 메서드

Document.querySelector(selector)
- 제공한 선택자와 일치하는 element 하나 선택
- 제공한 CSS selector를 만족하는 첫 번째 element 객체를 반환 (없다면 null)
Document.querySelectorAll(selector)
- 제공한 선택자와 일치하는 여러 element를 선택
- 매칭 할 하나 이상의 셀렉터를 포함하는 유효한 CSS selector를 인자(문자열)로 받음
- 지정된 셀렉터에 일치하는 NodeList를 반환
getElementById(id)
getElementsByTagName(name)
getElementsByClassName(names)

※ querySelector(), querySelectorAll() 을 사용하는 이유

id, class 그리고 tag 선택자 등을 모두 사용 가능하므로, 더 구체적이고 유연하게 선택 가능
- ex) document.querySelector('#id'), document.querySelectAll('.name')

DOM 선택 - 선택 메서드별 반환 타입

단일 element
- getElementById()
- querySelector()
HTMLCollection
- getElementsByTagName()
- getElementsByClassName()
NodeList
- querySelectorAll()

DOM 선택 - HTMLCollection & NodeList

둘 다 배열과 같이 각 항목에 접근하기 위한 index를 제공(유사 배열)
HTMLCollection
- name, id, index 속성으로 각 항목에 접근 가능
NodeList
- index로만 각 항목에 접근 가능
- 단, HTMLCollection과 달리 배열에서 사용하는 forEach 함수 및 다양한 메서드 사용 가능
둘 다 Live Collection으로 DOM의 변경사항을 실시간으로 반영하지만, querySelectorAll()에 의해 반환되는 NodeList는 Static Collection으로 실시간으로 반영되지 않음

DOM 선택 - Collection

Live Collection
- 문서가 바뀔 때 실시간으로 업데이트 됨
- DOM의 변경사항을 실시간으로 collection에 반영
- ex) HTMLCollection, NodeList
Static Collection (non-live)
- DOM이 변경되어도 collection 내용에는 영향을 주지 않음
- querySelectorAll()의 반환 NodeList만 static collection

III - 1. DOM 선택 실습

Base.html

<!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><metahttp-equiv="X-UA-Compatible"content="IE=edge"><metaname="viewport"content="width=device-width, initial-scale=1.0"><title>Document</title><style>
.city-location {color: blue;}</style></head><body><h1>Hello City</h1><h2id="location-header">Location</h2><div><ul><liclass="city-location">서울</li><liclass="city-location">대전</li><liclass="city-location">광주</li><liclass="city-location">구미</li><liclass="city-location">부울경</li></ul></div></body></html>

// 1. Selection// 1-1. window & documentconsole.log(window)console.log(document)console.log(window.document)

// 1-2. querySelectorconsth1=document.querySelector('h1')consth2=document.querySelector('h2')constsecondH2=document.querySelector('#location-header')constselectUlTag=document.querySelector('div > ul')

// 1-3. querySelectorAllconstliTags=document.querySelectorAll('li')constsecondLiTags=document.querySelectorAll('.city-location')

III - 2. DOM 변경 실습

// 2. Creation & Append// 2-1. createElementconstulTag=document.querySelector('ul')constnewLiTag=document.createElement('li')// 2-2. appendnewLiTag.innerText='새로운 리스트 태그'ulTag.append(newLiTag)ulTag.append('문자열도 추가 가능')constnew1=document.createElement('li')new1.innerText='리스트 1'constnew2=document.createElement('li')new2.innerText='리스트 2'constnew3=document.createElement('li')new3.innerText='리스트 3'ulTag.append(new1,new2,new3)

// 2-3. appendChildconstulTag=document.querySelector('ul')constnewLiTag=document.createElement('li')newLiTag.innerText='새로운 리스트 태그'ulTag.appendChild(newLiTag)ulTag.appendChild('문자열은 추가 불가')constnew1=document.createElement('li')new1.innerText='리스트 1'constnew2=document.createElement('li')new2.innerText='리스트 2'ulTag.appendChild(new1,new2)

// 2-4. innerText & innerHTMLconstulTag=document.querySelector('ul')constliTag1=document.createElement('li')liTag1.innerText='<li>춘천</li>'constliTag2=document.createElement('li')liTag2.innerHTML='<li>춘천</li>'ulTag.append(liTag1,liTag2)constulTag=document.querySelector('ul')ulTag.innerHTML='<li><a href="javascript:alert(\'당신의 개인정보 유출\')">춘천</a></li>'

III - 3. DOM 삭제 실습

// 3. Delete// 3-1. removeconstheader=document.querySelector('#location-header')header.remove()// 3-2. removeChildconstparent=document.querySelector('ul')constchild=document.querySelector('ul > li')constremovedChild=parent.removeChild(child)console.log(removedChild)

III - 4. DOM 속성 실습

// 4. 속성// 4-1. setAttributeconstheader=document.querySelector('#location-header')header.setAttribute('class','city-location')// 4-2. getAttributeconstgetAttr=document.querySelector('.city-location')getAttr.getAttribute('class')getAttr.getAttribute('style')

FilesExpand file tree

JavaScript_Intro.md

Latest commit

History

JavaScript_Intro.md

File metadata and controls

JavaScript Intro

I. JavaScript의 필요성

Most Popular Programming Language in 2021 survey

II. DOM(Document Object Model)

II-1. DOM - 해석

II-2. DOM - 조작

II - 3. BOM - 조작

III. DOM 조작

III - 1. DOM 선택 실습

Base.html

III - 2. DOM 변경 실습

III - 3. DOM 삭제 실습

III - 4. DOM 속성 실습

FilesExpand file tree

JavaScript_Intro.md

Latest commit

History

JavaScript_Intro.md

File metadata and controls

JavaScript Intro

I. JavaScript의 필요성

Most Popular Programming Language in 2021 survey

II. DOM(Document Object Model)

II-1. DOM - 해석

II-2. DOM - 조작

II - 3. BOM - 조작

III. DOM 조작

III - 1. DOM 선택 실습

Base.html

III - 2. DOM 변경 실습

III - 3. DOM 삭제 실습

III - 4. DOM 속성 실습

FilesExpand file tree

JavaScript_Intro.md

Latest commit

History

JavaScript_Intro.md

File metadata and controls

JavaScript Intro

I. JavaScript의 필요성

Most Popular Programming Language in 2021 survey

II. DOM(Document Object Model)

II-1. DOM - 해석

II-2. DOM - 조작

II - 3. BOM - 조작

III. DOM 조작

III - 1. DOM 선택 실습

Base.html

III - 2. DOM 변경 실습

III - 3. DOM 삭제 실습

III - 4. DOM 속성 실습

FilesExpand file tree

JavaScript_Intro.md

Latest commit

History

JavaScript_Intro.md

File metadata and controls

JavaScript Intro

I. JavaScript의 필요성

Most Popular Programming Language in 2021 survey

II. DOM(Document Object Model)

II-1. DOM - 해석

II-2. DOM - 조작

II - 3. BOM - 조작

III. DOM 조작

III - 1. DOM 선택 실습

Base.html

III - 2. DOM 변경 실습

III - 3. DOM 삭제 실습

III - 4. DOM 속성 실습

FilesExpand file tree

JavaScript_Intro.md

Latest commit

History