1.GetElementsByName (): احصل على الاسم.
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ `
مثال:
<p name = "pn"> hello </p> <p name = "pn"> hello </p> <p name = "pn"> hello </p> <script> function getName () {var count = document.getElementSbyName ("pn") ؛ تنبيه (count.length) ؛ var p = count [2] ؛ P.InnerHtml = "World" ؛ } </script>النتائج: تقوم الواجهة بطباعة ثلاثة مرحبًا ، مصحوبة بمربع موجه "3". عند النقر على موافق ، يصبح المحتوى المعروض على الواجهة مرحبًا Hello World
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
2.getElementsByTagName (): احصل على العنصر.
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
مثال
<p> hello </p> <p> hello </p> <p> hello </p> <script> وظيفة getName () {var count = document.getElementsByTagName ("P") ؛ تنبيه (count.length) ؛ var p = count [2] ؛ P.InnerHtml = "World" ؛ } </script>النتائج: تقوم الواجهة بطباعة ثلاثة مرحبًا ، مصحوبة بمربع موجه "3". عند النقر على موافق ، يصبح المحتوى المعروض على الواجهة مرحبًا Hello World
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
3.GetAttribute (): الحصول على سمات العنصر.
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
مثال
<a id = "aid"> </a> <script> function getAttr1 () {var anode = document.getElementById ("Aid") ؛ var attr = anode.getAttribute ("id") ؛ التنبيه ("معرف A هو:"+attr) ؛ } وظيفة getAttr2 () {var anode = document.getElementById ("Aid") ؛ var attr = anode.getAttribute ("title") ؛ التنبيه ("محتوى عنوان A هو:"+attr) ؛ } getAttr1 () ؛ getAttr2 () ؛ </script>النتيجة: مربع المطالبة "معرف A هو: المساعدة". بعد النقر فوق "موافق" ، مربع المطالبة "محتوى عنوان A هو: الحصول على سمة العلامة لـ".
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
4.SetAttribute () تعيين سمات العنصر.
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
مثال
<a id = "aid2"> aid2 </a> <script> function setAttr () {var anode = document.getElementById ("Aid2") ؛ anode.setattribute ("title" ، "الإعداد الديناميكي لسمة العنوان") ؛ var attr = anode.getAttribute ("title") ؛ التنبيه ("الإعداد الديناميكي لقيمة العنوان هو:"+attr) ؛ } setattr () ؛ </script>النتيجة: مربع المطالبة "قيمة عنوان الإعداد الديناميكي هي: تعيين خاصية العنوان ديناميكيًا لـ" المنبثقة ".
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
5.ChildNodes (): الوصول إلى العقد الطفل.
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
مثال
<ul> <li> 1 </li> <li> 2 </li> <li> 3 </li> </ul> <script> وظيفة getChildNode () {var childnode = document.getElementsByTagname ("UL") [0] .ChildNodes ؛ تنبيه (childnode.length) ؛ تنبيه (childnode [0] .nodeType) ؛ } getChildNode () ؛ </script>النتيجة: تقوم الواجهة بطباعة مربع الحوار "3" يظهر على .1.2.3 ، ثم اضغط على موافق لتظهر.
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
6.ParentNode (): الوصول إلى العقدة الأصل.
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
مثال
<div> <p id = "pid"> </p> </viv> <script> وظيفة getParentNode () {var div = document.getElementById ("pid") ؛ ALERT (div.parentnode.nodename) ؛ } getParentNode () ؛ </script>النتيجة: مربع موجه يظهر: Div.
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
7.CreateElement (): إنشاء عقدة عنصر.
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
مثال:
<script> function createNode () {var body = document.body ؛ var input = document.createElement ("input") ؛ input.type = "button" ؛ input.value = "button" ؛ body.appendChild (input) ؛ // insert node} createNode () ؛ </script>النتيجة: يظهر زر.
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
8.CreateTextNode (): إنشاء نود نصي.
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
مثال:
<script> function createNode () {var element = document.createElement ("div") ؛ element.className = "message" ؛ var textNode = document.createTextNode ("Hello World!") ؛ element.appendchild (textNode) ؛ document.body.appendchild (element) ؛ } createNode () ؛ </script>تحليل الرمز: ينشئ هذا المثال عنصرًا جديدًا <Div> ويحدد سمة فئة ذات قيمة "الرسالة". بعد ذلك ، يتم إنشاء عقدة نصية أخرى وإضافتها إلى العنصر الذي تم إنشاؤه مسبقًا. الخطوة الأخيرة هي إضافة هذا العنصر إلى عنصر <Body> في المستند ، بحيث يمكنك رؤية العناصر التي تم إنشاؤها حديثًا وعقد نصية في المتصفح.
النتيجة: تُظهر الصفحة Hello World.
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
9.InserTbefore (): أدخل العقدة.
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
مثال
<div id = "div"> <p id = "pid"> p element </p> </viv> <script> function AddNode () {var div = document.getElementById ("div") ؛ var node = document.getElementById ("pid") ؛ var newNode = document.createElement ("P") ؛ newNode.innerhtml = "الإدراج الديناميكي لعنصر p" ؛ div.insertbefore (newNode ، node) ؛ } addNode () ؛ </script>النتيجة: تطبع الواجهة: إدراج عنصر P ديناميكيًا
عنصر P.
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
10.Removechild (): حذف العقدة.
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
مثال
<div id = "div"> <p id = "pid"> p element </p> </viv> <script> function Removenode () {var div = document.getElementById ("div") ؛ var p = div.removechild (div.childnodes [1]) ؛ } removenode () ؛ </script>النتيجة: الواجهة لا تظهر شيئًا.
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
11.offsetheight: حجم صفحة الويب
12.Scrollheight: حجم صفحة الويب
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
مثال:
<script> وظيفة getTize () {var width = document.documentElement.OffSetWidth || document.body.OffSetWidth ؛ // حل مشكلات التوافق var height = document.documentElement.offSetheight || document.body.OffseTheight ؛ تنبيه (العرض+"،"+الارتفاع) ؛ } getSize () ؛ </script>نتائج إظهار:
تقدم هذه المقالة بشكل أساسي JS DOM للتحكم في عناصر HTML. يتضمن محتوى المقالة بشكل أساسي DOM و HTML ، إلخ. تأتي المقالة من الإنترنت ، يرجى الرجوع إليها.