고정 헤더 영역
상세 컨텐츠
본문
html 구조 보는 방법
클래스의 애드 리무브는 이렇게한다.
<!DOCTYPE html>
<html lang="en">
<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</title>
<style>
.hidden {
display: none;
}
</style>
</head>
<body>
<div id="item" class="">This istext!New line</div>
<script>
const div = document.createElement('div');
div.className = 'foo';
// our starting state: <div class="foo"></div>
console.log(div.outerHTML);
// use the classList API to remove and add classes
div.classList.remove("foo");
div.classList.add("anotherclass");
// <div class="anotherclass"></div>
console.log(div.outerHTML);
// if visible is set remove it, otherwise add it
div.classList.toggle("visible");
// add/remove visible, depending on test conditional, i less than 10
div.classList.toggle("visible", i < 10 );
console.log(div.classList.contains("foo"));
// add or remove multiple classes
div.classList.add("foo", "bar", "baz");
div.classList.remove("foo", "bar", "baz");
// add or remove multiple classes using spread syntax
const cls = ["foo", "bar"];
div.classList.add(...cls);
div.classList.remove(...cls);
// replace class "foo" with class "bar"
div.classList.replace("foo", "bar");
</script>
</body>
</html>스타일 속성을 다 써버리는거
<!DOCTYPE html>
<html lang="en-US">
<body style="font-weight:bold">
<div style="border-top: 1px solid blue; color:red" id="elt">
An example div
</div>
<pre id="out"></pre>
<script !src="">
const element = document.getElementById("elt");
const out = document.getElementById("out");
const elementStyle = element.style;
// We loop through all styles (for…of doesn't work with CSStyleDeclaration)
for (const prop in elementStyle) {
if (Object.hasOwn(elementStyle, prop)) {
out.textContent += `${
elementStyle[prop]
} = '${elementStyle.getPropertyValue(elementStyle[prop])}'\n`;
}
}
</script>
</body>
</html>
스타일즈 속성을 가져오는 방법
<!DOCTYPE html>
<html lang="en-US">
<head>
<style>
p {
width: 400px;
margin: 0 auto;
padding: 20px;
line-height: 2;
font-size: 2rem;
font-family: sans-serif;
background: purple;
color: white;
text-align: center;
}
</style>
</head>
<body style="font-weight:bold">
<p>Hello</p>
<script !src="">
let para = document.querySelector('p');
let compStyles = window.getComputedStyle(para);
console.log(compStyles.color);
para.textContent = 'My computed font-size is ' + compStyles.getPropertyValue('font-size') + ',\nand my computed line-height is ' + compStyles.getPropertyValue('line-height') + '.';
</script>
</body>
</html>어트리뷰트 보는 ㄴ방법
<!DOCTYPE html>
<html lang="en-US">
<head>
<style>
h3::after {
content: ' rocks!';
}
</style>
</head>
<body>
<h3 id="div1" style="color: #0066ff" align="center">generated content</h3>
<button>Hello World</button>
<script>
let div1 = document.getElementById("div1");
let align = div1.getAttribute("align");
alert(align); // id가 "div1"인 요소(element)의 align 값을 보여줍니다.
const button = document.querySelector("button");
button.setAttribute("name", "helloButton");
button.setAttribute("disabled", "");
console.log(document.getElementsByTagName("button")[0].attributes);
</script>
</body>
</html>
자식노드 지우기
<!DOCTYPE html>
<html lang="en-US">
<head>
<style>
h3::after {
content: ' rocks!';
}
</style>
</head>
<body>
<div id="top">haha
<div id="nested">nested</div>
</div>
<script>
let d = document.getElementById("top");
let d_nested = document.getElementById("nested");
let throwawayNode = d.removeChild(d_nested);
//부모노드 이름 없이 지우기
// let node = document.getElementById("nested");
// if (node.parentNode) {
// node.parentNode.removeChild(node);
// }
//모든 차일드 다 지우기
// let element = document.getElementById("idOfParent");
// while (element.firstChild) {
// element.removeChild(element.firstChild);
// }
</script>
</body>
</html>
댓글 영역