๋ธ๋ผ์ฐ์ ๊ฐ์ฒด ๋ชจ๋ธ(Browser Object Model)
๋ธ๋ผ์ฐ์ ์ ์ํธ์์ฉํ๋ ๋ฉ์๋์ ์ธํฐํ์ด์ค๋ฅผ ์ ๊ณต
์น ๋ธ๋ผ์ฐ์ ์ ๊ด๋ จ๋ ๊ฐ์ฒด์ ์งํฉ
window, location, navigator, history, screen, document
๋ธ๋ผ์ฐ์ ๋ฐ HTML ๋ด์ฉ๊ณผ ๊ด๋ จ๋ ๊ฐ์ฒด
๋ธ๋ผ์ฐ์ ๊ฐ์ฒด ๋ชจ๋ธ(Browser Object Model, BOM)
window ๊ฐ์ฒด
window-ํ์
์ฌ์ฉ ๊ถ์ฅ X
ํ์ ์ฐฝ ์ด๊ณ ๋ซ๋ html ์ฝ๋
<div> ํ๊ทธ๋ฅผ ํ์ฉํ์ฌ ํ์ ์ฐฝ ์ญํ ์ ํ๋ ์ฝ๋๋ฅผ ๋ง๋ค ์ ์๋ค. (script ์์ ์ด ๊ฝค๋ ์ด๋ ต๋คใ ใ )
<body>
<h3>window - ํ์
</h3>
<div>
<p>
<a href="javascript:openWin()">ํ์
์ด๊ธฐ</a>
</p>
<p>
<a href="javascript:closeWin()">ํ์
๋ซ๊ธฐ</a>
</p>
</div>
<script type="text/javascript">
var win = null;
function openWin() {
let f;
let url = "https://naver.com";
f = "left=10, top= 10, width=700; height=500";
win = window.open(url,"test",f);
}
function closeWin() {
if (win) {
win.close();
}
win = null;
}
</script>
</body>
document ๊ฐ์ฒด
html ํ๊ทธ ์์ body ์์ญ
window ๊ฐ์ฒด์ document ์์ฑ์ ๋ถ๋ฌ์จ ์น ํ์ด์ง๋ฅผ ๋ํ๋ document ๊ฐ์ฒด
ํ์ด์ง ์ฝํ ์ธ (DOM ํธ๋ฆฌ)์ ์ง์ ์ ์ญํ ์ํ
document ๊ฐ์ฒด ์ฃผ์ ์์ฑ
document ๊ฐ์ฒด ์ฃผ์ ๋ฉ์๋
document ๊ฐ์ฒด ์ฃผ์ ๋ฉ์๋ ์ฌ์ฉ ์์
getElementsByName() name ์์ฑ ์ ๊ทผ
let birth = document.getElementsByName("birth")[0].value;
getElementById() ๋ฉ์๋ id ์์ฑ์ผ๋ก ์ ๊ทผ
let age = document.getElementById("age").value;
class ์์ฑ ๊ฐ์ผ๋ก ์ ๊ทผ
const objBox = document.getElementsByClassName(".layout")[0];
์ ํ์๋ก ์ ๊ทผ
const objBox = document.querySelector(".layout"); // ์ ํ์๋ . ์ ๋ถใ
ใ
์ฌ์ผ ํจ
'๐ปProgramming > ๐โโ๏ธJavaScript' ์นดํ ๊ณ ๋ฆฌ์ ๋ค๋ฅธ ๊ธ
[JavaScript] ๋ธ๋ผ์ฐ์ ๊ฐ์ฒด ๋ชจ๋ธ(BOM) - (0) | 2022.09.22 |
---|---|
[JavaScript] 05. ๋ธ๋ผ์ฐ์ ๊ฐ์ฒด ๋ชจ๋ธ(BOM) - location ๊ฐ์ฒด/navigator ๊ฐ์ฒด (0) | 2022.09.22 |
[JavaScript] ๋ด์ฅ ๊ฐ์ฒด - Array (1) | 2022.09.22 |
[JavaScript] JSON (0) | 2022.09.22 |
[JavaScript] 04. ๋ด์ฅ๊ฐ์ฒด ์ถ๊ฐํด์ผ๋จ.. (0) | 2022.09.22 |