المتطلبات: أكمل تشغيل الإضافة والحذف والتغيير ونسخ العقدة
الطرق والسمات المستخدمة:
1. احصل على العقدة الأصل للعقدة
سمة ParentNode
2. احصل على مجموعة Sub -node للعقدة
سمة eildnodes
3. إنشاء عقدة جديدة
CreateTextNode (محتوى نص العقدة) طريقة كائن المستند ليست جيدة في التوافق في بعض المتصفحات
CreateElement (Object) كائن المستند ، مثل: document.createElement ("A") ؛
4. إضافة السمات وقيم السمة إلى كائن من العقدة
SettAttribute (السمة ، قيمة السمة) ؛
5. استبدل NODE الفرعي تحت عقدة معينة
ReplaceChild (عقدة جديدة ، عقدة ذرية) ؛
6. أضف عقدة إلى عقدة
AppendChild (العقدة المراد إضافتها)
7. كلونج عقدة معينة
لا يمر Clonenode () المعلمة كمعلمة حقيقية ، مما يشير إلى أن عقدة الاستنساخ تتضمن الفرعية
نسخ رمز رمز على النحو التالي:
<doctype html>
<html>
<head>
<title> node_curd.html </itlem>
<meta http-equiv = "الكلمات الرئيسية" content = "Keyword1 ، Keyword2 ، Keyword3">
<meta http-equiv = "description" content = "This is is my part" >>
<meta http-equiv = "content-type" content = "text/html ؛ charset = utf-8">
<!-<link rel = "stylesheet" type = "text/ css" href = "./ Styles.css">->
<type type = "text/css">
ديف {
الحدود: Red 1px صلبة ؛
العرض: 200 بكسل ؛
الارتفاع: 50 بكسل ؛
الهامش: 20px 30px ؛
الحشو: 20 بكسل ؛
}
#div_1 {{
واضح: كلاهما ؛
لون الخلفية:#ff3366 ؛
}
#div_2 {{
واضح: كلاهما ؛
خلفية اللون:#6699ff ؛
}
#div_3 {{
واضح: كلاهما ؛
لون الخلفية:#CCCC99 ؛
}
#div_4 {{
واضح: كلاهما ؛
لون الخلفية:#00CC33 ؛
}
</style>
<script type = "text/javaScript">
// إضافة الطريقة 1: أضف نصًا إلى منطقة DIV الأولى
وظيفة addtext () {
// 1. احصل على العقدة لإضافة محتوى نص
var dig_1node = document.getElementById ("div_1") ؛
// 2. إنشاء عقدة نصية. CreateTextNode طريقة كائن المستند. بعض المتصفحات غير مدعومة.
var textNode = document.createTextNode ("أليس هذا معروضًا؟") ؛
// 3. أضف عقدة النص إلى طريقة AppendChild (مثيل Sub -Node) إلى العقدة المراد إضافتها
ديف
}
// إضافة الطريقة 2: إضافة زر إلى منطقة DIV الأولى
وظيفة addbutton () {
// 1. احصل على العقدة لإضافة محتوى نص
var dig_1node = document.getElementById ("div_1") ؛
// 2. إنشاء عقدة. CreateElement () من كائن المستند
var anode = document.createElement ("input") ؛
// 3. أضف قيمة السمة والسمات إلى الكائن المحدد
//anode.setattribute 18 "، اكتب" ، "زر") ؛ // هو نفس تأثير الكود التالي الذي تم الوصول إليه
anode.type = "button" ؛
anode.setattribute ("value" ، "button") ؛
anode.setAttribute ("onClick" ، "deletetext ('div_1')") ؛
// 4. أضف عقدة النص إلى طريقة ApendChild (مثيل Sub -Node لإضافته) تحت العقدة المراد إضافتها
ديف
}
// حذف الطريقة 1: حذف نود العقد الفرعية في المنطقة الثانية
دالة deleteText (nodeid) {
// 1. احصل على العقدة
var dignode = document.getElementById (nodeid) ؛
// 2. احصل على sub -node ، وهذا هو ، عقدة النص
var chilenode = divnode.childnodes [0] ؛
// 3. حذف ، تمرير معلمة صواب سيحذف جميع الأدوات الفرعية تحتها
//chilenode.removenode () ؛
divnode.removechild (chilenode) ؛
}
// حذف الطريقة الثانية: حذف العناصر
وظيفة حذف () {
// 1. احصل على العقدة
var dig_2node = document.getElementById ("div_2") ؛
// 2. احصل على العقدة الأصل ،
var parentNode = div_2node.
// 3. حذف
parentnode.removechild (div_2node) ؛
}
// يراجع
وظيفة updateText () {
// 1 احصل على عقدة المنطقة التي تريد تعديل الحرف
var dig_3node = document.getElementById ("div_3") ؛
// 2. احصل على مجموعة sub -node في الخطوة الأولى ، حدد العقدة المراد تعديلها
var childnode = div_3node.childnodes [0] ؛
// 3. قم بإنشاء عقدة نصية
var newNode = document.createTextNode ("هاها ، لقد استبدلتك.") ؛
// 4. استخدم 3 خطوات لاستبدال العقدة في الخطوة 2 خطوات
//childnode.replacenode (newNode) ؛ // هذه الطريقة غير متوافقة مع Firefox و Google
ديف
}
// استنساخ
وظيفة copynode () {
// 1. احصل على العقدة الإقليمية الرابعة
var dig_1node = document.getElementById ("div_1") ؛
// 2. احصل على عقدة المنطقة الأولى
var dig_4node = document.getElementById ("div_4") ؛
// 3. احصل على عقدة جديدة عبر العقدة الرابعة من الاستنساخ
var newnode = div
// 4. استبدل العقدة الجديدة للخطوة 3 لإزالة العقدة الأولى الأصلية
ديف
}
</script>
</head>
<body>
<div id = "div_1"> </viv>
<div id = "div_2"> هذه هي المنطقة الثانية </div>
<div id = "div_3"> هذا هو المجال الثالث </div>
<div id = "div_4"> هذه هي المنطقة الرابعة </div>
<hr />
<font size = "12px"> زيادة: </font>
<type type = "button" value = "إضافة نص إلى المنطقة الأولى" onClick = "addText ()" />
<type type = "button" value = "إضافة زر إلى المنطقة الأولى" onClick = "addButton ()" />
<hr />
<font size = "12px"> حذف: </font>
<type type = "button" value = "حذف محتوى النص في المنطقة الثانية" onClight = "DELETETEXT ('div_2')" /> />
<type type = "button" value = "حذف المنطقة الثانية" onClick = "deleteElement ()" />
<hr />
<font size = "12px"> تغيير: </font>
<type type = "button" value = "تعديل المحتوى في المنطقة الثالثة" onClick = "updateText ()" /> />
<hr />
<font size = "12px"> الاستنساخ: </font>
<type type = "button" value = "استنساخ المنطقة الرابعة إلى المنطقة الأولى" onClick = "copynode ()" /> />
</body>
</html>