هر سند html از ساختار های مختلفی تشکیل شده است. این ساختار به صورت درختی است و هر قسمت از این ساختار یک موجودیت خاص می باشد که خود می تواند موجودیت های متفاوتی را تشکیل دهد.

در ساختار بالا اصلی ترین موجودیت های متشکل از dom دو مورد HTML Element , Element Node می باشد.

HTML Element

یک موجودیت است که به صورت تگ در ساختار html می شناسیم که به آن HTML DOM Object نیز می گوییم. اگر بخواهیم لیست تمام Element ها را بررسی کنیم دقیقا مطابق با همان لیست تگ های html موجود. برای دریافت کردن لیست کامل HTML Collection از لیست کل تگ های موجود در ساختار html موجود از document.getElementsByTagName('*') استفاده کنید.

برخی html element ها را بر اساس دسته بندی در زیر بررسی می کنیم :

• Main root : ریشه اصلی ساختار html یا همان تگ html
• Sectioning root : بدنه اصلی یا همان body
• Document metadata : تگ هایی حاوی اطلاعات که چیزی را سند نمایش نمی دهند تگ اصلی head شامل این دسته از تگ ها می شوند.این دسته تگ ها شامل استایل و اسکریپت و داده های مهم برای سایر نرم افزار ها مثل موتور های جستجو و یا مرورگر ها (Search Engine , Browsers) هستند.به طور مثال تگ های meta, style,script,link,title می باشند.
• Content sectioning : تگ هایی که برای تقسیم بندی کردن محتوای بدنه هستند. header , main , aside , footer , address , section , nav
• Text content : لیست تگ هایی که متن در آن ها قرار می گیرد. p , blockqoate , div , ul , ol , li و ساختار همگی display:block می باشند.
• Inline text semantics : تگ هایی با ساختار display: inline که شامل a,span,i,… می باشند.
• Multimedia : تگ هایی برای نمایش رسانه ها نظیر img, audio , video , …
• Embedded content : تگ هایی برای نمایش محتوای بلوک شده مثل iframe , source , …
• Form : تگ هایی برای کار با فرم ها در html

هر html element object یک سری ویژگی های انحصاری دارد و یک سری متد ها و ویژگی های عمومی که در کل این html element ها موجود است. به طور مثال تگ a زمانی که انتخاب می گردد یک سری ویژگی های انحصاری دارد مثل href , title , که در برخی تگ ها نیست و یک سری ویژگی عمومی (Global Attribute) مثل اندازه و وضعیت navigate ان مثل sibiling , parent , childrens که هر کدام قابل دسترسی هستند.

هر زمان خواستید که ویژگی های مورد نظر برای هر تگ را به صورت اختصاصی بررسی کنید ابتدا به صفحه اصلی لیست HTML Element reference بروید و تگ مورد نظر را جستجو کنید و در نهایت ویژگی های این تگ را بررسی کنید.

a (anchor element)

زمانی که یک HTML Element از نوع anchor element را دارید یک سری ویژگی های اختصاصی برای این تگ خواهیم داشت :

• href
• type
• hash : همان مقادیری است که در انتهای لینک با # نمایان می شوند و لینک را داخلی می کند.
• target

let anchorList  = document.getElementsByTagName('a')
undefined
for(anchor of anchorList){
  console.log(anchor.href,anchor.target,anchor.hash)
}

img(image embeded element)

تگ تصویر هم علاوه بر شامل شدن ویژگی عمومی (Global Attribute) ویژگی های اختصاصی خود را نیز دارد .

• src
• width
• height
• sizes
• alt

let images = document.getElementByTagName('img')
for(image of images){
  console.log(image.align,image.width,image.height,image.alt)
}

button

• disabled : برای غیر فعال کردن یک المان می باشد.

var pause = (button) => {
    button.disabled = true
    button.previousElementSibling.disabled = false
    clearInterval(window.interval);
}

Global Attributes

لیست ویژگی ها و متد های عمومی هر HTML Element را بر اساس دسته بندی به قسمت های زیر تقسیم می کنیم. این ویژگی ها زمانی که یک HTML Element از هر نوع تگ داشته باشید در دسترس است . به طریقی فرض کنید که ویژگی ها و متد ها (Attributes , Methods) همان Interface است که تگ ها از روی این Interface شئ گرفته شده است.

HTML Element Dimension/Position

یک دسته از لیست ویژگی های موجود برای اندازه ها در html element است.

var image = document.getElementsByTagName('img')[1]
image.offsetParent
//<article class="col-md-8 single-main-content pull-md-left">
console.log(image.offsetTop,image.offsetLeft,image.offsetWidth)

HTML Element Navigating

هر المنت در ساختار درختی Dom یک موقعیت دارد و بنا به موقعیت خود می توان به المنت های اطراف خود دسترسی پیدا کنیم. این موقعیت در جهت های زیر قابل حرکت است:

• والد (Parent) که این جهت عمق دارد و می توان به صورت زنجیره ای به والد با عمق بالا تر دسترسی پیدا کرد.
• فرزندان (Children) این جهت رو به داخل در ساختار درختی می باشد و این جهت نیز عمق دارد.
• خواهر و برادر (Sibiling) این عمق در یک سطح از المنت است ، المان هایی با والد یکسان siblings هستند. و به صورت قبل (prev) و بعد (next) قابل تعریف است.

برای نشان کردن ¤ یک موجودیت در داخل درخت Dom با دو فرمت از موجودیت ها مواجه هستیم . Node و Element که برای هر کدام دسته متدهایی را در نظر گرفته ایم.

Element :‌ در این نوع Navigate ما پس از پیمایش در هر جهت موجودیتی که بدست می آوریم از نوع Element است .

document.getElementById("certain_list").parentElement //ul
document.getElementById("certain_list").parentElement.parentElement //div#content

const element = document.getElementById("myElement");
const closest = element.closest(".container");

var list = document.querySelector('ul') 
list.children.length

var list = document.getElementById('main_list')
list.getElementsByTagName('li')

const list = document.getElementsByClassName("example")[0];
list.getElementsByClassName("child")[0].innerHTML = "Milk";

var menu = document.getElementById('main-menu') 
menu.querySelector('li')

var menu = document.getElementById('main-menu') 
menu.querySelectorAll('li') //HTML Collection

let text = element.previousElementSibling.innerHTML;

element.nextElementSibling.innerHTML

Node : در این دسته متد ها می توان به هر نوع node پیمایش کرد.حال ساختار element , text , …

let name = document.getElementById("myLI").parentNode.nodeName;

const nodeList = document.body.childNodes;

document.getElementById("myList").firstChild.innerHTML;

document.getElementById("myList").lastChild.innerHTML;

document.getElementById("item1").nextSibling.innerHTML;

document.getElementById("item2").previousSibling.innerHTML;

سایر متد های مهم و کاربردی مرتبط به Navigation در Element ها در قالب زیر تعریف می کنیم:

let numb = document.getElementById("myDIV").childElementCount;

var menu = document.getElementById('main-menu')
menu.querySelector('li')

Element Node

یک سری ویژگی برای دریافت مشخصات element جاری است که با node شروع می شود . همان طور که پیش تر اشاره کردیم element در دسته node قرار می گیرد.

menu.nodeName //"UL"

menu.nodeType //1

li.querySelector('a').childNodes[0].nodeValue //Home
li.querySelector('a').nodeValue //null

li.querySelector('a').childNodes[0]
#text "Home"

Manipulatie Elements

یک دسته از متد ها برای ویرایش element ها در ساختار درختی dom می باشد. عملیات های افزودن append , حذف remove هر المنت در جایگاه مورد نظر آن .

const node = document.createElement("li");
const textnode = document.createTextNode("Water");
node.appendChild(textnode);
document.getElementById("myList").appendChild(node);

const newNode = document.createElement("li");
const textNode = document.createTextNode("Water");
newNode.appendChild(textNode);

const list = document.getElementById("myList");
list.insertBefore(newNode, list.children[0]);

var list = document.getElementsByTagName('ul')[0]
var firstElement = list.firstElementChild 
var lastElement = list.lastElementChild 
list.replaceChild(firstElement,lastElement)

const newNode = document.createTextNode("benz");
const element = document.getElementById("list").children[0];
element.replaceChild(newNode, element.childNodes[0]);

const list = document.getElementById("myList");
list.removeChild(list.firstElementChild)

var firstNode = firstElement.childNodes[0] 
firstNode.remove()

let element = document.getElementById('content')
let text = element.innerText;

document.getElementById('content').innerTEXT = 'NEW CONTENT'

let secondaryMenu = document.getElementById('secondary_menu')
let mainMenu = document.getElementById('main_menu')
mainMenu.innerHTML = secondaryMenu.innerHTML

برای قرار دادن یک متن داخل یک element می توان هم از یک رشته استفاده کرد(innerHTML , innerTEXT) و هم از یک element دیگر که می تواند شاخه ای از یک درخت dom باشد استفاده کرد(تمامی متد های بالا) و هم می توان از TextNode استفاده کرد.

var header = document.querySelector('#header')
//1.using innerHTML,innerTEXT
header.innerHTML = '<h1>HEADER</h1>'
header.innerTEXT = 'HEADER'
//2.using TextNode 
var headerText = document.createTextNode('HEADER')
header.appendChild(headerText)
//3.using Element HTML
var headerElement = document.createElement('h1')
headerElement.innerTEXT = 'HEADER'
header.appendChild(headerElement)

Element Attribute

یکی دیگر از موجودیت های مرتبط با dom ویژگی ها Attribute Node هستند . این attribute به اشیا element متصل می شوند. اگر یک element object را در نظر بگیرید یک سری از ویژگی های آن ها attribute های آن ها هستند. attribute ها در element به صورت name="value” تعریف می شوند.

ویژگی ها شامل event , class , id , data , … می باشند.

let text = element.getAttribute("class")

element.setAttribute("class", "democlass");

anchorElement.removeAttribute("href");

myButton.hasAttribute("onclick");

یک دسته دیگر از متد ها برای عملیات های set,get,remove,has برای attribute در فرمت Attribute Node می باشد.

element.getAttributeNode("class")

var bodyClass = document.body.getAttributeNode('class')
bodyClass.name
"class"
bodyClass.value
"activity-stream"

const class = document.createAttribute("class");
class.value = "display-inline";

const h1 = document.getElementsByTagName("H1")[0];
h1.setAttributeNode(class);

const class = document.getAttributeNode("class");
const h1 = document.getElementsByTagName("H1")[0];
h1.removeAttributeNode(class);

برای بدست آوردن لیست کلاس ها و شناسه element نیز ویژگی های مفیدی داریم :

document.getElementById("main_div").className = "row d-flex"

var classList = document.getElementById("main_div").classList

let id = document.getElementsByTagName("a")[0].id
document.getElementById("demo").id = "newid"

Event Attribute

برای ست کردن و حذف یک Event به یک element است . تکنیک های استفاده از Event را در یک مقاله مجزا بررسی خواهیم کرد.

//type one
element.addEventListener("click", myFunction);
function myFunction() {
  document.getElementById("demo").innerHTML = "Hello World";
}
//type tow
element.addEventListener("click", function(event) {
  document.getElementById("demo").innerHTML = "Hello World";
}); 
//type three
element.addEventListener("click", alert('it work'));

document.removeEventListener("mousemove", myFunction);

Style & Animation

این ویژگی برای برگرداندن لیست style های یک element است . برای این که بتوان ست کرد و یا مقدار دهی کرد.

document.querySelector('.crayon-plain').style
//CSSProperties

مقداری که برگردانده می شود از این ویژگی یک css2properties object است که می توان به آن استایل خاص را اضافه و حذف و بروزرسانی کرد.

برای افزودن استایل به یک html element از یکی از روش های style css properties یا cssText properties استفاده می کنیم.

<div class="note">JavaScript CSS</div>
const note = document.querySelector('.note');
note.style.backgroundColor = 'yellow';
note.style.color = 'red';

راه حل دوم استفاده از property با مقدار cssText است.

<div class="note">JavaScript CSS</div>
note.style.cssText = 'color:red;background-color:yellow';

اگر بخواهیم به لیست استایل های موجود موردی را اضافه کنیم باید به روش زیر اقدام کنیم:

<div class="note">JavaScript CSS</div>
note.style.cssText += 'color:red;background-color:yellow';

نکته مهم : با استفاده از جاوا اسکریپت و Css می توان حالت های انیمیشن برای المان ها ایجاد کرد. برای این کار از دو قابلیت css می توانید استفاده کنید:

• Transition : این قابلیت باید یک Property در دو حالت (اولیه و بعد از event) موجود باشد .در این قابلیت نمی توان از display: none استفاده کرد.
• Keyframes : این همان css animation است که با استفاده از آن می توانید انیمیشن ایجاد کنید. مطمئنا المان پس از پدیدار شدن انیمیشن خود را اجرا می کند.در این روش می توان از display: none استفاده کرد و کلید آن همین است.