۲۸
اردیبهشت

جلسه ۳۳ : آموزش جا به جایی در گره ها در DOM

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

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

فهرست

مقدمه

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

آموزش جا به جایی در گره ها در DOM

جا به جایی یا Traversing در گره ها به این معناست که بتوان از قابلیت Loop استفاده کرد و یا از میان ذرخت گره ها node tree جا به جا شد.

جا به جایی در درخت گره

گاهی پیش می آید که قصد Loop نمودن یک سند XML را دارید؛ برای مثال زمانی که قصد استخراج ارزش هر عنصر را دارید؛ به این فرآیند “Traversing the node tree” یا جا به جایی در درخت گره گفته می شود.

در مثال زیر Loops ها در یک گره child از عنصر <book> و نیز نام ها و مقادیر نمایش داده شده است.

مثال :

<!DOCTYPE html>
<html>
<body>

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

<script>
var x, i ,xmlDoc;
var txt = "";
var text = "<book>" + 
"<title>Everyday Italian</title>" +
"<author>Giada De Laurentiis</author>" +
"<year>2005</year>" +
"</book>";

parser = new DOMParser();
xmlDoc = parser.parseFromString(text,"text/xml");

// documentElement always represents the root node
x = xmlDoc.documentElement.childNodes;
for (i = 0; i < x.length ;i++) {
    txt += x[i].nodeName + ": " + x[i].childNodes[0].nodeValue + "<br>";
}
document.getElementById("demo").innerHTML = txt;
</script>

</body>
</html

<!DOCTYPE html>

<html>

<body>

var x, i ,xmlDoc;

var txt = "";

var text = "<book>" +

"<title>Everyday Italian</title>" +

"<author>Giada De Laurentiis</author>" +

"<year>2005</year>" +

"</book>";

parser = new DOMParser();

xmlDoc = parser.parseFromString(text,"text/xml");

// documentElement always represents the root node

x = xmlDoc.documentElement.childNodes;

for (i = 0; i < x.length ;i++) {

txt += x[i].nodeName + ": " + x[i].childNodes[0].nodeValue + "<br>";

}

document.getElementById("demo").innerHTML = txt;

</script>

</body>

</html

خروجی :

مثال :

title: Everyday Italian
author: Giada De Laurentiis
year: 2005

title: Everyday Italian

author: Giada De Laurentiis

year: 2005

تشریح مثال بالا

۱٫فرض کنيد “books.xml” را به xmlDoc بارگذاري کرده ايد.
۲٫ گره های child عنصر ریشه را دریافت می کند.
۳٫ برای هر گره child ، خروجی نام گره و مقدار گره از text node به عنوان خروجی در نظر گرفته شده اند.

تفاوت های مرورگر در تجزیه DOM

همه مرورگرهای مدرن از مشخصات W3C DOM پشتیبانی می کنند.
با این حال، بین مرورگرها تفاوت هایی وجود دارد. یک تفاوت مهم این است: نحوه برخورد با فضاهای سفید و خطوط جدید!

DOM – فضاهای سفید و خطوط جدید

XML اغلب حاوی خط جدید new line یا علامت فضای سفید white space در بین گره است.
این اتفاق اغلب شامل مواردی می شود که سند توسط یک ویرایشگر ساده مثل Notepad ویرایش می شود.
مثال زیر (ویرایش توسط Notepad) شامل CR / LF (خط جدید) بین هر خط و دو فاصله در مقابل هر گره child است:

مثال :

<book>
  <title>Everyday Italian</title>
  <author>Giada De Laurentiis</author>
  <year>2005</year>
  <price>30.00</price>
</book>

<book>

<title>Everyday Italian</title>

<author>Giada De Laurentiis</author>

</book>

اینترنت اکسپلورر ۹ و قبل از آن، فضاهای سفید و یا خطوط جدید را به عنوان گره های متنی را در نظر نمی گیرند، در حالی که مرورگرهای دیگر این کار را انجام می دهند.
مثال زیر تعداد گره های child را که عنصر ریشه (از books.xml) دارد را به عنوان خروجی تعیین می نماید.

مثال : 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>

</book>

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

<author>J K. Rowling</author>

</book>

<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>

</book>

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

</book>

</bookstore>

IE9 و نسخه های قبلی آن تنها چهار گره child تعیین می کنند در حالی که IE10 و نسخه های بالاتر و سایر مرورگرها ۹ گره child را ایجاد می نمایند.

مثال :

function myFunction(xml) {
var xmlDoc = xml.responseXML;
    x = xmlDoc.documentElement.childNodes;
    document.getElementById("demo").innerHTML = 
    "Number of child nodes: " + x.length;
}

function myFunction(xml) {

var xmlDoc = xml.responseXML;

x = xmlDoc.documentElement.childNodes;

document.getElementById("demo").innerHTML =

"Number of child nodes: " + x.length;

}

PCDATA – اطلاعات شخصیت پردازش شده

تجزیه کننده XML معمولا تمام متن را در یک سند XML تجزیه می کند.
هنگامی که یک عنصر XML تجزیه می شود، متن بین تگ های XML نیز تجزیه می شود:

مثال :

<message>This text is also parsed</message>

1	<message>This text is also parsed</message>

تجزیه کننده این کار را انجام می دهد، زیرا عناصر XML می توانند شامل عناصر دیگر باشند، همانطور که در این مثال، که عنصر <name> شامل دو عنصر دیگر (اول و آخر) است:

مثال :

<name><first>Bill</first><last>Gates</last></name>

1	<name><first>Bill</first><last>Gates</last></name>

و تجزیه کننده آن را به زیر عناصر مانند زیر تقسیم می کند:

مثال :

<name>
  <first>Bill</first>
  <last>Gates</last>
</name>

<name>

<last>Gates</last>

</name>

کاراکترهای داده تجزیه شده یا (PCDATA) یک اصطلاح مورد استفاده در مورد داده های متنی است که توسط تجزیه کننده XML پردازش شده است.

CDATA- (غیر قابل تجزیه) – داده های کاراکتر

اصطلاح CDATA در مورد داده های متن مورد استفاده قرار می گیرد که نباید تجزیه کننده XML آن را تجزیه کند.
شخصیت هایی مانند “<” و “&” در عناصر XML غیرقانونی هستند.
“<” یک خطا ایجاد می کند، زیرا تجزیه کننده آن را به عنوان یک عنصر جدید تفسیر می کند.
“&” یک خطا ایجاد می کند، زیرا تجزیه کننده آن را به عنوان آغاز یک موجودیت یک کاراکتر تفسیر می کند.
برخی از متنها، مانند کد جاوا اسکریپت، شامل بسیاری از کاراکترهای “<” یا “&” هستند.
برای جلوگیری از خطا کد اسکریپت می تواند به عنوان CDATA تعریف شود.
همه چیز در بخش CDATA توسط تجزیه کننده نادیده گرفته می شود.
بخش CDATA با “<![CDATA[” and ends with “]]>” شروع می شود:

مثال :

<script>
<![CDATA[
function matchwo(a,b) {
    if (a < b && a < 0) {
        return 1;
    } else {
        return 0;
    }
}
]]>
</script>

<![CDATA[

function matchwo(a,b) {

if (a < b && a < 0) {

return 1;

} else {

return 0;

}

]]>

</script>

در مثال بالا، همه چیز در بخش CDATA توسط تجزیه کننده نادیده گرفته می شود.
آموزش جا به جایی در گره ها در DOM را با بخش یادداشت ها در بخش CDATA به پایان می بریم.

یادداشت ها در بخش CDATA یا (Notes on CDATA sections)

بخش CDATA نمی تواند شامل رشته “<[[” باشد.
بخش Nested CDATA را نیز نمی توان استفاده کرد.
“<[[” که پایان بخش CDATA را نشان می دهد نمی تواند شامل فضاها spaces و یا خطوط line breaks شکسته شود.

کلام آخر

در طی این جلسه با آموزش جا به جایی در گره ها در DOM همراه شما بودیم.

در جلسه بعدی شما را به آموزش Navigating Nodes یا نحوه راهبری و هدایت گره ها دعوت می نماییم.
با پی وی لرن همراه باشید.

QR: جلسه ۳۳ : آموزش جا به جایی در گره ها در DOM

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

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

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

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

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

جلسه ۳۳ : آموزش جا به جایی در گره ها در DOM

مقدمه

آموزش جا به جایی در گره ها در DOM

جا به جایی در درخت گره

تشریح مثال بالا

تفاوت های مرورگر در تجزیه DOM

DOM – فضاهای سفید و خطوط جدید

PCDATA – اطلاعات شخصیت پردازش شده

CDATA- (غیر قابل تجزیه) – داده های کاراکتر

یادداشت ها در بخش CDATA یا (Notes on CDATA sections)

کلام آخر

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

XML AJAX

XML DOM

XPath Tutorial

XSLT Tutorial

XQuery

DTD

مطالب ویژه

دسته های اصلی

برگه ها

بلاگ