DOM = Browser Object Model = Об'єктна модель браузера Призначена для роботи із веб-браузером, а саме з його деякими об'єктами, його поточним станом (чи він розширений на весь екран чи ні і т.п.), на якій операційній системі він установлений, по якій веб-адресі розміщений, а також із самою веб-сторінкою (об'єкт document являється його дочірнім об'єктом)ю Для роботи зі структурою BOM JavaScript призначений об'єкт window.

Властивості вікна браузера window.innerHeight - висота вікна включно із горизонтальними смугами прокрутки window.innerWidth - ширина вікна включно із вертикальними смугами прокрутки window.outerHeight - висота вікна браузерм включно із усіма смугами прокрутки window.outerWidth - ширина вікна браузерм включно із усіма смугами прокрутки window.pageXOffset - псевдонім для для window.scrollX window.pageYOffset - псевдонім для для window.scrollY window.screenX - позиція вікна браузера по осі Х, т.е. відстань від вікна браузера до лівого краю екрану window.screenY - позиція вікна браузера по осі У, т.е. відстань від вікна браузера до верхнього краю екрану window.scrollX - кількість пікселів веб-сторінки, прокручених по горизонталі window.scrollY - кількість пікселів веб-сторінки, прокручених по вертикалі screen.availTop - висота фіксованих компонентів, що прилягають до верхньої сторони браузера (верхні панелі тощо) screen.availLeft - висота фіксованих компонентів, що прилягають до лівої сторони браузера (ліві панелі тощо) screen.availHeight - максимально доступна висота в пікселях мінус висота верхніх і нижніх панелей screen.availWidth - максимально доступна ширина в пікселях мінус ширина лівих і правих панелей screen.colorDepth - глибина кольору екрану screen.height - висота екрану в пікселях screen.orientation - містить об'єкт типу ScreenOrientation, що надає інформацію про орієнтацію пристрою screen.pixelDepth - глибина пікселя екрану screen.width - ширина екрану в пікселях Діалогові вікна та взаємодія із вмістом сторінки id комірок і кнопок відображається при наведенні курсором alert() Подивитися результат Подивитися текст коду function b_alert(){ alert("Текст повідомлення"); } - вікно з повідомленням confirm() Подивитися результат Подивитися текст коду function b_confirm(){ const result = confirm("Текст повідомлення"); const td1 = document.getElementById('b_confirm'); const child1 = td1.firstElementChild; td1.removeChild(child1); const span1 = document.createElement("span"); if(result===true) span1.textContent = "Ви вибрали ОК"; else span1.textContent = "Ви вибрали відмінити"; document.getElementById('b_confirm').appendChild(span1); } - вікно з повідомленням і кнопками "Ок" і "Відмінити" prompt() Подивитися результат Подивитися текст коду function b_prompt(){ const result = prompt("Введіть номер карточки"); const td2 = document.getElementById('b_prompt'); const child2 = td2.firstElementChild; td2.removeChild(child2); const span2 = document.createElement("span"); span2.textContent = result; document.getElementById('b_prompt').appendChild(span2); } - вікно з повідомленням і полем вводу find() Введіть будь-яке слово, що знаходиться на даній сторінці: Подивитися результат Подивитися текст коду function b_find(){ const btn = document.getElementById("btn_find"); const keyField = document.getElementById("in_find"); const result = find(keyField.value); const span3 = document.getElementById('s_find'); if(result===true) span3.textContent = "Таке слово є"; else span3.textContent = "Такого слова немає"; document.getElementById('td_find').appendChild(span2); } - пошук слів на сторінці print() Роздрукувати сторінку Подивитися текст коду <button onclick="print()">Роздрукувати сторінку</button> - друк сторінки Способи відкриття веб-сторінки window.open("https://google.com"); - відкрити посилання window.open("https://google.com", "_self"); - відкрити посилання в поточній вкладці window.open("https://google.com", "_blank"); - відкрити посилання в поточній вкладці або в окремому вікні window.open("https://google.com", "_blank", "popup=yes"); - відкрити посилання в окремому вікні window.open("https://google.com", "_blank", "width=100"); window.open("https://google.com", "_blank", "innerWidth=100"); - ширина вікна в пікселях window.open("https://google.com", "_blank" "height=100"); window.open("https://google.com", "_blank" "innerHeight=100"); - висота вікна в пікселях window.open("https://google.com", "_blank", "left=100"); window.open("https://google.com", "_blank", "screenX=100"); - координата Х відносно початку екрану в пікселях window.open("https://google.com", "_blank", "top=100"); window.open("https://google.com", "_blank", "screenY=100"); - координата У відносно початку екрану в пікселях window.open("https://google.com", "_blank", "lokation=yes"); - відображати адресну строку window.open("https://google.com", "_blank", "menubar=yes"); - відображати панель меню window.open("https://google.com", "_blank", "scrollbar=yes"); - відображати полоси прокрутки window.open("https://google.com", "_blank", "status=yes"); - відображати строку стану (внизу) window.open("https://google.com", "_blank", "toolbar=yes"); - відображати панель інструментів window.close(); - закрити вікно window.moveBy(200, 100); - переміщує поточне вікно браузера по горизонталі та вертикалі на вказану кількість пікселів window.moveTo(200, 150); - переміщує поточне вікно браузера по горизонталі та вертикалі до вказаної точку window.resizeBy(200, 100); - масштабує поточне вікно браузера по горизонталі та вертикалі на вказану кількість пікселів window.resizeBy(-200, -100); - масштабує поточне вікно браузера по горизонталі та вертикалі до заданого розміру window.scrollBy(100, 200); - прокручує вміст вікна на вказаний коефіцієнт window.scrollTo(100, 200); - прокручує вміст вікна до вказаної позиції

Взаємодія із компонентами браузера window.locationbar.visible - чи відображається адресна строка window.menubar.visible - чи відображається панель меню window.personalbar.visible - чи відображається персональна панель (із закладками тощо) window.scrollbars.visible - чи відображаються полоси прокрутки window.statusbar.visible - чи відображається строка стану (внизу) window.toolbar.visible - чи відображається панель інструментів Інформація про розміщення веб-сторінки location.href - повна адреса веб-сторінки location.protocol - протокол location.pathname - шлях до ресурсу location.origin - загальна схема запиту location.port - порт, який використовує ресурс location.host - хост location.hostname - домен, аналогічний хосту, за виключенням порту location.hash - ідентифікатор фрагменту - та частина адреси, яка йде після символу # (за його наявності) location.search - рядок запиту – та частина адреси, яка йде після символу ? (за його наявності) location.username - ім'я користувача, якщо воно вказане в адресі location.password - пароль, якщо він вказаний в адресі Інформація про браузер і операційну систему navigator.appCodeName - внутрішнє кодове ім'я браузера navigator.appName - офіційне ім'я браузера navigator.appVersion - номер версії браузера navigator.product - назва продукта поточного браузера navigator.productSub - вкладена мітка браузера navigator.vendor - ким був браузер виготовлений navigator.vendorSub - призначений для отримання додаткової інформації про того, хто виготовив браузер navigator.userAgent - містить строку, що ідентифікує браузер navigator.platform - інформація про опкраційну систему, на якій запущений браузер navigator.language - містить строку, що вказує на бажані мови користувача navigator.languages - містить список строк, що вказують на бажані мови користувача navigator.plugins - список плагініів, які підтримує браузер navigator.battery - представляє об'єкт типу BatteryManager, який дозволяє застосовувати Battery Status API для взаємодії зі статусом батареї navigator.cookieEnabled - інформація про те, чи увімкнені файли кукі navigator.geolocation - представляє об'єкт типу Geolocation, який дозволяє застосовувати Geolocation API для роботи з геолокацією navigator.onLine - інформація про те, чи підключений браузер до інтернету