۲۸
اردیبهشت

جلسه ۳۵ : آموزش به دست آوردن مقدار گره در DOM

دسته‌بندی‌ها :

جزئیات
نوع محتوا آموزشی

فهرست

مقدمه

با سلام خدمت کاربران گرامی سایت پی وی لرن و علاقمندان و کاربرانی که علاقمند به یادگیری دوره XML هستند. در جلسات گذشته با نحوه جا به جایی در گره ها و نیز هدایت و راهبری گره ها در DOM آشنا شدیم؛ در ادامه کار با گره ها در این جلسه با آموزش به دست آوردن مقدار گره در DOM همراه شما هستیم.

آموزش به دست آوردن مقدار گره در DOM

می توان از ویژگی nodeValue برای دریافت مقدار متن یک گره استفاده کرد.
در این میان می توان از روش ()getAttribute برای بازگردانی مقدار یک attribute استفاده نمود.

تعیین مقدار یک عنصر Get the Value of an Element

در DOM، همه چیز یک گره است و گره های عنصر ارزش نوشتاری ندارند.
مقدار متن یک گره عنصر در یک گره child ذخیره می شود. این گره یک گره متنی نامیده می شود.
برای بازیابی مقدار متن یک عنصر، باید ارزش گره متن عناصر را بازیابی کنید.

روش GetElementsByTagName

روش ()getElementsByTagName یک لیست گره از تمام عناصر با نام تگ مشخصی را به همان ترتیب که در سند منبع نمایش داده می شود؛ بازگردانی می کند.
فرض کنید “books.xml” به xmlDoc بارگذاری شده است.

مثال : ooks.xml

<bookstore> 
   <book category="cooking"> 
       <title lang="en">Everyday Italian</title> 
       <author>Giada De Laurentiis</author> 
       <year>2005</year> 
       <price>30.00</price> </book> 
   <book category="children"> 
       <title lang="en">Harry Potter</title> 
       <author>J K. Rowling</author> 
       <year>2005</year> 
       <price>29.99</price> </book> 
   <book category="web"> 
       <title lang="en">XQuery Kick Start</title> 
       <author>James McGovern</author> 
       <author>Per Bothner</author> 
       <author>Kurt Cagle</author> 
       <author>James Linn</author> 
       <author>Vaidyanathan Nagarajan</author> 
       <year>2003</year> 
       <price>49.99</price> </book> 
   <book category="web" cover="paperback"> 
       <title lang="en">Learning XML</title> 
       <author>Erik T. Ray</author> 
       <year>2003</year> 
       <price>39.95</price> </book> 
</bookstore>

<title lang="en">Everyday Italian</title>

<author>Giada De Laurentiis</author>

<title lang="en">Harry Potter</title>

<author>J K. Rowling</author>

<title lang="en">XQuery Kick Start</title>

<author>James McGovern</author>

<author>Per Bothner</author>

<author>Kurt Cagle</author>

<author>James Linn</author>

<author>Vaidyanathan Nagarajan</author>

<title lang="en">Learning XML</title>

</bookstore>

این کد اولین عنصر <title> را بازیابی می نماید.

مثال :

var x = xmlDoc.getElementsByTagName("title")[0];

1	var x = xmlDoc.getElementsByTagName("title")[0];

ویژگی ChildNodes

ویژگی childNodes به بازگردانی یک لیست از گره های child یک عنصر می پردازد.
کد زیر کد گره متن اول عنصر <title> را بازیابی می کند:

مثال :

x = xmlDoc.getElementsByTagName("title")[0];
y = x.childNodes[0];

1 2	x = xmlDoc.getElementsByTagName("title")[0]; y = x.childNodes[0];

ویژگی nodeValue

کار ویژگی nodeValue بازگردانی متن یک گره متنی است.
کد زیر مقدار متن گره متن اول عنصر <title> را بازیابی می کند:

مثال :

x = xmlDoc.getElementsByTagName("title")[0];
y = x.childNodes[0];
z = y.nodeValue;

x = xmlDoc.getElementsByTagName("title")[0];

y = x.childNodes[0];

z = y.nodeValue;

نتیجه z: “هر روز ایتالیایی”

ارائه یک مثال کامل

مثال :

<!DOCTYPE html>
<html>
<body>

<p id="demo"></p>

<script>
var xhttp = new XMLHttpRequest();
xhttp.onreadystatechange = function() {
    if (this.readyState == 4 && this.status == 200) {
        myFunction(this);
    }
};
xhttp.open("GET", "books.xml", true);
xhttp.send();

function myFunction(xml) {
    var xmlDoc = xml.responseXML;
    var x = xmlDoc.getElementsByTagName('title')[0];
    var y = x.childNodes[0];
    document.getElementById("demo").innerHTML = y.nodeValue; 
}
</script>

</body>
</html>

<!DOCTYPE html>

<html>

<body>

var xhttp = new XMLHttpRequest();

xhttp.onreadystatechange = function() {

if (this.readyState == 4 && this.status == 200) {

myFunction(this);

}

};

xhttp.open("GET", "books.xml", true);

xhttp.send();

function myFunction(xml) {

var xmlDoc = xml.responseXML;

var x = xmlDoc.getElementsByTagName('title')[0];

var y = x.childNodes[0];

document.getElementById("demo").innerHTML = y.nodeValue;

}

</script>

</body>

</html>

Loop نمودن تمام تمام عناصر <title>: خودتان را امتحان کنید.

دریافتAttribute یک مقدار

در attribute ،DOM ها نیز گره هستند لذا بر خلاف گره های عنصر، گره های attribute دارای مقادیر متن هستند.
برای به دست آوردن ارزش یک attribute باید ارزش متن آن را بدست آوریم.
این کار را می توان با استفاده از روش ()getAttribute و یا با استفاده از ویژگی nodeValue از گره attribute انجام داد.

دریافت مقدار یک Attribute از طریق روش ()getAttribute

روش ()getAttribute می تواند مقدار یک attribute را بازگردانی نماید.
کد زیر مقدار متن از ویژگی “lang” اولین عنصر <title> را بازیابی می کند:

مثال :

x = xmlDoc.getElementsByTagName("title")[0];
txt = x.getAttribute("lang");

1 2	x = xmlDoc.getElementsByTagName("title")[0]; txt = x.getAttribute("lang");

نتیجه در “txt: “en

Loop را از طریق تمام عناصر <book> و ویژگی “category” خود دریافت کنید: خودتان را امتحان کنید.

دریافت مقدار یک Attribute از طریق روش ()getAttributeNode

روش ()getAttributeNode همه گره های attribute یا attribute node را بازگردانی می نماید.
کد زیر مقدار متن از ویژگی “lang” اولین عنصر <title> را بازیابی می کند:

مثال :

x = xmlDoc.getElementsByTagName("title")[0];
y = x.getAttributeNode("lang");
txt = y.nodeValue;

x = xmlDoc.getElementsByTagName("title")[0];

y = x.getAttributeNode("lang");

txt = y.nodeValue;

نتیجه در “txt = “en
Loop را از طریق تمام عناصر <book> و ویژگی “category” خود دریافت کنید: خودتان را امتحان کنید.

کلام آخر

آموزش به دست آوردن مقدار گره در DOM را به علاقمندان این دوره ارائه شد.
در جلسه بعدی با آموزش تغییر مقدار یک گره در DOM با شما هستیم.
با پی وی لرن همراه باشید.

QR: جلسه ۳۵ : آموزش به دست آوردن مقدار گره در DOM

به اشتراک بگذارید

دیدگاه کاربران

تعداد دیدگاه : 0

پی وی لرن – آموزش برنامه نویسی و طراحی وب سایت

دوره های آموزشی آکادمی پی وی لرن (پروژه محور و ویژه بازار کار)

جلسه ۳۵ : آموزش به دست آوردن مقدار گره در DOM

مقدمه

آموزش به دست آوردن مقدار گره در DOM

تعیین مقدار یک عنصر Get the Value of an Element

روش GetElementsByTagName

ویژگی ChildNodes

ویژگی nodeValue

ارائه یک مثال کامل

دریافتAttribute یک مقدار

دریافت مقدار یک Attribute از طریق روش ()getAttribute

دریافت مقدار یک Attribute از طریق روش ()getAttributeNode

کلام آخر

لیست مطالب دوره

XML AJAX

XML DOM

XPath Tutorial

XSLT Tutorial

XQuery

DTD

مطالب ویژه

دسته های اصلی

برگه ها

بلاگ