JavaScript. Объекты document и window
В этом уроке мы рассмотрим основные методы и свойства объектов document и window. При помощи объекта document мы можем манипулировать содержимым html документа — добавлять на страницу, делать выборку, визуализировать элементы страницы и т.д. С помощью объекта window мы можем управлять окнами — открывать, выводить содержимое окна на печать. В конце этого урока я предложу вам выполнить домашнее задание — реализовать часы с помощью javscript (подсказка — используйте объект Date()). Ваши работы вы можете отправлять мне на почту abzalov90@gmail.com.
Код урока
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title></title>
<link rel="stylesheet" href="">
</head>
<body>
<script>
document.write("HTML документ");
document.write("<h1>HTML документ</h1>");
var root = document.documentElement;
console.log(root);
var body = document.body;
console.log(body);
document.body.style.backgroundColor = "green";
console.log(body.childNodes);
document.write(body.firstChild);
var p = document.createElement("p");
p.innerHTML = "Lorem ipsum dolor sit amet, consectetur adipisicing elit. Adipisci deleniti sapiente ea amet quam odit culpa doloremque ab, voluptatibus modi cupiditate laborum odio! Molestiae, recusandae, voluptatem laudantium ipsam earum ab.";
p.className = "myClass";
p.setAttribute("id", "myId");
body.appendChild(p);
var el = document.getElementById("myId");
console.log(el);
var elems = document.getElementsByTagName("p");
console.log(elems);
var a = document.getElementsByClassName("myClass");
console.log(a);
var b = document.querySelector("p");
console.log(b);
var c = document.querySelectorAll("ul li");
//window
var btn = document.createElement("button");
btn.innerText = "Нажми меня";
body.appendChild(btn);
btn.onclick = function() {
//window.open("", "", "width=200, height=200");
//window.print();
console.log(window.location.href);
window.setTimeout(function(){
//alert("Привет");
}, 2000);
window.setInterval(function(){
alert("Привет");
}, 2000);
}
</script>
</body>
</html>
0 Comments