DOM window – 2075

2075 / JavaScript / DOM / window

document.domain – 2075.com.ua

document.lastModified – 08/15/2023 14:18:18

document.title – DOM – 2075

document.URL – https://2075.com.ua/dom-window/

alert("Hello World!");

document.getElementById("d1").innerHTML = "Hello DOM!"

const element = document.getElementsByTagName("input") – масив

element[0].innerHTML – перший елемент

document.getElementsByClassName("Style1") – масив

document.querySelectorAll("p.intro") – масив з <p class="intro">

document.getElementById("myImage").src = "landscape.jpg";

document.getElementById("p2").style.color = "blue";

<h2 onclick="changeText(this)">Click on this text!</h2>

id.innerHTML = "New text!";

element.innerHTML – HTML-розмітка

element.attribute – нове значення

element.style.property – новий стиль

element.setAttribute(attribute, value) – змінити атрибут

document.createElement(element) – створити HTML елемент
document.removeChild(element) – видалити HTML елемент
document.appendChild(element) – додати HTML елемент
document.replaceChild(new, old) – замінити HTML елемент
document.write(text) – вивести HTML потік

document.getElementById("d1").childNodes[0].nodeValue

document.getElementById("d1").firstChild.nodeValue;

document.getElementById(id).onclick = function(){ code } – реакція на натискання

document.write(Date()) – 15 2023 14:54:42 GMT+0300 (за східноєвропейським літнім часом)

let w = window.innerWidth;
let h = window.innerHeight;

window.open() – open a new window
window.close() – close the current window
window.moveTo() – move the current window
window.resizeTo() – resize the current window

screen.width
screen.height
screen.availWidth
screen.availHeight
screen.colorDepth
screen.pixelDepth

window.location.href returns the href (URL) of the current page
window.location.hostname returns the domain name of the web host
window.location.pathname returns the path and filename of the current page
window.location.protocol returns the web protocol used (http: or https:)
window.location.assign() loads a new document

history.back() – same as clicking back in the browser
history.forward() – same as clicking forward in the browser

if (confirm("Press a button!")) {
txt = "You pressed OK!";
} else {
txt = "You pressed Cancel!";
}

let person = prompt("Please enter your name", "Harry Potter");
// Harry – написано всередині
let text;
if (person == null || person == "") {
text = "User cancelled the prompt.";
} else {
text = "Hello " + person + "! How are you today?";
}

setTimeout(myFunction, 3000); // запуск з затримкою

window.clearTimeout(timeoutVariable)

setInterval(myTimer, 1000); // Таймер

clearInterval(myTimer);

document.cookie = "username=John Doe; expires=Thu, 18 Dec 2013 12:00:00 UTC";

let x = document.cookie;

document.anchors
document.body – уся розмітка всередині
document.documentElement
document.embeds
document.forms
document.head
document.images
document.links
document.scripts

document.anchors Returns all <a> elements that have a name attribute
document.applets Deprecated
document.baseURI Returns the absolute base URI of the document
document.body Returns the <body> element
document.cookie Returns the document's cookie
document.doctype Returns the document's doctype
document.documentElement Returns the <html> element
document.documentMode Returns the mode used by the browser
document.documentURI Returns the URI of the document
document.domConfig Obsolete.
document.embeds Returns all <embed> elements
document.forms Returns all <form> elements
document.head Returns the <head> element
document.images Returns all <img> elements
document.implementation Returns the DOM implementation
document.inputEncoding Returns the document's encoding (character set)
document.lastModified Returns the date and time the document was updated
document.links Returns all <area> and <a> elements that have a href attribute
document.readyState Returns the (loading) status of the document
document.referrer Returns the URI of the referrer (the linking document)
document.scripts Returns all <script> elements
document.strictErrorChecking Returns if error checking is enforced

ELEMENT_NODE 1 <h1 class="heading">W3Schools</h1>
ATTRIBUTE_NODE 2 class = "heading" (deprecated)
TEXT_NODE 3 W3Schools
COMMENT_NODE 8 <!– This is a comment –>
DOCUMENT_NODE 9 The HTML document itself (the parent of <html>)
DOCUMENT_TYPE_NODE 10 <!Doctype html>

parentNode
childNodes[nodenumber]
firstChild
lastChild
nextSibling
previousSibling
document.getElementById("id01").nodeName – H1…

Замінити усю сторінку наступною розміткою

document.open("text/html", "replace");
document.write("<h2>HTML DOM!</h2>");
document.close();

Відкрити нове вікно з розміткою

var w = window.open();
w.document.open();
w.document.write("<h2>Hello DOM!</h2>");
w.document.close();

Скільки елементів з name="x"?

var x = document.getElementsByName("x");
x.length;

Скільки елементів з тегом <input>?

var x = document.getElementsByTagName("input");
x.length;

Вивести значення усіх елементів форми

const x = document.forms["frm1"];
let text = "";
for (let i = 0; i < x.length ;i++) {
text += x.elements[i].value + "<br>";
}
document.getElementById("d1").innerHTML = text;

Валідація

let x = document.forms["myForm"]["fname"].value;
if (x == "") {}

Прив'язати функцію до кнопки

document.getElementById("myBtn").onclick = displayDate;

function displayDate() {
document.getElementById("demo").innerHTML = Date();
}

або

document.getElementById("myBtn").addEventListener("click", F1);
document.getElementById("myBtn").addEventListener("click", F2);
"mouseover", "mouseout", "resize"
// Можна додати кілька

element.removeEventListener("mousemove", myFunction);
// Можна видалити

Миш над елементом

<div onmouseover="mOver(this)" onmouseout="mOut(this)"
style="background-color:#D94A38;width:120px;height:20px;padding:40px;">
Mouse Over Me</div>

function mOut(obj) {
obj.innerHTML = "Наведи на мене"
}
</script>