تصف هذه المقالة استخدام JavaScript لعقد صفحة الويب. شاركه للرجوع إليه. التحليل المحدد هو كما يلي:
1. المفاهيم الأساسية
يسمى هذا الجزء "HTML DOM". ما يسمى HTML DOM هو قواعد تحميل صفحة الويب ، وهي قاعدة ، وهي الصيغة الأساسية لصفحات الويب.
أي أنه يجب كتابة جميع صفحات الويب وفقًا لقواعد: <html> <body> </body> </html> ... وتم تحميلها أيضًا وفقًا لهذه القواعد.
ما يسمى "عقدة صفحة الويب" هي أيضًا شرح شائع لـ "DOM Node". على سبيل المثال ، يكون المحتوى الموجود أسفل عقدة HTML هو كل المحتوى بين <html> </html> ، والمحتوى الموجود أسفل عقدة الجسم هو كل المحتوى بين </body>.
ينص HTML DOM على النحو التالي: 1. المستند بأكمله عبارة عن عقدة مستند ؛ 2. كل علامة HTML (المعنى <Body> <body> وعلامات HTML الأخرى ، بدلاً من علامة <html> البسيطة) هي عقدة عنصر ؛ 3. النص الوارد في عنصر HTML هو عقدة نصية ؛ 4. كل سمة HTML هي عقدة سمة
على سبيل المثال ، يمكنك رسم صفحة إلى شجرة عقدة DOM التالية:
التعريف الرسمي لـ HTML DOM هو كما يلي: HTML DOM هو اختصار نموذج كائن مستند HTML ، و HTML DOM هو نموذج كائن مستند تم تطبيقه خصيصًا على HTML/XHTML. يمكن للأشخاص المطلعين على تطوير البرمجيات فهم HTML DOM باعتباره واجهة برمجة تطبيقات صفحة الويب. يعامل كل عنصر في صفحة الويب ككائنات ، بحيث يمكن أيضًا الحصول على العناصر الموجودة في صفحة الويب أو تحريرها بواسطة لغة الكمبيوتر. على سبيل المثال ، يمكن لـ JavaScript استخدام HTML DOM لتعديل صفحات الويب ديناميكيًا.
يمكن باستخدام JavaScript التحكم بسهولة في الإضافة والحذف والتعديل والبحث عن عقد صفحة الويب لعقد DOM هذه.
2. الأهداف الأساسية
استخدم JavaScript لإضافة وحذف وتعديل وعقد صفحات الويب. في صفحة الويب:
1. زر "إضافة عقدة" ، أثناء إضافة خيارات العقدة في القائمة المنسدلة المرتبطة بـ "زر استبدال". إذا كان هناك 9 عقد في صفحة الويب ، فلن يُسمح بأي تحذير من الإضافة والمنبثقة.
2. زر "حذف العقدة الأخيرة" ، مع تقليل خيارات العقدة في القائمة المنسدلة المرتبطة بـ "زر استبدال".
3. زر "استبدال عقدة محتوى" ، أولاً حدد العقدة المراد تشغيلها ، ثم أدخل المحتوى المراد استبداله ، وسيتم استبدال العقدة المقابلة.
4. إذا لم تكن هناك عقد في صفحة الويب ، فلن يتم السماح بحذف أو استبدال ، وسيتم تقديم تحذير منبثق.
3. عملية الإنتاج
دون تكوين أي بيئة ، فقط اكتب الرمز التالي على صفحة الويب. الرمز المحدد كما يلي ، وسيتم شرح ما يلي جزئيًا:
انسخ رمز الرمز كما يلي: <! doctype html public "-// w3c // pd xhtml 1.0 transitional // en" "http://www.w3.org/tr/xhtml1/pd/xhtml1-transitional.dtd
<html xmlns = "http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv = "content-type" content = "text /html ؛ charset = utf-8" />
<title> jsdivnode </title>
<script type = "text/javaScript">
var i = 0 ؛
وظيفة CreateNode () {
إذا (أنا <9) {
i ++ ؛
VAR OPTION = document.createElement ("Option") ؛
Option.value = i ؛
Option.innerhtml = "node" + i.toString () ؛
document.getElementById ("number"). AppendChild (Option) ؛
var p = document.createElement ("p") ؛
p.innerhtml = "node" + i.toString () ؛
document.getElementById ("D"). AppendChild (P) ؛
} آخر
تنبيه ("أنا بخير ، هناك الكثير من العقد ، لا يمكنني فعل ذلك ~") ؛
}
وظيفة removenode () {
if (i> 0) {
أنا--؛
var s = document.getElementById ("number") ؛
S.Removechild (S.Lastchild) ؛
var d = document.getElementById ("d") ؛
D.Removechild (D.Lastchild) ؛
} آخر
تنبيه ("لا عقد ، حذف غزل ~") ؛
/*var ps = d.getelementsbytagname ("P") ؛*/
/*Document.getElementByid("d").removechild(ps budap9]) ؛ */
}
وظيفة replacenode () {
if (i> 0) {
var d = document.getElementById ("d") ؛
var p = document.createElement ("p") ؛
p.innerhtml = document.getElementById ("text"). value ؛
var ps = d.getelementsbytagname ("P")
D.ReplaceChild (p ، ps [document.getElementById ("number"). value - 1]) ؛
} آخر
تنبيه ("لا عقدة ، استبدال الغزل ~") ؛
}
</script>
</head>
<body>
<type type = "button" value = "create node" onClick = "createNode ()" />
<type type = "button" value = "حذف العقدة الأخيرة" onClick = "Removenode ()" />
<حدد ID = "number"> </rection>
<type type = "text" id = "text" />
<type type = "button" value = "replacenode content" onClick = "REPLACENODE ()" />
<div id = "d">
</div>
</body>
</html>
1. <body> العقدة
انسخ الرمز على النحو التالي: <Body>
<!-الزر x2 ، كلا الأزران لهما إجراءات onclick تشير إلى الوظيفة المقابلة->
<type type = "button" value = "create node" onClick = "createNode ()" />
<type type = "button" value = "حذف العقدة الأخيرة" onClick = "Removenode ()" />
<!-تتم إضافة قائمة منسدلة بدون <Spoint> العقد الفرعية في نفس الوقت بواسطة عقدة Createnode (). ->
<حدد ID = "number"> </rection>
<!-مربع الإدخال X1 ، انتبه إلى تعيين المعرف ، replacenode () للحصول على قيمة مربع النص هذا->
<type type = "text" id = "text" />
<!-الزر x1 ، نفس الزر x2->
<type type = "button" value = "replacenode content" onClick = "REPLACENODE ()" />
<!-طبقة فارغة بدون شيء ، مثل العقدة الوالدية لـ <p> ، تتم إضافة جميع أطفال هذه العقدة <Div>
<div id = "d">
</div>
</body>
2. <head> العقدة
انسخ الرمز كما يلي: <head>
<!-الترميز والعنوان المستخدمة في صفحات الويب غير مهم ، والمفتاح هو جزء البرنامج النصي JS التالي->
<meta http-equiv = "content-type" content = "text /html ؛ charset = utf-8" />
<title> jsdivnode </title>
<script type = "text/javaScript">
/*يسجل المتغيرات العالمية لعدد العقد الموجودة في صفحة الويب الحالية*/
var i = 0 ؛
/*هناك 3 وظائف أدناه. عند النقر فوق الزر ، يسمى*/
وظيفة CreateNode () {
/*إذا كان هناك أقل من 9 عقد في صفحة الويب ، فسيعمل ، وإلا نافذة منبثقة*/
إذا (أنا <9) {
/*إضافة عقدة أخرى لكل سجل المتغير العالمي I+1*/
i ++ ؛
/*قم بإنشاء عقدة خيار ، ثم اسم مؤشره هو أيضًا خيار*/
VAR OPTION = document.createElement ("Option") ؛
/*أعلن أن سمة القيمة لعقدة الخيار التي تم إنشاؤها هي القيمة الحالية لـ i ، أي عندما تكون i = 1 ، هناك عقد طفل مثل <value = 1/eboty>. */
/*تقول بعض صفحات الويب أنه باستخدام طريقة setAttribute () لتعيين السمات ، ولكن تمارس شخصيا أنه ليس من السهل استخدام*/
Option.value = i ؛
/*اضبط النص أدناه عقدة الخيار. بعد هذا البيان ، تصبح العقدة الفرعية <value Option = 1> node1 </soph>*/
Option.innerhtml = "node" + i.toString () ؛
/*<select> معرف العقدة الأصل هو رقم. تتطلب هذه العبارة أن يتم إضافة <sope value = 1> node1 </soph>*/تمت إضافة إلى العقدة الأصل في <select> </rewer>.
document.getElementById ("number"). AppendChild (Option) ؛
/*المبدأ هو نفسه على النحو الوارد أعلاه. أضف <p> Child Node تحت العقدة الأصل <viv> ، وقيمة النص تحت <p> Node Node هي Node1*/
var p = document.createElement ("p") ؛
p.innerhtml = "node" + i.toString () ؛
document.getElementById ("D"). AppendChild (P) ؛
} آخر
تنبيه ("أنا بخير ، هناك الكثير من العقد ، لا يمكنني فعل ذلك ~") ؛
}
وظيفة removenode () {
/*إذا كان هناك أكثر من 0 العقد في صفحة الويب ، فهذه هي العقد ، ثم النافذة المنبثقة فقط
if (i> 0) {
/*لكل تخفيض العقدة ، يتم تسجيل المتغير العالمي I-1 من صفحة الويب الحالية.
أنا--؛
/*حدد المؤشر إلى العقدة الأصل لـ <select>*/
var s = document.getElementById ("number") ؛
/*حذف العقدة الأخيرة للطفل تحت العقدة الأصل لـ <select> ، أي <spoint>. إذا كنت ترغب في حذف المعلمة الأولى ، تصبح المعلمة S.Firstchild*/
S.Removechild (S.Lastchild) ؛
/*نفس المبدأ على النحو الوارد أعلاه ، احذف عقدة الطفل الأخيرة تحت طبقة <Div>*/
var d = document.getElementById ("d") ؛
D.Removechild (D.Lastchild) ؛
/*إذا كنت تريد حذف الثامن <p> تحت <fiv> ، يرجى القيام بما يلي*/
/*PS هو مؤشر إلى <p> مجموعة العقدة الفرعية*/
/*var ps = d.getelementsbytagname ("P") ؛*/
/*Document.getElementByid("d").removechild(ps budap9]) ؛ */
} آخر
تنبيه ("لا عقد ، حذف غزل ~") ؛
}
وظيفة replacenode () {
/*إذا كان هناك أكثر من 0 العقد في صفحة الويب ، فهذه هي العقد ، ثم النافذة المنبثقة فقط
if (i> 0) {
/*تحديد المؤشر إلى العقدة الأصل D*/
var d = document.getElementById ("d") ؛
/*إنشاء <p> </p> العقدة*/
var p = document.createElement ("p") ؛
/*احصل على المحتوى الذي تم إدخاله في مربع النص ووضعه في <p> </p> Node*/
p.innerhtml = document.getElementById ("text"). value ؛
/.
var ps = d.getelementsbytagname ("P")
/*اسمح للعقدة التي قمت بإنشائها للتو استبدال عقدة الطفل <p> تحت <div> ، حيث N هي القيمة -1 المحددة في القائمة المنسدلة الآن. سبب -1 هو أن عدد مجموعة العقدة الفرعية ومجموعة الأطفال تبدأ من 0 ، بينما يبدأ عددنا البشري من 1. */
D.ReplaceChild (p ، ps [document.getElementById ("number"). value - 1]) ؛
} آخر
تنبيه ("لا عقدة ، استبدال الغزل ~") ؛
}
</script>
</head>
آمل أن تكون هذه المقالة مفيدة لبرمجة JavaScript للجميع.