// 상세 설명을 직접 HTML을 수정해 상세 설명 가리기 (스타일 visibility 속성을 hidden으로)
doc01 = html`
<div>
<p>대충 설명 대충 설명 대충 설명 설명 대충 설명 대충 설명 대충 설명</p>
<div id="detail">
여기서부터
<h3 style="visibility: hidden">상세 설명</h3>
<p style="visibility: hidden">상세 상세 상세 상세 상세 상세 상세 상세 상세 상세 상세 상세 상세 상세
상세 상세 상세 상세 상세 상세 상세 상세 상세 상세 상세 상세 상세 상세</p>
여기까지가 상세설명이었지롱
<div>
</div>
`
// 상세 설명을 DOM을 통해 상세 설명 가리기 (스타일 visibility 속성을 hidden으로)
doc02 = html`
<div>
<p>대충 설명 대충 설명 대충 설명 설명 대충 설명 대충 설명 대충 설명</p>
<div id="detail">
여기서부터
<h3>상세 설명</h3>
<p>상세 상세 상세 상세 상세 상세 상세 상세 상세 상세 상세 상세 상세 상세
상세 상세 상세 상세 상세 상세 상세 상세 상세 상세 상세 상세 상세 상세</p>
여기까지가 상세설명이었지롱
<div>
</div>
`
doc02.querySelector("#detail h3")
doc02.querySelector("#detail h3").innerHTML
doc02.querySelector("#detail h3").style.visibility = "hidden"
doc02.querySelector("#detail p")
doc02.querySelector("#detail p").innerHTML
/* {
const p = doc02.querySelector("#detail p")
p.style.visibility = "hidden"
} */
doc03 = html`
<div>
내용0
<h3>제목</h3>
내용2
<ul>
<li>항목0</li>
<li>항목1</li>
</ul>
내용4
</div>
`
doc03
doc03.childElementCount // 자녀 중 요소(element) 인 것들의 개수
doc03.children // 자녀 요소들
doc03.childNodes // 자녀 노드들
doc03.childNodes[3].children[1].innerHTML
doc03.childNodes[0] instanceof Node
doc03.childNodes[0] instanceof Element // Text는 요소(Element)가 아니다
doc03.childNodes[1] instanceof Node
doc03.childNodes[1] instanceof Element
doc04 = html`<ul><li>항목0</li></ul>`
// innerHTML 에 HTML 소스코드를 String 형태로 직접 작성
// doc04.innerHTML += "<li>항목 추가</li>"
doc05 = html`<ul><li>항목0</li></ul>`
doc05.children
/*
{
const li = document.createElement("li") // 새로운 li 요소를 생성
const tn = document.createTextNode("항목 추가") // 새로운 Text 노드를 생성
li.appendChild(tn) // 생성한 Text 노드를 li에 추가
doc05.appendChild(li)
}
*/
doc10 = html`<ul><li>항목0</li><li>항목1</li><li>항목2</li><li>항목3</li><li>항목4</li></ul>`
// 첫번째 항목을 맨 끝으로 보내기
// doc10.appendChild( doc10.children[0] )
// 첫번째 항목을 세번째로 보내기
// doc10.insertBefore( doc10.children[0], doc10.children[3] )
// 첫번째 항목과 같은 내용의 (안에 있는 내용까지 복사된) 복사본을 새로 만들어서 맨 끝으로 보내기
// doc10.appendChild( doc10.children[0].cloneNode(true) )
doc11 = html`<ul><li>항목0</li><li>항목1</li><li>항목2</li><li>항목3</li><li>항목4</li></ul>`
// doc11.remove() // doc11을 삭제
// doc11.children[2].remove() // doc11의 index 2위치의 노드를 삭제
doc06 = html`<ul id="mylist" class="uuu lll" data-aaa="123"><li>항목0</li><li>항목1</li><li>항목2</li></ul>`
doc06.id // 간편하게 접근
// doc06.id = "yourlist" // 간편하게 변경
doc06.class // 클래스는 간편하게 접근이 되지 않는다!!!! (다른 더 복잡한 방식으로 저장되어 있다)
doc06.dataset.aaa // data-로 시작하는 이름의 속성은 dataset이라는 더 복잡한 구조로 저장됨
doc06.attributes
doc06.attributes[0].name
doc06.attributes[0].value
doc06.getAttributeNames()
doc06.getAttributeNode("class").name
doc06.getAttributeNode("class").value
doc06.getAttribute("id")
doc06.getAttribute("class")
doc07 = { // doc06과 같은 내용으로 만들어 보자
const ul = document.createElement("ul")
// ul.setAttribute("id", "mylist")
// ul.setAttribute("class", "uuu lll")
// ul.setAttribute("data-aaa", "123")
for (let i=0; i<3; ++i) {
const li = document.createElement("li")
const tn = document.createTextNode("항목"+i)
li.appendChild(tn)
ul.appendChild(li)
}
return ul
}
doc07.getAttributeNames()
doc08 = html`<ul id="mylist" class="uuu lll"><li>항목0</li><li>항목1</li><li>항목2</li></ul>`
{
// doc08.setAttribute("id","yourlist") // 기존에 있는 이름의 속성이면 수정
return doc08.getAttribute("id")
}
{
// doc08.removeAttribute("class")
return doc08.getAttributeNames()
}
doc09 = html`<div class="c1 c2 c3 c4">...</div>`
doc09.classList
{
// doc09.classList.add("c5")
// doc09.classList.replace("c2","a2")
// doc09.classList.remove("c3")
return doc09.getAttribute("class")
}
Purpose-built for displays of data
Observable is your go-to platform for exploring data and creating expressive data visualizations. Use reactive JavaScript notebooks for prototyping and a collaborative canvas for visual data exploration and dashboard creation.
