브라우저에서 제공되는 document 객체 활용
- CSS 선택자에 해당하는 엘리먼트 하나만 가져온다.
var ele = document.querySelector("CSS 선택자")
엘리먼트 속성
- innerText : 태그가 텍스트로 적용
- innerHTML : 태그가 해석되어서 적용
html 소스
<body>
<h1 id="a" class="b">DOM API 연습하기 - 1</h1>
<button onclick="doAction();">클릭해봐...</button>
<button onclick="doAction2();">랜덤변경</button>
<script>
function doAction() {
var h1Ele = document.querySelector("h1");
alert(h1Ele.innerText);
}
const singer = [ "우원재", "콜드플레이", "마룬파이브", "j.Fla", "세송인", "빅뱅", "BTS",
"저스틴비버", "싸이", "러블리즈" ];
function doAction2() {
var h1Ele = document.querySelector("h1");
h1Ele.innerText = "<h2>변경...</h2>";
// 0 부터 1.0 이하의 수 랜덤 출력, *100으로 0~100사이의수 표현
h1Ele.innerHTML = "<h2>변경...</h2>"
+ singer[parseInt(Math.random() * singer.length)];
}
</script>
<!--
<ul>
li*5 하면 5줄 입력 가능
</ul>
-->
</body>
CSS 선택자에 해당하는 모든 엘리먼트가 반환됨..
var eles = document.querySelectorAll("CSS 선택자")
html 소스
<body>
<h2>연습하기 - 2</h2>
<hr>
<p class="food">사과</p>
<p class="food">배</p>
<p class="food">포도</p>
<p class="food">딸기</p>
<button onclick="doAction();">클릭</button>
<div id="result1" class="result"></div>
<script>
function doAction() {
// id가 result1 인것
var result = document.querySelector("#result1");
// 클래스가 food 인것
//var food = document.querySelector(".food");
//result1.innerText = food.innerText;
var food = document.querySelectorAll(".food");
var txt = "";
for (var i = 0; i < food.length; i++) {
txt += food[i].innerText + " ";
}
result1.innerText = txt;
}
</script>
</body>
| JavaScript - eval(), JSON.parse() (0) | 2018.12.03 |
|---|---|
| JavaScript - 클로저(closure) (0) | 2018.12.03 |
| JavaScript - setTimeout과 setInterval (0) | 2018.11.29 |
| JavaScript - 즉시실행 함수 (0) | 2018.11.29 |
| JavaScript - 매개변수 타입에 따른 원본 데이터 영향 (0) | 2018.11.29 |
댓글 영역