SlideShare a Scribd company logo
1 of 17
DOM
Манипуляции DOM
Для манипуляции с теми или иными узлами
DOM-дерева существуют специальные
методы.
Методы элемент или возвращают коллекцию
элементов. Node-коллекции или NodeList - это
некое подобие массивов, но не массив, а
объект.
Общим у node-коллекций с массивами является
только свойство length
var elements = document.getElementsByTagName('li');
//Вернет все элементы <li>
var items = document.getElementsByClassName('item');
// Вернет все элементы, у которых есть класс item
Универсальные методы -
querySelector и querySelectorAll
В качестве параметра, можно передать любой css-
селектор
var phone = document.querySelector('.phone')
// Вернет первый элемент, у которого есть класс phone
var phones = document.querySelectorAll('#someId .phone')
// вернет все элементы с классом phone, которые
находятся в элементе с id '#someId
Как можно находить элементы относительно
выбранного элемента
previousSibling - ссылка на предыдущий узел-
сосед
nextSibling - ссылка на предыдущий узел-
сосед
previousElementSibling - ссылка на
предыдущий элемент-сосед (узел с типом
“элемент”)
nextElementSibling - ссылка на следующий
элемент-сосед (узел с типом “элемент”)
Ссылки на дочерние элементы
firstChild - ссылка на первый дочерний узел
lastChild - ссылка на последний дочерний узел
firrstElementChild - ссылка на первый дочерний
элемент(узел с типом “элемент”)
lastElementChild - вытащит последний дочерний
элемент(узел с типом “элемент”)
childNodes - ссылки на дочерние узлы
children - ссылка на дочерние элементы(узелы с
типом “элемент”)
Ссылка на родительский узел
parentNode - ссылка на узел-родитель
Атрибуты
Содержимое
Создание, вставка и удаление DOM-
узлов
jQuery. Работа с DOM
003. manipularea cu dom
003. manipularea cu dom

More Related Content

More from Dmitrii Stoian

Controlul versiunilor
Controlul versiunilor Controlul versiunilor
Controlul versiunilor Dmitrii Stoian
 
Crearea prototipurilor
Crearea prototipurilorCrearea prototipurilor
Crearea prototipurilorDmitrii Stoian
 
Medii de dezvoltare node.js npm
Medii de dezvoltare node.js  npmMedii de dezvoltare node.js  npm
Medii de dezvoltare node.js npmDmitrii Stoian
 
Bazele conceptuale a dezvoltarii produselor
Bazele conceptuale a dezvoltarii produselorBazele conceptuale a dezvoltarii produselor
Bazele conceptuale a dezvoltarii produselorDmitrii Stoian
 
009. compresia imaginilor digitale
009. compresia imaginilor digitale009. compresia imaginilor digitale
009. compresia imaginilor digitaleDmitrii Stoian
 
008. iimagini ca entitate mutimedia
008. iimagini ca entitate mutimedia008. iimagini ca entitate mutimedia
008. iimagini ca entitate mutimediaDmitrii Stoian
 
007. culoare in entitati multimedia
007. culoare in entitati multimedia007. culoare in entitati multimedia
007. culoare in entitati multimediaDmitrii Stoian
 
006. textul – entitate de studiu multimedia
006. textul – entitate de studiu multimedia006. textul – entitate de studiu multimedia
006. textul – entitate de studiu multimediaDmitrii Stoian
 
004. prelucrarea evenimentelor js
004. prelucrarea evenimentelor js004. prelucrarea evenimentelor js
004. prelucrarea evenimentelor jsDmitrii Stoian
 
002. Introducere in type script
002. Introducere in type script002. Introducere in type script
002. Introducere in type scriptDmitrii Stoian
 
001.Introducere in tehnologii mutimedia
001.Introducere in tehnologii mutimedia001.Introducere in tehnologii mutimedia
001.Introducere in tehnologii mutimediaDmitrii Stoian
 

More from Dmitrii Stoian (16)

Svg
Svg Svg
Svg
 
Devtools
DevtoolsDevtools
Devtools
 
Controlul versiunilor
Controlul versiunilor Controlul versiunilor
Controlul versiunilor
 
Crearea prototipurilor
Crearea prototipurilorCrearea prototipurilor
Crearea prototipurilor
 
Medii de dezvoltare node.js npm
Medii de dezvoltare node.js  npmMedii de dezvoltare node.js  npm
Medii de dezvoltare node.js npm
 
Bazele conceptuale a dezvoltarii produselor
Bazele conceptuale a dezvoltarii produselorBazele conceptuale a dezvoltarii produselor
Bazele conceptuale a dezvoltarii produselor
 
Webpack
Webpack Webpack
Webpack
 
010. animatii
010. animatii010. animatii
010. animatii
 
009. compresia imaginilor digitale
009. compresia imaginilor digitale009. compresia imaginilor digitale
009. compresia imaginilor digitale
 
008. iimagini ca entitate mutimedia
008. iimagini ca entitate mutimedia008. iimagini ca entitate mutimedia
008. iimagini ca entitate mutimedia
 
007. culoare in entitati multimedia
007. culoare in entitati multimedia007. culoare in entitati multimedia
007. culoare in entitati multimedia
 
006. textul – entitate de studiu multimedia
006. textul – entitate de studiu multimedia006. textul – entitate de studiu multimedia
006. textul – entitate de studiu multimedia
 
005. html5 si canvas
005. html5 si canvas005. html5 si canvas
005. html5 si canvas
 
004. prelucrarea evenimentelor js
004. prelucrarea evenimentelor js004. prelucrarea evenimentelor js
004. prelucrarea evenimentelor js
 
002. Introducere in type script
002. Introducere in type script002. Introducere in type script
002. Introducere in type script
 
001.Introducere in tehnologii mutimedia
001.Introducere in tehnologii mutimedia001.Introducere in tehnologii mutimedia
001.Introducere in tehnologii mutimedia
 

003. manipularea cu dom

  • 1. DOM
  • 2.
  • 3.
  • 4. Манипуляции DOM Для манипуляции с теми или иными узлами DOM-дерева существуют специальные методы. Методы элемент или возвращают коллекцию элементов. Node-коллекции или NodeList - это некое подобие массивов, но не массив, а объект. Общим у node-коллекций с массивами является только свойство length
  • 5. var elements = document.getElementsByTagName('li'); //Вернет все элементы <li> var items = document.getElementsByClassName('item'); // Вернет все элементы, у которых есть класс item
  • 6. Универсальные методы - querySelector и querySelectorAll В качестве параметра, можно передать любой css- селектор var phone = document.querySelector('.phone') // Вернет первый элемент, у которого есть класс phone var phones = document.querySelectorAll('#someId .phone') // вернет все элементы с классом phone, которые находятся в элементе с id '#someId
  • 7. Как можно находить элементы относительно выбранного элемента previousSibling - ссылка на предыдущий узел- сосед nextSibling - ссылка на предыдущий узел- сосед previousElementSibling - ссылка на предыдущий элемент-сосед (узел с типом “элемент”) nextElementSibling - ссылка на следующий элемент-сосед (узел с типом “элемент”)
  • 8.
  • 9. Ссылки на дочерние элементы firstChild - ссылка на первый дочерний узел lastChild - ссылка на последний дочерний узел firrstElementChild - ссылка на первый дочерний элемент(узел с типом “элемент”) lastElementChild - вытащит последний дочерний элемент(узел с типом “элемент”) childNodes - ссылки на дочерние узлы children - ссылка на дочерние элементы(узелы с типом “элемент”)
  • 10. Ссылка на родительский узел parentNode - ссылка на узел-родитель
  • 13. Создание, вставка и удаление DOM- узлов
  • 14.