<!-- μμ 1 -->
<ul></ul>
<button>Make me MORE!</button>
const myBtn = document.querySelector(βbuttonβ);
const myUl = document.querySelector(βulβ);
myBtn.addEventListener(βclickβ, function(){
// li μμλ₯Ό μμ±
const myLi = document.createElement(βliβ);
// μμ±λ liλ₯Ό ulμ μΆκ°
myUl.appendChild(myLi);
})
// document.createElement(target); target μμλ₯Ό μμ±
// document.createTextNode(target); target ν
μ€νΈλ₯Ό μμ±
// element.appendChild(target); target μμλ₯Ό elementμ μμμΌλ‘ μμΉ
// element.removeChild(target); elementμ target μμ μμλ₯Ό μ κ±°
<!-- μμ 2 -->
<div id="parentElement">
<span id="childElement">hello guys~</span>
</div>
let span = document.createElement("span");
let sibling = document.getElementById("childElement");
let parentDiv = document.getElementById("parentElement");
// parentElement.insertBefore(target, location);
// targetμμλ₯Ό elementμ μμμΈ location μμΉλ‘ μ΄λν©λλ€.
parentDiv.insertBefore(span, sibling);
<p></p>
<input type="text">
<button>Write Something!</button>
const myBtn = document.querySelector("button");
const myP = document.querySelector("p");
const myInput = document.querySelector("input");
myBtn.addEventListener('click', function(){
myP.textContent = myInput.value;
});
// input μμμ 'input' μ΄λ²€νΈλ₯Ό μ°κ²°νλ©΄ μ€μκ°μΌλ‘ κ°μ΄ λ°μλκ² λ§λ€ μλ μμ΅λλ€.
myInput.addEventListener('input', ()=>{
myP.textContent = myInput.value;
});
myP.innerHTML = "<strong>I'm Strong!!</strong>";
myP.outerHTML = "<div></div>";
// innerHTML μ μμ λ΄μ ν¬ν¨ λ HTML λ§ν¬μ
μ κ°μ Έμ€κ±°λ μ€μ
// innerText μμ±μ μμμ κ·Έ μμμ λ λλ§ λ ν
μ€νΈ μ½ν
μΈ λ₯Ό λνλ
λλ€.
// (innerTextλ "μ¬λμ΄ μ½μ μ μλ" μμλ§ μ²λ¦¬)
// textContent μμ±μ λ
Έλμ ν
μ€νΈ μ½ν
μΈ λ₯Ό νν
innerHTML
μ¬μ©μ μ£Όμ μ¬νμ¬μ΄νΈμ 곡격 κ²½λ‘κ° λμ΄ μ μ¬μ μΈ λ³΄μ μνμ΄ λ°μν μ μλ€.
const name = "John"; // assuming 'el' is an HTML DOM element el.innerHTML = name; // harmless in this case // ... name = "<script>alert('I am John in an annoying alert!')</script>"; el.innerHTML = name; // harmless in this case
- μ°Έκ³
Element.innerHTML - MDN
innerText
μtextContent
μ μ°¨μ΄
innerText
- ν μ€νΈμ λ λλ§λ λͺ¨μμ μΈμ
- λ Έλμ ν¬ν¨λ 보μ΄λ ν μ€νΈ(visible text)λ₯Ό λ°ν
innerText
μ μ±λ₯μ΄ ν¨μ¬ λ 무κ²κ³ , λ μ΄μμ μ 보λ₯Ό λ°ννλ €λ©΄ λ μ΄μμμ μ λ³΄κ° νμνλ€.- HTMLElement κ°μ²΄μ λν΄μλ§ μ μ
=>innerText
λ cssκ° λ λλ§ λ¨
=> 곡백μ μΈμνμ§ λͺ»ν¨(visible textλ§ μ²λ¦¬)
textContent
- ν μ€νΈμ λ λλ§λ λͺ¨μμ μΈμνμ§ μλλ€.
- μ 체 ν μ€νΈλ₯Ό λ°ν
- λͺ¨λ Node κ°μ²΄μ λν΄ μ μλλ€.
=> 곡백, μ€ λ°κΏκ³Ό κ°μ μμμ μΈμνμ¬ λ§ν¬μ λ§ μ μ²νμ¬ λ°ν
=> λΈλΌμ°μ νΈνμ±μ΄ μ’κ³ , ν μ€νΈ 컨ν μΈ μ row κ°μ 보μ¬μ€ νμ±μ΄ λΉ λ¦<div class="cont-txt"> <span>Hello <span style="display: none">World</span></span> </div>
const txt = document.querySelector(".cont-txt"); console.log(txt.innerText); // Hello console.log(txt.textContent); // Hello World
<strong class="sayHi"> λ°κ°μ΅λλ€. </strong>
const sayHi = document.querySelector(".sayHi");
// sayHi μμκ° μμνκΈ° μ μ μμ λ°°μΉ
sayHi.insertAdjacentHTML("beforebegin", "<span>μλ
νμΈμ μ λ</span>");
// sayHi μμκ° μμν ν
sayHi.insertAdjacentHTML("afterbegin", "<span>μ¬νμ
λλ€</span>");
// sayHi μμκ° λλκΈ° μ
sayHi.insertAdjacentHTML("beforeend", "<span>λ©΄μ μ€μλ©΄</span>");
// sayHi μμκ° λλ ν
sayHi.insertAdjacentHTML("afterend", "<span>μΉν¨μ¬λ릴κ²μ</span>");
// μλ
νμΈμ μ λμ¬νμ
λλ€ λ°κ°μ΅λλ€. λ©΄μ μ€μλ©΄μΉν¨μ¬λ릴κ²μ
parentNode
: λΆλͺ¨ λ
Έλ νμfirstChild
, lastChild
: μμ λ
Έλ νμhasChildNodes()
: μμ λ
Έλκ° μλμ§ νμΈνκ³ Booleanκ° λ°νchildNodes
: μμ λ
Έλμ 컬λ μ
λ°ν. ν
μ€νΈ μμλ₯Ό ν¬ν¨ν λͺ¨λ μμ μμλ₯Ό λ°νchildren
: μμ λ
Έλμ 컬λ μ
μ λ°ν. μμ μμ μ€μμ Element type μμλ§ λ°νpreviousSibling
, nextSibling
: νμ λ
Έλλ₯Ό νμ. text nodeλ₯Ό ν¬ν¨ν λͺ¨λ νμ λ
Έλλ₯Ό νμpreviousElementSibling
, nextElementSibling
: νμ λ
Έλλ₯Ό νμ. νμ λ
Έλ μ€μμ Element type μμλ§μ νμ<!DOCTYPE html>
<html lang="ko">
<head>
<title>Document</title>
</head>
<body>
<!-- μ£Όμμ
λλ€ μ£Όμ. -->
<article class="cont">
<h1>μλ
νμΈμ μ λ μ΄λ° μ¬λμ
λλ€.</h1>
<p>μ§κΈλΆν° μκΈ°μκ° μ¬λ¦¬κ² μ΅λλ€</p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Deserunt incidunt
voluptates laudantium fugit, omnis dolore itaque esse exercitationem quam
culpa praesentium, quisquam repudiandae aut. Molestias qui quas ea iure
officiis.
<strong>κ°μ¬ν©λλ€!</strong>
</article>
<script>
const cont = document.querySelector(".cont");
// 첫λ²μ§Έ μμμ μ°Ύμ΅λλ€.
console.log(cont.firstElementChild); // <h1>μλ
νμΈμ μ λ μ΄λ° μ¬λμ
λλ€.</h1>
// λ§μ§λ§ μμμ μ°Ύμ΅λλ€.
console.log(cont.lastElementChild); // strong>κ°μ¬ν©λλ€!</strong>
// λ€μ νμ μμλ₯Ό μ°Ύμ΅λλ€.
console.log(cont.nextElementSibling); // script
// μ΄μ νμ μμλ₯Ό μ°Ύμ΅λλ€.
console.log(cont.previousSibling); // #text
// λͺ¨λ μ§κ³μμμ μ°Ύμ΅λλ€.
console.log(cont.children); // HTMLCollection(3)
// λΆλͺ¨ μμλ₯Ό μ°Ύμ΅λλ€.
console.log(cont.parentElement); // body
</script>
</body>
</html>
=> μ΄λ¬ν κ³Όμ μμ μ΄λ²€νΈ 리μ€ν°κ° μ°¨λ‘λ‘ μ€νλλ κ²
= μ΄λ²€νΈ μ ν(event propagation)
νμ€ DOM μ΄λ²€νΈμμ μ μν μ΄λ²€νΈ νλ¦μ 3λ¨κ³
- μΊ‘μ²λ§ λ¨κ³(Capture Phase) : μ΄λ²€νΈκ° νμ μμλ‘ μ νλλ λ¨κ³
- νν· λ¨κ³(Target Phase) : μ΄λ²€νΈκ° μ€μ νκΉ μμμ μ λ¬λλ λ¨κ³
- λ²λΈλ§ λ¨κ³(Bubbling Phase) : μ΄λ²€νΈκ° μμ μμλ‘ μ νλλ λ¨κ³
- μ°Έκ³
λ²λΈλ§κ³Ό μΊ‘μ²λ§
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
</head>
<body>
<article class="parent">
<button class="btn" type="button">λ²νΌ</button>
</article>
<script>
const parent = document.querySelector(".parent");
const btnFirst = document.querySelector(".btn");
btnFirst.addEventListener("click", (event) => {
console.log("btn capture!");
}, true);
window.addEventListener("click", () => {
console.log("window capture!");
}, true); // true : μΊ‘μ²λ§ λ¨κ³μ μ΄λ²€νΈκ° λ°μνλλ‘ ν©λλ€.
document.addEventListener("click", () => {
console.log("document capture!");
}, true);
parent.addEventListener("click", () => {
console.log("parent capture!");
}, true);
btnFirst.addEventListener("click", (event) => {
console.log("btn bubble!");
}); // true κ°μ΄ μμΌλ―λ‘ λ²λΈλ§ μ΄λ²€νΈκ° μΌμ΄λλ€
parent.addEventListener("click", () => {
console.log("parent bubble!");
});
document.addEventListener("click", () => {
console.log("document bubble!");
});
window.addEventListener("click", () => {
console.log("window bubble!");
});
</script>
</body>
</html>
μ΄λ²€νΈ κ°μ²΄
λ μ΄λ²€νΈλ₯Ό λ°μμν¨ μμμ λ°μν μ΄λ²€νΈμ λν μ μ©ν μ 보λ₯Ό μ 곡μ΄λ²€νΈ κ°μ²΄
λ λμ μΌλ‘ μμ±event.target
: μ΄λ²€νΈκ° λ°μν κ°μ₯ μμͺ½μ μμevent.currentTarget
: μ΄λ²€νΈλ₯Ό νΈλ€λ§νλ νμ¬ μμ(νΈλ€λ¬κ° μ€μ ν λΉλ μμ)<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
</head>
<body>
<button class="here">
<span>target</span>
</button>
<script>
const here = document.querySelector(".here");
here.addEventListener("click", function (e) {
console.log(e.target);
console.log(e.currentTarget);
});
</script>
</body>
</html>
μ°Έκ³
event targetκ³Ό currentTargetμ μ°¨μ΄μ
λ²λΈλ§κ³Ό μΊ‘μ²λ§ - λͺ¨λ μλ°μ€ν¬λ¦½νΈ νν 리μΌ
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>μ΄λ²€νΈ μμ</title>
<style></style>
</head>
<body>
<article class="parent">
<ol>
<li><button class="btn-first" type="button">λ²νΌ1</button></li>
<li><button type="button">λ²νΌ2</button></li>
<li><button type="button">λ²νΌ3</button></li>
</ol>
</article>
<script>
// μ΄λ²€νΈ 리μ€λλ λΆλͺ¨μ λ¬μλ¨μ§λ§
// μμμκ²λ μ΄λ²€νΈκ° μ€νλ μ μκ² ν¨
const parent = document.querySelector(".parent");
parent.addEventListener("click", function (event) {
console.log(event.target);
if (event.target.nodeName === "BUTTON") {
event.target.innerText = "λ²νΌ4";
}
});
</script>
</body>
</html>
this
this
κ°μ μ΄λ²€νΈκ° μ°κ²°λ λ
Έλλ₯Ό μ°Έμ‘°νλ€.event.currentTarget
μμ±μ μ°Έμ‘° κ°κ³Ό μ μ¬νλ€.this
κ° κ°λ¦¬ν€λ λμμ΄ λ¬λΌμ§λ€.<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
</head>
<body>
<article class="parent">
<ol>
<li><button class="btn-first" type="button">λ²νΌ1</button></li>
<li><button type="button">λ²νΌ2</button></li>
<li><button type="button">λ²νΌ3</button></li>
</ol>
</article>
<script>
const parent = document.querySelector(".parent");
parent.addEventListener("click", function (event) {
console.log(this);
console.log(event);
// console.log(event)λ‘ currentTarget νμΈ μ null κ°μ΄μ§λ§
// console.log(event.currentTarget)λ₯Ό νμΈν΄λ³΄λ©΄ μ λμ¨λ€
console.log(event.currentTarget);
});
// νμ΄ν ν¨μλ ν΄λΉ μ€μ½νμ μμ μ€μ½νλ₯Ό κ°λ¦¬ν¨λ€.
parent.addEventListener("click", () => {
console.log(this); // window
});
</script>
</body>
</html>
Jasmine
- TDD λΌμ΄λΈλ¬λ¦¬
- Jasmine - μ΅μ λ²μ λ€μ΄λ°κΈ°
- νκ²½ ꡬμ±μ standalone λ°©μμ μ΄μ©
- standalone λ°©μ : λͺ¨λ μμ€λ―Ό μ½λλ₯Ό λΈλΌμ°μ μ μ¬λ €μ μ€ννλ λ°©λ²
=> μ€ν κ²°κ³Όλ₯Ό κ°λ¨νκ² νμΈν μ μλ€
=> μ€λ¬΄μμλ κ±°μ μ¬μ©νμ§ μλλ€.- karma λΌμ΄λΈλ¬λ¦¬μ ν¨κ² μ€μΉνλ λ°©μ(μλν) : μ€λ¬΄μμ μ£Όλ‘ μ¬μ©νλ λ°©μ
- κ°λ¨ν ν¨μ ν μ€νΈ ν΄λ³΄κΈ°
- κ°μ²΄μ§ν₯μ μ½λλ₯Ό ꡬννμ¬ TDD
=> μ΄ μΈκ°μ§ λ¨κ³μ λμμλ λ°λ³΅
μ°μ TDD λ μ΄λ°κ±°μκ΅°μ¬!!