.toNode, .toNodes, .toWindow

Преобразование

Методы преобразования .toNode(), .toNodes(), .toWindow(). Объект window. Окно текущего документа.

Метод .toNode()

Возвращает узел-элемент Node.ELEMENT_NODE.

toNode([element])

Метод util.toNode() преобразует свой аргумент в ELEMENT_NODE. Если вдруг метод принимает коллекцию узлов NodeList, то преобразование происходит с первым элементом списка, что в свою очередь возвращает первый узел-элемент, который затем наследует свойства от родительского узла Node. Если нужно создать новый экземпляр Array из строки, массивоподобного или итерируемого объекта, то обрати внимание на util.toArray().

Использование

<ol class="example">
	<li>
		<div>Текст</div>
	</li>
</ol>

В примере используем getElementsByClassName(), чтобы уловить саму суть "системы". Т.к. в константе myExample будет HTMLCollection (массивоподобный объект), мы можем используя метод util.toNode() преобразовать HTMLCollection в объект типа Element.

const myExample = document.getElementsByClassName('example') 

const myNode = util.toNode(myExample)

console.log(myExample)
console.log(myNode)

Результат

HTMLCollection [ol.example]
<ol class="example">...

Метод .toNodes()

[NodeList, HTMLCollection] в массив. Конструирует новый массив со всеми значениями, если возможно. Конвертирование в Array.

toNodes([element])

Метод util.toNodes() конструирует массив не изменяя внутреннее содержимое, для которого он был вызван. Иногда удобнее работать с содержимым NodeList (коллекция узлов) используя методы Array. Метод позволяет конвертировать NodeList и HTMLCollection (коллекция HTML элементов) в Array. Если нужно создать новый экземпляр Array из строки, массивоподобного или итерируемого объекта, то обрати внимание на util.toArray().

Использование. JavaScript

<ol id="ex-list" class="uk-list">
	<li class="example">
		<div>1</div>
	</li>
	<li class="example">
		<div>2</div>
	</li>
	<li class="example">
		<div>3</div>
	</li>
</ol>
const myList = document.getElementById('ex-list')
   
const myLiNode = document.querySelectorAll('.example')    // NodeList статический (не динамический)
const myLiColl = myList.getElementsByClassName('example') // HTMLCollection
const myLiNodeArr = util.toNodes(myLiNode)
const myLiCollArr = util.toNodes(myLiColl)

console.log(myLiNode)
console.log(myLiColl)
console.log(myLiNodeArr)
console.log(myLiCollArr)

Результат

NodeList(3) [li.example, li.example, li.example]
HTMLCollection(3) [li.example, li.example, li.example]
(3) [li.example, li.example, li.example]
(3) [li.example, li.example, li.example]
продолжение... Метод push()... присоединяем что-то...
//const myLiNodePush = myLiNode.push('test') // ожидаемый TypeError
//const myLiCollPush = myLiColl.push('test') // TypeError

const myLiNodePush = myLiNodeArr.push('test') // а здесь Ok, добавляем в конец
const myLiCollPush = myLiCollArr.push('test') // Ok

console.log(myLiNodeArr)
console.log(myLiCollArr)

Результат

(4) [li.example, ...
(4) [li.example, ...
продолжение... Метод pop()... удаляем...
//const myLiNodePop = myLiNode.pop() // ожидаемый TypeError
//const myLiCollPop = myLiColl.pop() // TypeError

const myLiNodePop = myLiNodeArr.pop() // а так Ok, убрали
const myLiCollPop = myLiCollArr.pop() // Ok

console.log(myLiNodeArr)
console.log(myLiCollArr)

Результат

(3) [li.example, ...
(3) [li.example, ...
продолжение...
// ...
const myСhildNodes = myList.childNodes // NodeList
const myСhildrenCo = myList.children   // HTMLCollection

console.log(myСhildNodes)
console.log(myСhildrenCo)
console.log(util.toNodes(myList.childNodes))
console.log(util.toNodes(myList.children))

Результат

NodeList(7) [text, li.example, text, li.example, text, li.example, text]
HTMLCollection(3) [li.example, li.example, li.example]
(7) [text, li.example, text, li.example, text, li.example, text]
(3) [li.example, li.example, li.example]

Метод .toWindow()

Объект window представляет собой окно, содержащее DOM документ. Может быть получено окно текущего документа; объект window, который связан с document текущей страницы.

toWindow([element])