JavaScript
https://jsfiddle.net/tjuw6vtg/13/
window
DOM
document
...
BOM
navigator
screen
location
frames
history
XMLHttpRequest
JavaScript
Object
Array
Function
...
window.open(‘https://www.google.ru’);
window.location = ‘https://www.google.ru’;
window.history.back();
window.history.go(-2);
DOM
document.body.style.color = “red”;
BOM
<html>
<header>
<titel>Hello World!</title>
</header>
<body>
<h1>Hello World!</h1>
<footer>
Copyright
</footer>
</body>
</html>
html
header
body
#text
#text
title
#text
Hello Wordl!
#text
h1
#text
Hello Wordl!
#text
footer
#text
Copyright
#text
Nodes
element node
text
node
<p>
<p></p>
</p>
<p></p>
<p></p>
<p></p>
Возможности работы с DOM
- получить абсолютно любой элемент дерева
- воздействовать на его атрибуты, свойства и текст
$0.style.color = “red”;
Навигация по DOM
document
documentElement(html)
body
elem.firstChild
elem.lastChild
elem.firstElementChild === elem.children[0]
elem.lastElementChild === elem.children[elem.children.length - 1]
elem.firstChild elem.lastChild
elem.firstElementChild === elem.children[0]
elem.lastElementChild === elem.children[elem.children.length - 1]
elem.childNodes
elem.previousSibling
elem.nextSibling
elem.parentElement
elem.parentElement
id
document.getElementId(‘slider’)
<div>
document.getElementsByTagName('div')
<input name="adress">
document.getElementsByName(‘adress’);
.header__contacts_phone
document.getElementsByClassName(‘header__contacts_phone’);
<div class="active">
document.querySelectorAll(‘div.active’);
document.querySelector(‘div.active’);
|
Метод |
Поиск по |
Поддержка |
|
getElementById |
id |
везде |
|
getEmenetByName |
name |
везде |
|
getElementByTagName |
tag |
везде |
|
getElementByClassName |
class |
кроме IE8- |
|
querySelector |
CSS-селектор |
везде |
|
querySelectorAll |
CSS-селектор |
везде |
elem.matches(‘li’); //true/false
elem.closes(‘div’); //коллекция элементов
var collection = document.getElementsByClassName('.active');
//любая выборка
for (var i = 0; i<collection.length; i++) {
console.log(collection[i]); // элемент коллекции
};
var elem = document.getElementById(id);
for (var i = 0; i< elem.childNodes; i++) {
console.log(elem.childNodes[i]); // дочерний элемент
};
Что дальше?
Работа с атрибутами
- hasAttribute(nameOfAttribute)
- getAttribute(nameOfAttribute)
- setAttribute(nameOfAttribute, valueOfAttribute)
- removeAttribute(nameOfAtribute)
var adressLink = document.getSelector(‘.main .main__socials_adress’);
if(adressLink.hasAttribute(‘href’)) {
var href = adressLink.getAttribute(‘href’);
window.opent(href, ‘_blank’);
adressLink.setAttribute(‘href’, ‘htttp://www.google.ru’);
}
<div class="red" hidden></div>
document.querySelector('.red').removeAttribute('hidden');
<span class=”header__user_name” data-name=”Dariya Pushkarskaya”>Дарья</span>
elem.dataset.name; // Dariya Pushkarskaya
Работа с классами
- className
- classList
elem.className; //main container
elem.className = ‘main container active’;
ClassList
- classList.contain(class)
- classList.add/remove(class)
- classList.toggle(class)
if (elem.classList.contain(‘show’)) {
elem.classList.remove(‘show’);
elem.classList..add(‘hidden’);
}
if (elem.classList.contain(‘hidden)) {
elem.classList.remove(‘hidden’);
elem.classList..add(‘show’);
}
elem.classList.toggle(‘active’);
События
-
События мыши
-
События на элементах управления
-
События по нажатию клавиш клавиатуры
-
События документа
- События CSS
События мыши
-
click
-
contextmenu
-
mouseover
-
mouserout
-
mousedown
- mouseup
- mousemove
События на элементах управления
-
submit
- focus
События по нажатию клавиш
-
keydown
- keyup
События документа
-
DOMContentLoaded
События CSS
-
transitioned
События CSS
-
transitioned
JavaScript
By d_pushkarskaya
