عندما يقوم المتصفح بتحميل الصفحة ، فإنه “يقرأ” (كلمة أخرى: "يحلل ") HTML ويولد كائنات DOM منه. بالنسبة لعقد العناصر ، تصبح معظم سمات HTML القياسية تلقائيًا خصائص لكائنات DOM.
على سبيل المثال ، إذا كانت العلامة <body id =" page "> ، فإن كائن DOM يحتوي على body.id =" page ".
لكن تعيين خاصية السمة ليس واحد لواحد! في هذا الفصل ، سننتبه لفصل هذين المفهومين ، لمعرفة كيفية العمل معهم ، ومتى يكونان متماثلين ، ومتى يكونا مختلفين.
خصائص DOM
لقد رأينا بالفعل خصائص DOM مضمنة. هناك الكثير. ولكن من الناحية الفنية ، لا أحد يحدنا ، وإذا لم يكن هناك ما يكفي ، فيمكننا إضافة الخاصة بنا.
عقد DOM هي كائنات JavaScript عادية. يمكننا تغييرها.
على سبيل المثال ، فلننشئ خاصية جديدة في document.body:
document.body.myData = {
name: 'Caesar',
title: 'Imperator',
};
alert(document.body.myData.title); // Imperatorكما يمكننا إضافة طريقة أو دالة أيضا:
document.body.sayTagName = function () {
alert(this.tagName);
};
document.body.sayTagName(); // BODY (the value of "this" in the method is document.body)يمكننا أيضًا تعديل النماذج الأولية المضمنة مثل Element.prototype وإضافة طرق جديدة لجميع العناصر:
Element.prototype.sayHi = function () {
alert(`Hello, I'm ${this.tagName}`);
};
document.documentElement.sayHi(); // Hello, I'm HTML
document.body.sayHi(); // Hello, I'm BODYلذا ، تتصرف خصائص وأساليب DOM تمامًا مثل تلك الخاصة بكائنات JavaScript العادية:
- يمكن أن يكون لها أي قيمة.
- أنها حساسة لحالة الأحرف (اكتب
elem.nodeType، وليسelem.NoDeTyPe).
سمات HTML
في HTML ، قد تحتوي العلامات على سمات. عندما يقوم المتصفح بتحليل HTML لإنشاء كائنات DOM للعلامات ، فإنه يتعرف على السمات _ القياسية _ وينشئ خصائص DOM منها.
لذلك ، عندما يكون للعنصر id أو سمة _ standard _ أخرى ، يتم إنشاء الخاصية المقابلة. ولكن هذا لا يحدث إذا كانت السمة غير قياسية.
على سبيل المثال:
<body id="test" something="non-standard">
<script>
alert(document.body.id); // test
// non-standard attribute does not yield a property
alert(document.body.something); // undefined
</script>
</body>يرجى ملاحظة أن السمة القياسية لعنصر واحد يمكن أن تكون غير معروفة لعنصر آخر. على سبيل المثال ، “” النوع “” قياسي لـ "([HTMLInputElement] (https://html.spec.whatwg.org/#htmlinputelement)) ، ولكن ليس لـ "<body> ([HTMLBodyElement] (https://html.spec.whatwg.org/#htmlbodyelement)). يتم وصف السمات القياسية في مواصفات فئة العنصر المقابلة.
هنا نراه:
<body id="body" type="...">
<input id="input" type="text" />
<script>
alert(input.type); // text
alert(body.type); // undefined: DOM property not created, because it's non-standard
</script>
</body>لذا ، إذا كانت السمة غير قياسية ، فلن تكون هناك خاصية DOM لها. هل هناك طريقة للوصول إلى هذه السمات؟
أكيد. يمكن الوصول إلى جميع السمات باستخدام الطرق التالية:
elem.hasAttribute (name)– التحقق من الوجود.elem.getAttribute (name)– يحصل على القيمة.elem.setAttribute (name، value)– يحدد القيمة.elem.removeAttribute (name)– يزيل السمة.
تعمل هذه الطرق تمامًا مع ما هو مكتوب بلغة HTML.
يمكن للمرء أيضًا قراءة جميع السمات باستخدام elem.attributes: مجموعة من الكائنات التي تنتمي إلى فئة [Attr] (https://dom.spec.whatwg.org/#attr) المضمنة ، معname و خصائص القيمة.
إليك عرض توضيحي لقراءة خاصية غير قياسية:
<body something="non-standard">
<script>
alert(document.body.getAttribute('something')); // non-standard
</script>
</body>سمات HTML لها الميزات التالية:
- اسمها غير حساس لحالة الأحرف (
معرفهو نفسه" معرف "). - قيمهم دائمًا سلاسل.
إليك عرض توضيحي موسع للعمل مع السمات:
<body>
<div id="elem" about="Elephant"></div>
<script>
alert(elem.getAttribute('About')); // (1) 'Elephant', reading
elem.setAttribute('Test', 123); // (2), writing
alert(elem.outerHTML); // (3), see if the attribute is in HTML (yes)
for (let attr of elem.attributes) {
// (4) list all
alert(`${attr.name} = ${attr.value}`);
}
</script>
</body>يرجى الملاحظة:
getAttribute ('About')– الحرف الأول كبير هنا ، وفي HTML كل الأحرف صغيرة. ولكن هذا لا يهم: أسماء السمات غير حساسة لحالة الأحرف.- يمكننا تعيين أي شيء لسمة ما ، لكنها تصبح سلسلة. إذن لدينا هنا “123” كقيمة.
- جميع السمات بما في ذلك السمات التي حددناها مرئية في “outerHTML”.
- مجموعة “السمات” قابلة للتكرار وتحتوي على جميع سمات العنصر (قياسي وغير قياسي) ككائنات لها خصائص “الاسم” و “القيمة”.
مزامنة خاصية الخاصية
عندما تتغير سمة قياسية ، يتم تحديث الخاصية المقابلة تلقائيًا ، والعكس صحيح (مع بعض الاستثناءات).
في المثال أدناه تم تعديل id كخاصية ، ويمكننا أن نرى تغيير الخاصية أيضًا. ثم نفس الشيء إلى الوراء:
<input />
<script>
let input = document.querySelector('input');
// attribute => property
input.setAttribute('id', 'id');
alert(input.id); // id (updated)
// property => attribute
input.id = 'newId';
alert(input.getAttribute('id')); // newId (updated)
</script>ولكن هناك استثناءات ، على سبيل المثال ، تتم مزامنة input.value فقط من السمة → إلى الخاصية ، ولكن ليس مرة أخرى:
<input />
<script>
let input = document.querySelector('input');
// attribute => property
input.setAttribute('value', 'text');
alert(input.value); // text
// NOT property => attribute
input.value = 'newValue';
alert(input.getAttribute('value')); // text (not updated!)
</script>في المثال أعلاه:
- يؤدي تغيير السمة
القيمةإلى تحديث العقار. - لكن تغيير الخاصية لا يؤثر على السمة.
قد تكون هذه “الميزة” مفيدة حقًا ، لأن إجراءات المستخدم قد تؤدي إلى تغييرات القيمة ، وبعدها ، إذا أردنا استعادة القيمة" الأصلية "من HTML ، فهي في السمة.
خصائص DOM مكتوبة
خصائص DOM ليست دائمًا سلاسل. على سبيل المثال ، تعد الخاصية input.checked (لمربعات الاختيار) منطقيةBoolean:
<input id="input" type="checkbox" checked /> checkbox
<script>
alert(input.getAttribute('checked')); // the attribute value is: empty string
alert(input.checked); // the property value is: true
</script>هناك أمثلة أخرى. سمة style عبارة عن سلسلة ، لكن خاصيةstyle كائن Object:
<div id="div" style="color:red;font-size:120%">Hello</div>
<script>
// string
alert(div.getAttribute('style')); // color:red;font-size:120%
// object
alert(div.style); // [object CSSStyleDeclaration]
alert(div.style.color); // red
</script>معظم الخصائص عبارة عن سلاسل.
نادرًا جدًا ، حتى إذا كان نوع خاصية DOM عبارة عن سلسلة ، فقد يختلف عن السمة. على سبيل المثال ، تكون خاصية href DOM دائمًا عنوان URL _ كامل _ ، حتى إذا كانت السمة تحتوي على عنوان URL نسبي أو فقط` # علامة تجزئة '.
إليك مثال:
<a id="a" href="#hello">link</a>
<script>
// attribute
alert(a.getAttribute('href')); // #hello
// property
alert(a.href); // full URL in the form http://site.com/page#hello
</script>إذا كنا بحاجة إلى قيمة href أو أي سمة أخرى كما هو مكتوب تمامًا في HTML ، فيمكننا استخدامgetAttribute.
سمات غير قياسية ، مجموعة البيانات
عند كتابة HTML ، نستخدم الكثير من السمات القياسية. ولكن ماذا عن تلك المخصصة وغير القياسية؟ أولاً ، دعنا نرى ما إذا كانت مفيدة أم لا؟ لماذا؟
في بعض الأحيان يتم استخدام السمات غير القياسية لتمرير البيانات المخصصة من HTML إلى JavaScript ، أو “وضع علامة” على عناصر HTML لـ JavaScript.
مثله:
<!-- mark the div to show "name" here -->
<div show-info="name"></div>
<!-- and age here -->
<div show-info="age"></div>
<script>
// the code finds an element with the mark and shows what's requested
let user = {
name: "Pete",
age: 25
};
for(let div of document.querySelectorAll('[show-info]')) {
// insert the corresponding info into the field
let field = div.getAttribute('show-info');
div.innerHTML = user[field]; // first Pete into "name", then 25 into "age"
}
</script>كما يمكن استخدامها لتصميم نمط عنصر.
على سبيل المثال ، بالنسبة لحالة الطلب ، يتم استخدام السمة order-state:
<style>
/* styles rely on the custom attribute "order-state" */
.order[order-state='new'] {
color: green;
}
.order[order-state='pending'] {
color: blue;
}
.order[order-state='canceled'] {
color: red;
}
</style>
<div class="order" order-state="new">A new order.</div>
<div class="order" order-state="pending">A pending order.</div>
<div class="order" order-state="canceled">A canceled order.</div>Why would using an attribute be preferable to having classes like .order-state-new, .order-state-pending, .order-state-canceled?
لأن السمة أكثر ملاءمة للإدارة. يمكن تغيير الحالة بالسهولة التالية:
// a bit simpler than removing old/adding a new class
div.setAttribute('order-state', 'canceled');ولكن قد تكون هناك مشكلة محتملة في السمات المخصصة. ماذا لو استخدمنا سمة غير قياسية لأغراضنا وبعد ذلك قدمها المعيار وجعلته يفعل شيئًا؟ لغة HTML حية ، وتنمو ، وتظهر سمات أكثر تناسب احتياجات المطورين. قد تكون هناك آثار غير متوقعة في مثل هذه الحالة.
لتجنب التعارضات ، توجد سمات [data- ] (https://html.spec.whatwg.org/#embedding-custom-non-visible-data-with-the-data--attributes).
** جميع السمات التي تبدأ بـ “البيانات” محجوزة لاستخدام المبرمجين. وهي متوفرة في خاصية “مجموعة البيانات”. **
على سبيل المثال ، إذا كان elem له سمة تسمى" “data-about” ، فإنه متاح باسم elem.dataset.about`.
مثله:
<body data-about="Elephants">
<script>
alert(document.body.dataset.about); // Elephants
</script>
</body>تصبح السمات المتعددة الكلمات مثل حالة البيانات- الحالة مغطاةً بجمال:` مجموعة البيانات.
في ما يلي مثال على “حالة الطلب” "order state " معاد كتابته:
<style>
.order[data-order-state='new'] {
color: green;
}
.order[data-order-state='pending'] {
color: blue;
}
.order[data-order-state='canceled'] {
color: red;
}
</style>
<div id="order" class="order" data-order-state="new">A new order.</div>
<script>
// read
alert(order.dataset.orderState); // new
// modify
order.dataset.orderState = 'pending'; // (*)
</script>يعد استخدام سمات البيانات * طريقة صالحة وآمنة لتمرير البيانات المخصصة.
يرجى ملاحظة أنه لا يمكننا فقط قراءة سمات البيانات ، ولكن أيضًا تعديلها. ثم يقوم CSS بتحديث العرض وفقًا لذلك: في المثال أعلاه السطر الأخير (*) يغير اللون إلى الأزرق.
ملخص
- السمات – هو ما يكتب في HTML.
- الخصائص – ما يوجد في كائنات DOM.
مقارنة صغيرة:
| | خصائص | سمات | | ----- | ---------------------------------------------------------- | --------------------------- | --------- | | النوع | أي قيمة ، تحتوي الخصائص القياسية على أنواع موصوفة في سلسلة | A | المواصفات | | الاسم | الاسم حساس لحالة الأحرف | الاسم غير حساس لحالة الأحرف |
طرق العمل مع السمات هي:
elem.hasAttribute (name)– للتحقق من وجودها.elem.getAttribute (name)– للحصول على القيمة.elem.setAttribute (name، value)– لتعيين القيمة.elem.removeAttribute (name)– لإزالة السمة.elem.attributesعبارة عن مجموعة من جميع السمات.
بالنسبة لمعظم المواقف ، يفضل استخدام خصائص DOM. يجب أن نشير إلى السمات فقط عندما لا تناسبنا خصائص DOM ، عندما نحتاج إلى سمات بالضبط ، على سبيل المثال:
- نحتاج إلى سمة غير قياسية. ولكن إذا بدأت بـ “البيانات” ، فيجب أن نستخدم “مجموعة البيانات”.
- نريد قراءة القيمة “كما هو مكتوب” في HTML. قد تكون قيمة خاصية DOM مختلفة ، على سبيل المثال ، خاصية
hrefهي دائمًا عنوان URL كامل ، وقد نرغب في الحصول على القيمة" الأصلية ".