انتخاب المان ها در DOM بوسیله جاوا اسکریپت

شروع آموزش برنامه نویسی جاوا شرکت لیندا. کلاس متوسط
برای انتخاب و handle کردن المان های صفحه html بوسیله دستورات جاوااسکریپت، دو دستور بسیار پرکاربرد وجود دارد.
1- انتخاب المان ها به کمک نام یا ID آنها

document.getElementById("myId");

2- انتخاب المان ها با استفاده از نام و نوع برچسب یا tag آنها

document.getElementsByTagName("a");

به عنوان مثال به نمونه کد زیر دقت کنید (توضیحات در کامنت ها نوشته شده است)

// grab single element
var myTitleLink = document.getElementById("mainTitle");

// information about the node
console.log("This is a node of type: ", myTitleLink.nodeType);
console.log("Inner HTML: ", myTitleLink.innerHTML);

//برای انتخاب و کار کردن با محتویات یک tag یا یک id خاص از دستور innerHTML استفاده می شود//

console.log("Child nodes: ", myTitleLink.childNodes.length);

// how many links?
var myLinks = document.getElementsByTagName("a");
console.log("Links: ", myLinks.length);



// here are some extra examples of combining these:

// First, grab a div called "homeNav"
var navItems = document.getElementById("homeNav");

// get information about that node
console.log("This is a node of type: ", navItems.nodeType);
console.log("Inner HTML: ", navItems.innerHTML);
console.log("Child nodes: ", navItems.childNodes.length);

// how many ordered lists?
var orderedLists = document.getElementsByTagName("ol");
console.log("Ordered lists: ", orderedLists.length);

// narrowing down the links further - use another element, not the whole document.
var myLinks = navItems.getElementsByTagName("a");
console.log("Links in navItems: ", myLinks.length);

// or even combined
var x = document.getElementById("mainNav").getElementsByTagName("a");
console.log("Links in mainNav: ", x.length);

مثال: تصور کنید بخواهیم در کد html زیر، تمامی li هایی که فرزند ul با id یا نام "abc" هستند را انتخاب کنبم.

html........

<ul id="abc">

<li>first</li>

<li>second</li>

<li>third</li>

</ul>

JavaScript.....

منبع: Lynda.com