یک سری ساختمان داده ها در ارتباط با موجودیت های اصلی Dom وجود دارد که به صورت array-like list می باشد. به این ترتیب این موجودیت ها یک سری متد ها و ویژگی ها را برای ما فراهم می آورد . این یک رویه مهم در زبان جاوا اسکریپت است که بسیاری از فریم ورک های زبان های دیگر مثل php laravel از آن ایده برداری کرده اند.

Node

Node که به صورت جمع در قالب ساختمان داده HTML NodeList قرار می گیرد. به زبان ساده تر Node یک مجموعه بزرگتری از Element است. یک Node می تواند هم یک متن یا یک عبارت باشد و هم می تواند یک تگ باشد.

در تصویر بالا همه عناصری که می بینید یک Node است. همجنین لیست تگ ها یک HTML Element است . زمانی که یک متن در یک سند html وارد می کنیم یا حتی یک line break یا یک tab در حقیقت یک node ایجاد کرده و در سند وارد می کنیم.

لیست انواع Node را در زیر مشاهده می کنیم که یکی از آن ها نیز ELEMENT_NODE است که بعدا بررسی می کنیم.

• Node.ELEMENT_NODE
• Node.ATTRIBUTE_NODE
• Node.TEXT_NODE
• Node.CDATA_SECTION_NODE
• Node.PROCESSING_INSTRUCTION_NODE
• Node.COMMENT_NODE
• Node.DOCUMENT_NODE
• Node.DOCUMENT_TYPE_NODE
• Node.DOCUMENT_FRAGMENT_NODE
• Node.NOTATION_NODE

Element Node

Element  که به صورت جمع در قالب ساختمان داده HTML Collection قرار می گیرد. Element ها یک نوع خاصی از Node است که به آن Element می گوییم.به مثال های زیر توجه کنید:

document.querySelector('p')
//<p class="woocommerce-mini-cart__empty-message">
document.querySelector('p').childNodes[0]
#text "no product found in cart"
document.querySelector('p').nodeType //1
document.querySelector('p').childNodes[0] //3

Attribute Node

یک ویژگی برای نگهداری داده هایی در رابطه با data, configuration structure, behaviour در ساختار html element است . class , id , data-* , aria-*  می باشد. یک سری attribue اختصاصی مرتبط با کتابخانه ها داریم که قابل استفاده برای همان کتابخانه است به طور مثال در react ما یک سری DOM attributes داریم که در این کتابخانه معنی دار هستند.

متد element.getAttributeNode از html element موجودیت attribute node را بر می گرداند. همچنین می توانیم با متد document.createAttribute یک attribute node بسازیم و آن را به یک html element ارتباط بدهیم.

let data = document.createAttribute('data-variable') 
data.value='foo' 
document.body.setAttributeNode(data)

یک Attribute Node دو ویژگی دارد که بیشترین استفاده را دارد :

let bodyClass = document.body.getAttributeNode('class')
bodyClass.name // class

let bodyClass = document.body.getAttributeNode('class')
bodyClass.value // row single-post

DOMTokenList

این ساختمان داده حاصل لیست کلاس های یک html element است. زمانی که ویژگی element.classList را فراخوانی کنیم این ساختمان داده بر می گردد. به کلاس token نیز می گوییم . یک کلاس از لیست کلاس های موجود . به طور مثال افزودن token به یک لیست کلاس .

document.body.classList

لیست متد های پرکاربرد این ساختمان داده از قرار زیر است:

document.body.classList.add('hello')

document.body.classList.toggle('show')

var triggerSubmenu = (event) => {
    event.preventDefault()
    var submenu = event.target.parentNode.nextElementSibling
    if(false == submenu.classList.contains('vertical-submenu')){
        console.error('selector is invalid,mnue html structure is invalid')
        return
    }
    submenu.classList.toggle('open')
}

document.body.classList.remove('row')

let isRow = document.body.classList.contains('row')

document.body.classList.replace('d-flex','d-inline')

document.body.classList.forEach(function(element,index){
   console.log(element,index)
})

for(let keyIndex of document.body.classList.keys()){
    console.log(keyIndex)
}

for(let keyIndex of document.body.classList.values()){
    console.log(keyIndex)
}

document.body.classList.item(0)
"rtl"

HTML Collection

این یک ساختمان داده به صورت array-like list می باشد که حاصل یک آرایه ای از html element می باشد. همه این ساختمان داده ها یک شئ از جنس HTMLCollection است. این ساختمان داده حاصل برگشت متد های زیر می باشد:

• document.getElementsByTagName()
• document.getElementsByClassName()
• children

ساختمان داده های مشابهی است که از همین جنس است و در اثر اجرای متد های خاصی از نود ها برمی گردد. به طور مثال HTMLOptionsCollection که در اثر select.options بر می گردد و برای select هایی از جنس multiple کاربرد دارد.

let opts = document.querySelector('#select-multiple-porducts')
for(let item of opts.options){
    console.log(item)
}

HTML NodeList

این یک ساختمان داده است که یک لیست از node ها می باشد – array-like list – که حاصل برگشت متد ها و ویژگی های زیر می باشند:

• childNodes()
• querySelectorAll()
• getElementsByName() 

 HTML Collection , HTML NodeList

برای پیمایش این نوع ساختمان داده ها می توان از for به نحو های for , for…of استفاده کرد.

var anchors = document.getElementsByTagName('a')
for(let i=0; i < anchors.length; i++){
    console.log(anchors[i])
}

با استفاده از for…of

var anchors = document.getElementsByTagName('a')
for(let element of anchors){
    console.log(element)
}

این دو ساختمان داده گفته شده در بخش قبل هر دو یک array-like list هستند که دو متد مهم length , item برای به دست آوردن آن ها وجود دارد.

let anchors = document.getElementsByTagName('a')
anchors.item(0)

let anchors = document.getElementsByTagName('a')
anchors.length

به طور کلی می توان گفت که HTML Collection حاصل جمع html element است و NodeList حاصل جمع لیست document nodes (مواردی شامل element nodes, attribute nodes, and text nodes).

CSS2Properties

یکی دیگر از ساختمان داده های مرتبط با با درخت DOM است که شامل Property های css2 می باشد . این ساختمان داده در بازگشت style attribute در html element است.

const h2 = document.querySelector('h2')
h2.style
//CSS2Properties

ویژگی های این ساختمان داده بسیار نزدیک است به css2 properties با تفاوت هایی نظیر این که به صورت camel case می باشند . به طور مثال background-color را به صورت backgroundColor می نویسیم.

لیست ویژگی های CSS2Properties یا همان Style Object Properties را در این رفرانس می توانید مشاهده کنید.