<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>element</title>
<style>
table {
margin: 20px 0;
border-collapse: collapse;
border: 2px solid black;
}
td, th {
padding: 10px;
border: 1px solid grey;
}
th {
background-color: #dadada;
}
</style>
</head>
<body>
<h1>06-element.html</h1>
<hr>
<table>
<tr>
<th>함수</th>
<th>매개변수</th>
<th>반환형</th>
<th>설명</th>
</tr>
<tr>
<td>getElementById</td>
<td>문자열 형태의 id</td>
<td>단일 요소</td>
<td>id를 지정하여 문서 요소를 불러온다</td>
</tr>
<tr>
<td>querySelector</td>
<td>문자열 형태의 css 선택자</td>
<td>단일 요소</td>
<td>css 선택자를 이용하여 첫번째 요소를 불러온다</td>
</tr>
<tr>
<td>querySelectorAll</td>
<td>문자열 형태의 css 선택자</td>
<td>여러 요소 (NodeList)</td>
<td>css 선택자를 이용하여 조건에 맞는 모든 요소를 불러온다</td>
</tr>
</table>
<table>
<tr>
<th>함수</th>
<th>매개변수</th>
<th>반환형</th>
<th>설명</th>
</tr>
<tr>
<td>createElement</td>
<td>문자열 형태의 태그 이름</td>
<td>HTMLelement</td>
<td>지정한 태그 요소를 생성한다. 무넛에 반영되지는 않는다</td>
</tr>
<tr>
<td>A.appendChild(B)</td>
<td>HTMLelement</td>
<td>HTMLelement (B)</td>
<td>A요소의 하위에 B요소를 마지막에 추가한다</td>
</tr>
<tr>
<td>A.removeChild(B)</td>
<td>HTMLelement</td>
<td>HTMLelement (B)</td>
<td>A요소의 하위에서 B요소를 찾아서 제거한다</td>
</tr>
</table>
<table>
<tr>
<th>함수</th>
<th>매개변수</th>
<th>반환형</th>
<th>설명</th>
</tr>
<tr>
<td>A.getAttribute(B)</td>
<td>문자열 형태의 속성 이름</td>
<td>문자열 형태의 속성 값</td>
<td>A 태그요소에서 B이름의 속성을 찾아서 그 값을 반환한다</td>
</tr>
<tr>
<td>A.setAttribute(name, value)</td>
<td>순서대로 속성이름, 속성값</td>
<td></td>
<td>A 태그요소에 name으로 value를 추가한다</td>
</tr>
<tr>
<td>A.removeAttribute(name)</td>
<td>문자열 형태의 속성이름</td>
<td></td>
<td>A 태그요소에서 name과 일치하는 속성을 제거한다</td>
</tr>
</table>
</body>
</html>
Never give up!!