document.title = 'hello world'

• uninitialized – Has not started loading
• loading – Is loading
• loaded – Has been loaded
• interactive – Has loaded enough to interact with
• complete – Fully loaded

document.lastModified
"06/04/2022 05:12:19"

document.designMode = "on";

wp-settings-1=wordpress_test_cookie=WP+Cookie+check;wp_lang=fa_IR

document.body.nodeName //BODY

let formCount = document.forms.length
let firstFormId = document.forms[0].id

const myImages = document.images;
for(i=0;i<myImages.length;i++){
    console.log(myImages[i].src)
}

document.scripts.length //29

const para = document.createElement("p");
para.innerText = "This is a paragraph";
document.body.appendChild(para);

let textNode = document.createTextNode("Hello World"); 
document.body.appendChild(textNode);

یکی دیگر از کاربردهای textNode برای مقداردهی متن به html element است

const h1 = document.createElement("h1");
const textNode = document.createTextNode("Hello World");
h1.appendChild(textNode);

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

const att = document.createAttribute("class");
att.value = "display-flex flex-row justify-content-center";

به صورت یکتا ویژگی ها attributes قابل استفاده نیستند و زمانی که به یک html element نسبت داده می شوند معنی پیدا می کنند.

let span = document.createElement('span')
let dataAttribute = document.createAttribute('data-id')
dataAttribute.value = 12
span.setAttributeNode(dataAttribute) //<span data-id="12">

ساده تر این است که با متد setAttribute برای هر html element ویژگی تعیین کنیم که بسیار ساده تر است و تک خطی است.

let comment = document.createComment('hello header')
document.querySelector('#header').append(comment)

در مثال بالا در لیست فرزندان #header این کامنت قابل دسترسی است. دقت داشته باشید به دلیل این که این یک node است برای دسترسی به آن باید از ویژگی childNodes استفاده کنید.

document.querySelector('#header').childNodes

در انتهای لیست node های برگشت داده شده می توان comment node را مشاهد کنید.

document.getElementById("demo");

const collection = document.getElementsByClassName("example");

const collection = document.getElementsByTagName("li");

لیست برگشت داده شده یک ساختمان داده است شبیه به آرایه که المان های آن با index قابل دسترسی است.

document.getElementsByName('search') //NodeList

const collection = document.getElementsByTagName("li"); 
const collection = document.getElementsByTagName("*");

document.querySelectorAll(".example");

document.querySelector("p");

در مثال بالا اولین تگ p را بر می گرداند.