<html>
<head>
<title>Example</title>
</head>
<body>
<p>This is an example page</p>
<h1>Example page</h1>
</body>
</html>
document
– корневой элементelement
– узел DOMNodeList
– коллекция из elementHTMLCollection
– коллекция из elementattribute
– ссылка на объект для работы с атрибутамиnamedNodeMap
– map из elementNodeList
document.getElementById
document.getElementsByName
document.getElementsByTagName
document.getElementsByClassName
NodeList
document.querySelectorAll
document.querySelector
https://jsfiddle.net/tu9ben4g/<!-- было -->
<section>1<section>
<section>2<section>
<section>3<section>
...
var nodes = document.getElementsByTagName('section');
console.log(nodes.length)// ???
https://jsfiddle.net/thoc54v1/1/<!-- было -->
<section>1<section>
<section>2<section>
<section>3<section>
...
var nodes = document.querySelectorAll('section');
console.log(nodes.length)// ???
parentNode
childNodes
firstChild, lastChild
nextSibling, previousSibling
parentNode
children
firstElementChild, lastElementChild
nextElementSibling, previousElementSibling
attributes
getAttribute
setAttribute
img.src
img.htmlFor
img.className
var foo = document.getElementById('paragraph1');
var html = foo.innerHtml; // текст с разметкой
var text = foo.innerText; // только текст
var p = foo.outerText;// текст с разметкой включая себя
var img = document.createElement('img');
img.src = 'http://url/image.jpg';
var text = document.createTextNode('Some text');
/* А как добавить на страницу? */
appendChild
insertBefore
var div = document.createElement('div');
div.innerText = 'Hello';
var form = document.getElementById('form1');
form.appendChild(div);
/* div - живая ссылка */
insertBefore
var div = document.createElement('div');
div.innerText = 'Hello';
var form = document.getElementById('form1');
document.body.insertBefore(div, form);
var form = document.getElementById('form1');
var removedForm = document.body.removeChild(form);
/* или */
var removedForm = form.remove(); // Не поддерживается в IE
Элемент не удаляется совсем, он исключается из DOM, но сохраняется в памяти до тех пор, пока на него существуют ссылки
var fragment = document.createDocumentFragment();
querySelector
, querySelectorAll
target.addEventListener(type, listener[, useCapture]);
type
- тип событияlistener
- объект принимающий событие или функция обратного вызоваuseCapture
- захват события true/false
if (el.addEventListener) { // обычные браузеры
el.addEventListener('click', modifyText, false);
} else if (el.attachEvent) { // IE8-
el.attachEvent('onclick', modifyText);
}
function modifyText(event) {
...
}
el.addEventListener('click', modifyText, false);
function modifyText(event) {
...
}
el.removeEventListener('click', modifyText, false);
el.detachEvent('onclick', modifyText) /* для IE8- */
<div id="d1">
<a href="/404" id="l1">Link</a>
</div>
https://jsfiddle.net/5ph6oys2/5/d**.getElementById('d1').addEventListener('click', () => {
alert('div');
});
d**.getElementById('l1')addEventListener('click', () => {
alert('link');
});
var timerId = setTimeout(function(){...}, 300);
var intervalId = setInterval(function(){...}, 1000);
...
clearTimeout(timerId);
clearInterval(intervalId);
Location
location.href
location.hash
location.origin
location.search
location.assign()
location.reload()
History
history.pushState()
history.replaceState()
history.back()
history.forward()
history.go()
history.pushState
var state = {data: someData};
var title = 'My amazing page';
var url = '/index.html';
history.pushState(state, title, url);
popstate
// подписываемся на событие
window.addEventListener('popstate', function(){
console.log('url changed');
});
localStorage
localStorage
var data = {
a: 1,
b: 'text'
};
localStorage.setItem("data", JSON.stringify(data));
// {"a":1,"b":"text"}
localStorage
var data = localStorage.getItem('data');
// {"a":1,"b":"text"}
console.log(JSON.parse(data)); // Object
console.log(localStorage.data);// ???
localStorage.removeItem('data');
sessionStorage
ммм... Где искать?
https://jsfiddle.net/denisz/o40aty7z/3/Cookies
– небольшой фрагмент данных, отправленный веб-сервером и хранимый на компьютере пользователя. Веб-клиент всякий раз при попытке открыть страницу соответствующего сайта пересылает этот фрагмент данных веб-серверу в составе HTTP-запроса.
Cookies
console.log(document.cookie); // String
// key=value; key2=value2; mykey=myvalue2
Cookies
function foo() {
baz();
}
function baz() {
bar()
}
function bar() {
console.log('hello');
}
указывает браузеру на то, что вы хотите произвести анимацию, и просит его запланировать перерисовку на следующем кадре анимации. В качестве параметра метод получает функцию, которая будет вызвана перед перерисовкой.
window.requestAnimationFrame(() => console.log('hello'));
Denis Zavgorodny
|