مقدمة إلى DOM في JavaScript مع شرح تفصيلي للخصائص والطرق للعناصر

في HTML DOM (نموذج مستند الويب)، كل جزء هو عقدة.

العقدة هي وحدة الأساس في بنية DOM، كل علامة HTML هي عقدة في بنية DOM.

المستند هو عقدة مستند.

كل عناصر HTML هي عقدة عنصر.

كل خصائص HTML هي عقدة الخاصية.

يتم إدراج النص في عناصر HTML كعقدة نصية.

التعليقات هي عقدة التعليق.

أبسط نوع من العقد هو نوع Node، وكل أنواع العقد الأخرى تورث من Node، عادةً ما تكون عمليات DOM هي أكثر جزءًا مكلفًا في JavaScript، لذا تسبب NodeList مشاكل كثيرة. يجب الانتباه: NodeList هو 'ديناميكي'، مما يعني أن كل مرة يتم فيها زيارة كائن NodeList، يتم تشغيل استعلام مرة واحدة، على الرغم من أن هذا يزيد من التكلفة، إلا أن ذلك يضمن أن تكون العقد التي تم إضافتها مؤخرًا قابلة للوصول إليها في NodeList.

جميع عناصر الصفحة لديها خصائص ومETHODS مشتركة، دعونا ننظر في ذلك بشكل مفصل:

هيا بنا نبدأ ببعض الخاصيات الشائعة

1 element.id 设置或返回元素的 id。

2 element.innerHTML 设置或者返回元素的内容，可包含节点中的子标签以及内容

3 element.innerText 设置或者返回元素的内容，不包含节点中的子标签以及内容

4 element.className 设置或者返回元素的类名

5 element.nodeName 返回该节点的大写字母标签名

6 element.nodeType 返回该结点的节点类型，1表示元素节点 2表示属性节点……

7 element.nodeValue 返回该节点的value值，元素节点的该值为null

8 element.childNodes 返回元素的子节点的nodeslist对象，nodelist类似于数组，有length属性，可以使用方括号 [index] 访问指定索引的值(也可以使用item(index)方法)。但nodelist并不是数组。

9 element.firstChild/element.lastChild 返回元素的第一个/最后一个子节点(包含注释节点和文本节点)

10 element.parentNode 返回该结点的父节点

11 element.previousSibling 返回与当前节点同级的上一个节点(包含注释节点和文本节点)

12 element.nextSibling 返回与当前节点同级的下一个节点(包含注释节点和文本节点)

13 element.chileElementCount : 返回子元素(不包括文本节点以及注释节点)的个数

14 element.firstElementChild /lastElementChild 返回第一个/最后一个子元素(不包括文本节点以及注释节点)

15 element.previousElementSibling/nextElementSibling 返回前一个/后一个兄弟元素(不包括文本节点以及注释节点)

16 - علامة العنصر.clientHeight/clientWidth تعود إلى الارتفاع/العرض القابل للعرض للنص (بما في ذلك الحواف، والهوامش أو علامات التدقيق)

17 - علامة العنصر.offsetHeight/offsetWidth /offsetLeft/offset/Top تعود إلى الارتفاع/العرض/التباين مع الأب (بما في ذلك الحواف والملء، وليس الهوامش)

18 - علامة العنصر.style لتعيين أو العودة إلى خصائص النمط العنصر،. مثال: علامة العنصر.style.backgroundColor. ملاحظة، يختلف عن CSS، يجب إزالة الشرطة من خصائص style، والكلمة الثانية يجب أن تبدأ بحرف كبير

19 - علامة العنصر.tagName تعود باسم العنصر (بأحرف كبيرة)

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
  <style>
    .form_style{
      color: #5b5b5b;
      font-size: large;
      border: 5px solid rebeccapurple;
      background-color: antiquewhite;
      width: 440px;
      height: 120px;
      position: relative;
      left: 20px;
      top:20px;
      margin:10px;
    }
    p {
      color: #5b5b5b;
      font-size: larger;
      text-indent: 40px;
    }
  </style>
</head>
<body>
  <form id='first_form' class="form_style" name="cangjingge">
    اختر طريقة：<br/>
    <input type="radio" name="gongfa" value="jysg">أعظم كيد الصباحية<br/>
    <input type="radio" name="gongfa" value="qkdny">نقل الظفر الكبير في الكون<br/>
    <input type="radio" name="gongfa" value="khbd">كتاب بابونج العظيم<br/>
    <input type="radio" name="gongfa" value="xxdf">فن استخراج النجوم<br/>
  </form>
  <p>السيد الشجاع، يرجى التفكير ثلاث مرات！！！</p><!--تسمية وثيقة-->
  <p>الطريقة الموصى بها-->كتاب بؤسى البابونج</p>
  <script>
    //أضف كود العرض JavaScript هنا
    var a=document.getElementById('first_form'),
      b = document.getElementsByTagName('p')[0];
    console.log(a.id);
    console.log(a.innerHTML);
    console.log(a.className);
    console.log(a.childNodes);
    console.log(a.firstChild);
    console.log(a.lastChild);
    console.log(a.nodeName);
    console.log(a.nodeType);
    console.log(a.nodeValue);
    console.log(a.parentNode);
    console.log(a.clientHeight);
    console.log(a.offsetHeight);
    console.log(b.nextSibling);
    console.log(b.nextElementSibling);
  </script>
</body>
</html>

نتيجة عرض المتصفح:

هناك خصائص خاصة أخرى

الخصائص الخاصة تشير إلى خصائص مخصصة لعدة علامات. على سبيل المثال، <a> العلامة، لها خصائص href و target. <img> له خصائص src; <form> له خصائص entype وأكشن……

a_element.href عودة رابط العنصر الحالي

لننظر في الطرق العامة الشائعة الآن:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
  <style>
    .form_style{
      color: #5b5b5b;
      font-size: large;
    }
    p {
      color: #5b5b5b;
      font-size: larger;
    }
  </style>
</head>
<body>
  <form id='first_form' class="form_style" name="cangjingge">
    اختر طريقة：<br/>
    <input type="radio" name="gongfa" value="jysg">أعظم كيد الصباحية<br/>
    <input type="radio" name="gongfa" value="qkdny">نقل الظفر الكبير في الكون<br/>
    <input type="radio" name="gongfa" value="khbd">كتاب بابونج العظيم<br/>
    <input type="radio" name="gongfa" value="xxdf">فن استخراج النجوم<br/>
  </form>
  <p>السيد العزيز، فكر مرتين！！！</p>
  <script>
    //أضف كود العرض JavaScript هنا
  </script>
</body>
</html>

(جميع أمثلة التوضيح JavaScript المقدمة هنا هي بمثابة تجربة للـ html المقدم في هذا الوثيقة كعنصر تجربة)

1　 element.appendChild(nodeName)　　 إضافة عقدة جديدة إلى العنصر، كآخر عقدة، وإرجاع هذه العقدة. إذا كنت بحاجة إلى إضافة عنصر جديد إلى DOM HTML، يجب أن تخلق هذا العنصر أولاً، ثم أضفه إلى العنصر الموجود بالفعل.

مثال على رمز الجافا سكريبت:

var a=document.getElementById('first_form');   
var textnode=document.createTextNode("慎重选择");  
a.appendChild(textnode)

2　 element.getAttribute(para)　　 يعود قيمة الخاصية المحددة للعنصر.

مثال على رمز الجافا سكريبت:

var a=document.getElementById('first_form');
console.log(a.getAttribute('name'))      //إخراج إلى الشاشةقيمة name

3　 element.getAttributeNode(para)　　 يعود الخاصية المحددة.

مثال على رمز الجافا سكريبت:

var a=document.getElementById('first_form');
console.log(a.getAttributeNode('name'))      //إخراج إلى الشاشةname الخاصية

4　 element.getElementsByTagName(para) يعود مجموعة من جميع العناصر المزودة بالعلامة المحددة.

مثال على رمز الجافا سكريبت:

var a=document.getElementById('first_form');
console.log(a.getElementsByTagName('input'))      //إخراج إلى الشاشة

5　 element.hasAttribute(para)　 إذا كان العنصر يمتلك الخاصية المحددة، فإنه يعود صحيح، وإلا يعود خطأ.

مثال على رمز الجافا سكريبت:

var a=document.getElementById('first_form');
console.log(a.hasAttribute('name'))      //إخراج إلى الشاشة

6　 element.insertBefore(insertNode,appointedNode)　 إدراج العنصر الجديد قبل العنصر المحدد الموجود بالفعل.

مثال على رمز الجافا سكريبت:

var a=document.getElementById('first_form');
    var inputList=document.getElementsByTagName('input');
    var newNode=document.createElement('input');
    var newNode2=document.createTextNode('天马流星拳');
    var br=document.createElement('br');
    newNode.type='radio';
    newNode.name='gongfa';
    newNode.value='tmlxq';
    a.insertBefore(newNode,inputList[2]);
    a.insertBefore(newNode2,inputList[3]);
    a.insertBefore(br,inputList[3]);

7　 element.removeAttribute(); من إزالة الخاصية المحددة من العنصر.

مثال على كود js:

var a=document.getElementById('first_form');
a.removeAttribute('name');
console.log(a.hasAttribute('name'))

8　 element.removeChild()　　 إزالة العنصر الفعلي من العنصر. العنصر الذي تم إزالته لم يعد في شجرة المستند، لكنه لا يزال في ذاكرة التخزين المؤقت، يمكن استدعاؤه في أي وقت.

مثال على كود js:

var a=document.getElementById('first_form');
    a.removeChild(a.childNodes[3]);

9　 element.replaceChild(newNode,replaceNode)　 استبدال العنصر المحدد بنوع جديد.

10　 element.setAttribute(attrName,attrValue)　 إعداد أو تعديل الخاصية المحددة أو تغييرها إلى القيمة المحددة.

مثال على كود js:

var a=document.getElementById('first_form');
    a.setAttribute('name','shaolinsi');
    console.log(a.name)

11　 element.setAttributeNode()　　　 تعديل العنصر الخاص بالخصائص

مثال على كود js:

var a=document.getElementById('first_form');
    var attr = document.createAttribute('id');
    attr.value='the_first';
    a.setAttributeNode(attr);
　　　　 console.log(a.id)

12　 nodelist.item() يعود إلى العنصر الموجود في NodeList في الموقع المحدد.

مثال على كود js:

var a=document.getElementsByTagName('input')
console.log(a.item(2))

هذا هو محتوى التفصيل الكامل للخصائص والأساليب للعناصر في DOM من js الأساسي الذي قدمته لكم الإداري، آمل أن تكونوا قد دعمتم تعليماتي~

دليل الأساسيات

سيحبك هذا