بعد فهم الأطر وعقد DOM (نموذج كائن النص) ، فإن الشيء الأكثر أهمية هو استخدام هذه العقد لمعالجة صفحات الويب HTML
بالنسبة لعقدة DOM ، هناك سلسلة من الخصائص والأساليب للاستخدام. شائعة الاستخدام هي الجدول التالي.
تحسين: http://www.w3school.com.cn/xmldom/dom_element.asp
1. العقد الوصول
يوفر BOM بعض الطرق الحدودية للوصول إلى العقد. شائع الاستخدام هي getElementsByTagname () و getElementById ()
نسخة الكود كما يلي:
<script type = "text/javaScript">
وظيفة SearchDom () {
var oli = document.getElementSbyTagName ("li") ؛
var j = oli.length ؛
var J2 = Oli [5] .Tagname ؛
var J3 = Oli [0] .ChildNodes [0] .NodeValue ؛
document.write (j+"<br>"+j2+"<br>"+j3+"<br>") ؛
}
</script>
<body>
<body onload = "searchdom ()">
<div id- "in"> </viv>
<ul> لغة العميل
<li> html </li>
<li> JavaScript </li>
<li> CSS </li>
</ul>
<ul> لغة جانب الخادم
<li> asp.net </li>
<li> JSP </li>
<li> php </li>
</ul>
</body>
document.getElementById ()
نسخة الكود كما يلي:
<script type = "text/javaScript">
window.onload = function () {
وظيفة findid () {
var J4 = Oli2.Tagname ؛
document.write (j4) ؛
}
var Oli2 = document.getElementById ("inn") ؛
oli2.onclick = findid ؛
}
</script>
<li id = "inn"> php </li>
نسخة الكود كما يلي:
<html>
<body id = "myid">
<viv> </viv>
<script type = "text/javaScript">
x = document.getElementSbyTagName ('div') [0] ؛
document.write ("Div CSS Class:" + X.ClassName) ؛
document.write ("<br />") ؛
document.write ("طريقة بديلة:") ؛
document.write (document.getElementById ('myid'). className) ؛
</script>
</body>
</html>
// معرف الحصول على className
2. اكتشف نوع العقدة
يمكن اكتشاف نوع العقدة من خلال النموذج العقيد للعقدة ، ويعيد معلمة واحدة 12 قيمًا صحيحًا.
تنسيق التعبير مثل document.nodeType
ما هو مفيد حقًا هو الأنواع الثلاثة التي ذكرتها العقد النموذجية في نموذج DOM (I)
العقد العناصر والعقد النصية وعقد السمة
1. عقدة العنصر تُرجع قيمة عقدة العنصر هي 1
2. عقدة السمة إرجاع قيمة عقدة السمة 2
3. قيمة إرجاع العقدة النصية 3
نسخة الكود كما يلي:
<script type = "text/javaScript">
window.onload = function () {
وظيفة findid () {
var J5 = OLI2.NODETYPE ؛
document.write ("nodetype:" + j5 + "<br>") ؛
}
var Oli2 = document.getElementById ("inn") ؛
oli2.onclick = findid ؛
}
</script>
<li id = "inn"> css </li>
العودة: nodetype: 1
هذا يعني أنه يمكن معالجة بعض العقدة بشكل منفصل ، وهو أمر عملي للغاية عند البحث عن العقد. سيتم مناقشته لاحقًا.
3. استخدم علاقة الأب والابن للعثور على العقد
في عقدة الوصول إلى القسم الأول ، استخدم سمة childnodes للعقدة للوصول إلى عقدة النص الموجودة في عقدة العنصر.
يستخدم هذا القسم علاقة الأب والابن من العقد للعثور على العقد
*استخدم سمات Haschildnodes و childnodes للحصول على جميع العقد الواردة في هذه العقدة
نسخة الكود كما يلي:
<head>
<title> childnodes </title>
<script language = "javaScript">
window.onload = function mydomispector () {
var oul = document.getElementById ("MyList") ؛ // احصل على علامة <ul>
var domstring = "" ؛
إذا (oul.haschildnodes ()) {// upply ما إذا كانت هناك عقد طفل
var och = oul.childnodes ؛
لـ (var i = 0 ؛ i <och.length ؛ i ++) // ابحث واحدًا تلو الآخر
domstring + = och [i] .nodename + "<br>" ؛
}
document.write (domstring) ؛
}
</script>
</head>
<body>
<ul id = "MyList">
<li> الأضلاع الحلوة والحامضة </li>
<li> القفص على البخار لحم الخنزير </li>
<li> كيمتشي أسماك </li>
<li> الكستناء الدجاج المشوي </li>
<li> Mapo Tofu </li>
</ul>
</body>
4. الحصول على العقدة الأصل للعقدة
نسخة الكود كما يلي:
<script language = "javaScript">
window.onload = function () {
var food = document.getElementById ("mydarfood") ؛
document.write (food.parentnode.tagname)
}
</script>
</head>
<body>
<ul>
<li> الأضلاع الحلوة والحامضة </li>
<li> القفص على البخار لحم الخنزير </li>
<li> كيمتشي أسماك </li>
<li id = "mydearfood"> Chestnut Roast Chicken </li>
<li> Mapo Tofu </li>
</ul>
// العودة إلى UL
باستخدام العقدة الأصل ، تم الحصول على العقدة الأصل للعقدة المحددة بنجاح
5. استخدم خاصية ParentNode
نسخة الكود كما يلي:
<head>
<title> childnodes </title>
<script language = "javaScript">
window.onload = function () {
var food = document.getElementById ("mydarfood") ؛
var parentelm = food.parentNode ؛
في حين
parentelm = parentelm.parentNode ؛ // ابحث على طول الطريق
document.write ("tagename:"+parentelm.tagname+"<br>") ؛
document.write ("claaname:"+parentelm.ClassName+"<br>") ؛
document.write ("typeof:"+typeof (food)+"<br>") ؛
}
</script>
</head>
<body>
<viv>
<ul>
<span>
<li> الأضلاع الحلوة والحامضة </li>
<li> القفص على البخار لحم الخنزير </li>
<li> كيمتشي أسماك </li>
<li id = "mydearfood"> Chestnut Roast Chicken </li>
<li> Mapo Tofu </li>
</span>
</ul>
</div>
</body> <br> // الإخراج <br> // tagename: div <br> claaname: colorful <br> typeof: object
ابدأ بعقدة طفل وابحث عن العقدة الأصل لأعلى حتى يصبح اسم فئة العقدة "ملونًا"
6. جماعة الإخوان المسلمين
نسخة الكود كما يلي:
<head>
<title> childnodes </title>
<script language = "javaScript">
window.onload = function () {
var foods = document.getElementById ("mydarfood") ؛
var nextf = foods.nextsibling ؛
ALERT ("nextsibling:" +nextf.tagname +"<br>") ؛
}
</script>
</head>
<body>
<viv>
<ul>
<span>
<li> الأضلاع الحلوة والحامضة </li>
<li> القفص على البخار لحم الخنزير </li>
<li> كيمتشي أسماك </li>
<li id = "mydearfood"> Chestnut Roast Chicken </li>
<li> Mapo Tofu </li>
<li> Mapo Tofu </li>
<li> Mapo Tofu </li>
</span>
</ul>
</div>
</body>
يبدو من الرائع الوصول إلى العقد الشقيق باستخدام خصائص Nextsibling و Previvibling.
لكنه يعمل فقط لمتصفح IE
من أجل الحصول على توافق جيد مع الكود ، يجب استخدام nodetype لإصدار الحكم
ما يلي هو التوافق:
نسخة الكود كما يلي:
<head>
<title> الأشقاء </title>
<script language = "javaScript">
وظيفة nextsib (العقدة) {
var templast = node.parentnode.lastchild ؛
// احكم على ما إذا كانت هذه هي العقدة الأخيرة ، إذا كان الأمر كذلك ، ارجع خالية
إذا (العقدة == templast)
العودة لاغية.
var tempobj = node.nextsibling ؛
// ابحث عن العقد اللاحقة في العقد واحدة تلو الأخرى حتى يتم العثور على عقدة العنصر
بينما (tempobj.nodeType! = 1 && tempobj.nextsibling! = null)
tempobj = tempobj.nextsibling ؛
// مشغل من ثلاث نقاط ، إذا كانت عقدة عنصر ، فإنها تُرجع العقدة نفسها ، وإلا فإنها تعود فارغة
العودة (tempobj.nodeType == 1)؟ tempobj: null ؛
}
وظيفة Prevsib (العقدة) {
var tempfirst = node.parentnode.firstchild ؛
// احكم على ما إذا كانت هذه هي العقدة الأولى ، إذا كان الأمر كذلك ، ارجع خالية
إذا (العقدة == tempfirst)
العودة لاغية.
var tempobj = node.previoussibling ؛
// ابحث عن العقد السابقة في العقد واحدة تلو الأخرى حتى يتم العثور على عقدة العنصر
بينما (tempobj.nodeType! = 1 && tempobj.previoussibling! = null)
tempobj = tempobj.previoussibling ؛
العودة (tempobj.nodeType == 1)؟ tempobj: null ؛
}
وظيفة mydomispector () {
var myitem = document.getElementById ("myDearfood") ؛
// احصل على العنصر التالي العقدة Brother
var nextListItem = nextsib (myitem) ؛
// احصل على عقدة Brother Element السابقة
var prelistitem = prevsib (myitem) ؛
ALERT ("العنصر الأخير:" + ((nextListItem! = null)؟ nextListItem.Firstchild.nodevalue: null) + "prelistitem:" + ((prelistitem! = null)؟ prelistitem.firstchild.nodevalue: null)) ؛
}
</script>
</head>
<body onload = "mydomispector ()">
<ul>
<li> الأضلاع الحلوة والحامضة </li>
<li> القفص على البخار لحم الخنزير </li>
<li> كيمتشي أسماك </li>
<li id = "mydearfood"> Chestnut Roast Chicken </li>
<li> Mapo Tofu </li>
</ul>
</body>
7. تعيين خصائص العقدة
نسخة الكود كما يلي:
<head>
<title> childnodes </title>
<script language = "javaScript">
window.onload = function () {
// احصل على الصور
var imgdatabe = document.getElementSbyTagName ("img") [0] ؛
// احصل على سمة العنوان للصورة
imgdatabe.setattribute ("SRC" ، "02.gif") ؛
imgdatabe.setattribute ("title" ، "friendly slope") ؛
document.write (imgdatabe.getAttribute ("title")) ؛
document.write (imgdatabe.getattribute ("alt")) ؛
document.write (imgdatabe.getAttribute ("node-data")) ؛
document.write (imgdatabe.getAttribute ("node_data")) ؛
}
</script>
</head>
<body>
<viv>
<img src = "01.jpg" node-data = "222" node_data = "3333">
<img src = "01.jpg">
</body>
استخدم طريقة setAttribute () لتعيين سمات العقدة
نسخة الكود كما يلي:
<head>
<title> childnodes </title>
<meta charset = "utf-8" />
<script language = "javaScript">
window.onload = function () {
var bkk = document.getElementById ("new5") ؛
var clickbk = document.getElementById ("Qiehuan") ؛
clickbk.onclick = dsqiehuan ؛
وظيفة dsqiehuan () {
bkk.setattribute ("class" ، "xxx")
}
}
</script>
<style>
.xxx {color: #DDD}
</style>
</head>
<body>
<div id = "new5">
555
</div>
<em id = "qiehuan"> Switch </em>
</body>
8.CreateElement () إنشاء عقدة
نسخة الكود كما يلي:
<head>
<title> childnodes </title>
<meta charset = "utf-8" />
<script language = "javaScript">
window.onload = function () {
var op = document.createElement ("p") ؛
var otext = document.createTextNode ("إنشاء عقدة باستخدام DOM") ؛
var otext1 = document.createTextNode ("إنشاء العقدة 123 باستخدام DOM") ؛
op.appendchild (otext) ؛
op.appendchild (Otext1) ؛
document.body.appendChild (OP) ؛
}
</script>
</head>
<body>
<p> كان هناك في الأصل p هنا ، اختبار createElement () </p>
</body>
9. RemoveChild يزيل العقدة
نسخة الكود كما يلي:
<head>
<title> childnodes </title>
<meta charset = "utf-8" />
<script language = "javaScript">
window.onload = function () {
var op = document.getElementSbyTagName ("p") [0] ؛
op.parentnode.removechild (OP) ؛ // النهاية هو .removechild (OP) ، وليس .removechild ("OP")
}
</script>
</head>
<body>
<p> كان هناك في الأصل p هنا ، اختبار createElement () </p>
</body>
10.InsertBefore () أدخل العقدة قبل عقدة معينة
نسخة الكود كما يلي:
<head>
<title> childnodes </title>
<meta charset = "utf-8" />
<script language = "javaScript">
window.onload = function () {
var opold = document.getElementSbyTagName ("p") [0] ؛
var opnew = document.createElement ("p") ؛
var otext = document.createTextNode ("New Node")
opnew.appendchild (otext) ؛
opold.parentnode.insertbefore (Opnew ، Opold) ؛ // تلقي معلمتين ، والآخر هو المعلمة الجديدة والآخر هو المعلمة العقدة القديمة
}
</script>
</head>
<body>
<p> كان هناك في الأصل p </p>
</body>
11. أدخل عناصر جديدة بعد عقدة محددة (تمت إضافة 9 يناير 2015)
لا يمكن للطرق التي توفرها DOM إضافة عناصر جديدة إلا قبل العنصر الهدف باستخدام insertbefore () ، أو استخدام طريقة AppendChild () لإضافة عناصر جديدة في نهاية الأطفال للعنصر الأصل (مثال: العنوان).
في الممارسة العملية ، غالبًا ما يتم استخدامه لإضافة عناصر جديدة في نهاية عنصر معين. لا تحتوي طريقة DOM على طريقة insertbefore () ، ولكن يمكن استخدام استخدام المعرفة الحالية للكتابة.
فكرة الكود كما يلي
نسخة الكود كما يلي:
وظيفة insertafter (newelement ، الهدف) {
var Outdoor = targetElement.ParentNode ؛ // ابحث عن العنصر الأصل للعنصر المستهدف
إذا (adarent.lastchild == الهدف) // إذا كان الهدف هو العنصر الأخير
Outdoor.AppendChild (NewElement) ؛ // أضف مباشرة إلى العنصر الأخير
آخر // قبل إدخال عقدة العنصر الأصل للعنصر التالي
Outdoor.insertbefore (newelement ، target.nextsibling)
مثال: (إلحاق خارج العنصر) المثيل الأصلي: العنوان
نسخة الكود كما يلي:
<head>
<meta charset = "utf-8">
<title> </title>
</head>
<body onload = "interp ()">
<p> الأول </p>
<p id = "target"> الثانية </p>
<script type = "text/javaScript">
وظيفة insertafter (newelement ، الهدف) {
var Outdoor = targetElement.ParentNode ؛ // ابحث عن العنصر الأصل للعنصر المستهدف
إذا (adarent.lastchild == الهدف) // إذا كان الهدف هو العنصر الأخير
Outdoor.AppendChild (NewElement) ؛ // أضف مباشرة إلى العنصر الأخير
آخر // قبل إدخال عقدة العنصر الأصل للعنصر التالي
Outdoor.insertbefore (newelement ، target.nextsibling)
}
وظيفة interp () {
var oooparent = document.getElementById ("Target") ؛
var ooonewp = document.createElement ("a") ؛
Oonewp.setAttribute ("HREF" ، "http://www.qq.com") ؛
var ootextp = document.createTextNode ("link") ؛
OONEWP.AppendChild (OOETEXTP) ؛
insertafter (ooonewp ، oooparent) ؛
}
</script>
</body>
مثال: تمت إضافته في العنصر
12. أضف تجزئة المستندات لتحسين كفاءة التنفيذ
نسخة الكود كما يلي:
<head>
<title> childnodes </title>
<meta charset = "utf-8" />
<script language = "javaScript">
window.onload = function () {
var opold = document.getElementSbyTagName ("p") [0] ؛
var ancolors = ["Red" ، "Green" ، "Blue" ، "Magenta" ، "Yellow" ، "Chocolate" ، "Black" ، "Aquamarine" ، "Lime" ، البرونز "،" deeppink "،" aliceblue "،" Gray "،" Copper "،" Coral "،" Feldspar "،" Orange "،" Orchid "،" Pink "،" Plum "،" Quartz "،" Purple "؛
var ofragment = document.createdocumentFragment () ؛ // إنشاء تجزئة المستند
لـ (var i = 0 ؛ i <acolors.length ؛ i ++) {
var op = document.createElement ("p") ؛
var otext = document.createTextNode (Acolors [i]) ؛
op.appendchild (otext) ؛
ofragment.AppendChild (OP) ؛ // إضافة عقد إلى أجزاء أولاً
}
//document.body.appendchild(ofragment) ؛ // أضيفت إلى الصفحة أخيرًا
opold.parentnode.insertbefore (ofragment ، opold) ؛ // مع إدراجها لإضافة شظايا المستند إلى العقدة
}
</script>
</head>
<body>
<p> كان هناك في الأصل p </p>
</body>