고정 헤더 영역
상세 컨텐츠
본문
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>getElementsByTagName example</title>
<script>
function getAllParaElems() {
var allParas = document.getElementsByTagName('p');
var num = allParas.length;
alert('There are ' + num + ' paragraph in this document');
}
function div1ParaElems() {
var div1 = document.getElementById('div1');
var div1Paras = div1.getElementsByTagName('p');
var num = div1Paras.length;
alert('There are ' + num + ' paragraph in #div1');
}
function div2ParaElems() {
var div2 = document.getElementById('div2');
var div2Paras = div2.getElementsByTagName('p');
var num = div2Paras.length;
alert('There are ' + num + ' paragraph in #div2');
}
</script>
</head>
<body style="border: solid green 3px">
<p>Some outer text</p>
<p>Some outer text</p>
<div id="div1" style="border: solid blue 3px">
<p>Some div1 text</p>
<p>Some div1 text</p>
<p>Some div1 text</p>
<div id="div2" style="border: solid red 3px">
<p>Some div2 text</p>
<p>Some div2 text</p>
</div>
</div>
<p>Some outer text</p>
<p>Some outer text</p>
<button onclick="getAllParaElems();">
show all p elements in document</button><br />
<button onclick="div1ParaElems();">
show all p elements in div1 element</button><br />
<button onclick="div2ParaElems();">
show all p elements in div2 element</button>
</body>
</html>
html에서 스크립트는 바디 뒤쪽에 넣는게 좋지만
그냥 헤드에 넣어서 domcontentloder하는게 제일 좋다.
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<script>
function haha(){
let a = document.getElementsByTagName('p');
let b = a.length;
alert(`${b}개수의 p 개수`)
}
document.addEventListener("DOMContentLoaded", function(){
let a = document.getElementsByClassName('test');
console.log(a);
document.write(a.length);
// Handler when the DOM is fully loaded
}); </script>
</head>
<body>
<p class = "test">haha</p>
<p>haha</p>
<p>haha</p>
<!--<script>-->
<!-- function haha(){-->
<!-- let a = document.getElementsByTagName('p');-->
<!-- let b = a.length;-->
<!-- alert(`${b}개수의 p 개수`)-->
<!-- }-->
<!-- a = document.getElementsByClassName('test');-->
<!-- document.write(typeof a);-->
<!-- document.write(a.length)-->
<!--</script>-->
<button onclick="haha()"> </button>
</body>
</html>
댓글 영역