JavaScript3
<title>03_요소접근방법</title>
<style>
.area {
width: 300px;
height: 100px;
border: 1px solid black;
}
#chatting-bg {
width: 360px;
height: 400px;
border: 1px solid black;
background-color: rgb(178, 199, 217);
overflow: auto;
}
#chatting-bg > p > span {
background-color: rgb(254, 234, 51);
padding: 5px;
border-radius: 5px;
}
#chatting-bg > p {
text-align: right;
margin: 20px 10px;
}
</style>
</head>
<body>
<h1>DOM(Document Object Model)</h1>
<pre>
웹 문서(HTML)의 모든 요소를 객체 형식으로 표현하는 방법
-> 문서 내 특정 요소에 접근하는 방법을 제공
</pre>
<hr>
<h1>DOM을 이용한 요소 접근 방법(얻어오는 방법)</h1>
<pre>
1. id 속성 값으로 접근하기
document.getElementById("id속성값")
<!-- class, name, 태그명 등
여러 요소가 같은 값을 가질 수 있으므로
접근할 때 복수를 뜻하는 s를 붙여야 한다(Elements)
+ 여러 요소를 접근해서 얻어오기 때문에
반환 값은 배열의 형태를 띈다.
-->
2. class 속성값으로 접근하기
document.getElementsByClassName("class 속성값");
3. name 속성값으로 접근하기
document.getElementsByName("name 속성값");
4. tag name으로 접근하기
document.getElementsByTagName("태그명");
5. CSS 선택자를 이용해서 접근하기
1) document.querySelector("#test");
- 단일 요소를 선택하는 방밥
- 만약 선택된 요소가 여러개면 첫번째 요소만 선택한다.
2) document.querySelectorAll("CSS 선택자");
- 선택된 모든 요소를 얻어와서 배열 형태로 반환
(각각의 index에 선택된 요소가 하나씩 있음)
</pre>
<hr>
<h3>id로 접근하기</h3>
<button onclick="fnTest1()">클릭할 때 마다 배경색 변경</button>
<div id="div1" class="area"></div>
<hr>
<h3>class로 접근하기</h3>
<div class="area div2"></div>
<div class="area div2"></div>
<div class="area div2"></div>
<button onclick="fnTest2()">배경색 변경하기</button>
<script src="../js/03_요소접근방법.js"></script>
<hr>
<h3>태그명으로 접근하기</h3>
<ul>
<li>20</li>
<li>80</li>
<li>140</li>
<li>200</li>
<li>255</li>
</ul>
<button onclick="fnTest3()">배경색 변경하기</button>
<hr>
<h1>input 태그의 값(value) 얻어오기/변경하기</h1>
<hr>
<h1 style="color: red">input 태그의 값(value) 얻어오기/변경하기</h1>
<input type="text" id="inputTest">
<button onclick="fnTest4()">입력</button>
<hr>
<h3>name 속성으로 접근하기</h3>
<table>
<tr>
<td>
<label for="">
<input type="checkbox" name="hobby" value="게임"> 게임
</label>
</td>
<td>
<label for="">
<input type="checkbox" name="hobby" value="음악감상"> 음악감상
</label>
</td>
<td>
<label for="">
<input type="checkbox" name="hobby" value="영화감상"> 영화감상
</label>
</td>
</tr>
<tr>
<td>
<label for="">
<input type="checkbox" name="hobby" value="운동"> 운동
</label>
</td>
<td>
<label for="">
<input type="checkbox" name="hobby" value="독서"> 독서
</label>
</td>
<td>
<label for="">
<input type="checkbox" name="hobby" value="코딩"> 코딩
</label>
</td>
</tr>
</table>
<button onclick="fnTest5()">선택 완료</button>
<div id="result5" class="area"></div>
<hr>
<h3>CSS 선택자로 접근하기</h3>
<div id="cssTest">
<div class="area">test1</div>
<div class="area">test2</div>
</div>
<button onclick="fnTest6()">확인하기</button>
<hr>
<h3>카카오톡 채팅 화면 만들기</h3>
<div id="chatting-bg">
<p> <span>입력되는 채팅 출력</span> </p>
<p> <span>입력되는 채팅 출력</span> </p>
<p> <span>입력되는 채팅 출력</span> </p>
</div>
<!--
onclick: 클릭 했을때 수행
onkeydown : 키가 눌러졌을 때
onkeypress : 키가 눌러지고 있을 때
onkeyup : 키가 올라올 때
-->
<input type="text" size="50" name="" id="chattingInput" onkeyup="inputEnter()">
<button onclick="readValue()">입력</button>
개발자준비생