15 важных JavaScript методов для веб-разработчиков

Stas Bagretsov
May 30, 2018 · 8 min read

1. querySelector()

Синтаксис:

var ele = document.querySelector(selector);

Пример кода:

<p>paragraph one</p><p>paragraph two</p><div>div one</div><p>paragraph three</p><div>div two</div>JavaScript
var firstDiv = document.querySelector('div');
firstDiv.style.color = 'red';

2. querySelectorAll()

Синтаксис

var eles = document.querySelectorAll(selector);

Пример кода:

<p>paragraph one</p><p>paragraph two</p><div>div one</div><p>paragraph three</p><div>div two</div>JavaScriptvar paragraphs = document.querySelectorAll('p');for(var p of paragraphs)p.style.color = 'blue';

3. addEventListener()

1 способ:
<button onclick=foo>Alert</button>
2 способ:
var btn = document.querySelector('button');
btn.onclick=foo;
3 способ:
var btn = document.querySelector('button');
btn.addEventListener('click', foo);

Синтаксис

ele.addEventListener(evt, listener, [options]);
ele.addEventListener(evt, listener, true)ele.addEventListener(evt, listener, {capture:true});

Пример кода:

<button>Click Me</button>JavaScript
var btn = document.querySelector('button');
btn.addEventListener('click',foo);
function foo() { alert('hello'); }

4. removeEventListener()

Синтаксис

ele.removeEventListener(evt, listener, [options]);

Пример кода

btn.removeEventListener('click',foo);

5. createElement()

Синтаксис

document.createElement(tagName);

Пример кода:

var pEle = document.createElement('p')

6. appendChild()

Синтаксис

ele.appendChild(childEle)

Пример кода:

<div></div>JavaScript
var div = document.querySelector('div');
var strong = document.createElement('strong');strong.textContent = 'Hello';div.appendChild(strong);

7. removeChild()

Синтаксис

ele.removeChild(childEle)

Пример кода:

div.removeChild(strong);

8. replaceChild()

Синтаксис

ele.replaceChild(newChildEle, oldChileEle)

Пример кода:

HTML:
<div>
<strong>hello</strong>
</div>
JavaScript:
var em = document.createElement('em');
var strong = document.querySelector('strong');
var div = document.querySelector('div');
em.textContent = 'hi';
div.replaceChild(em, strong);

9. cloneNode()

Синтаксис

Пример кода:

HTML:
<div>
<strong>hello</strong>
</div>
JavaScript:
var strong = document.querySelector('strong');
var copy = strong.cloneNode(true);
var div = document.querySelector('div');
div.appendChild(copy);

10. insertBefore()

Синтаксис

ele.insertBefore(newEle, refEle);

Пример кода:

HTML:
<div>
<strong>hello</strong>
</div>
JavaScript:
var em = document.createElement('em');
var strong = document.querySelector('strong');
var div = document.querySelector('div');
em.textContent = 'hi';
div.insertBefore(em, strong);

11. createDocumentFragment()

Синтаксис

document.createDocumentFragment()

Пример кода:

HTML:
<table></table>
JavaScript:
var table = document.querySelector("table");
var df = document.createDocumentFragment();

for(var i=0; i<5; i++) {
var td = document.createElement("td");
var tr = document.createElement("tr");
td.textContent = i;
tr.appendChild(td)
df.appendChild(tr);
}

table.appendChild(df);

12. getComputedStyle()

Синтаксис

var style = getComputedStyle(ele, [pseudoEle])

Пример кода:

HTML:
<div></div>
JavaScript:
var style = getComputedStyle(document.querySelector('div'));
alert(style.width);

13. setAttribute()

Синтаксис

ele.setAttribute(name, value);

Пример кода:

HTML:
<div>hello</div>
JavaScript:
var div = document.querySelector('div');
div.setAttribute('contenteditable', '')

14. getAttribute()

Синтаксис

ele.getAttribute(name);

Пример кода:

HTML:
<div contenteditable=true>hello</div>
JavaScript:
var div = document.querySelector('div');
alert(div.getAttribute('contenteditable'))

15. removeAttribute()

Синтаксис

ele.removeAttribute(name);

Пример кода:

HTML:
<div contenteditable=true>hello</div>
JavaScript:
var
div = document.querySelector('div');
div.removeAttribute('contenteditable');

Stas Bagretsov

Written by

Надеюсь верую вовеки не придет ко мне позорное благоразумие. webdev/sports/books

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch
Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore
Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade