تعديل الوثيقة

سنرى هنا كيفية إنشاء عناصر جديدة “بسرعة” وتعديل محتوى الصفحة الحالية.

دعونا نتظاهر باستخدام مثال. سنضيف رسالة على الصفحة تبدو أجمل من “تنبيه”.

كان هذا مثال HTML. الآن دعنا ننشئ نفس div باستخدام JavaScript (على افتراض أن الأنماط موجودة في HTML أو ملف CSS خارجي).

إنشاء عنصر

في حالتنا، تكون الرسالة div مع فئة` تنبيه 'و HTML فيها:

إنشاء الرسالة

لقد أنشأنا العنصر ، ولكن حتى الآن إنه متغير فقط. لا يمكننا رؤية العنصر على الصفحة ، لأنه ليس جزءًا من المستند حتى الآن

طرق الإدراج

لعرض “div” ، نحتاج إلى إدراجه في مكان ما في “المستند”. على سبيل المثال ، في document.body. هناك طريقة خاصة append لذلك:document.body.append (div).

توفر هذه المجموعة من الطرق المزيد من الطرق لإدراج:

فيما يلي مثال على استخدام هذه الأساليب لإضافة عناصر إلى قائمة والنص قبلها / بعدها:

يمكن لهذه الطرق إدراج قوائم متعددة للعقد والقطع النصية في مكالمة واحدة.

بمعنى آخر ، يتم إدخال السلاسل بطريقة آمنة ، مثل `` elem.textContent` يفعل ذلك.

لذلك ، لا يمكن استخدام هذه الطرق إلا لإدراج عقد DOM أو أجزاء نصية.

ولكن ماذا لو أردنا إدراج HTML “كـ html” ، مع عمل جميع العلامات والأشياء ، مثل elem.innerHTML?

insertAdjacentHTML / Text / Element

لذلك يمكننا استخدام طريقة أخرى متعددة الاستخدامات: elem.insertAdjacentHTML (حيث ، html).

المعلمة الأولى هي كلمة كود ، تحدد مكان إدراج نسبة إلى elem. يجب أن يكون واحدًا مما يلي:

المعلمة الثانية هي سلسلة HTML ، يتم إدراجها “كـ HTML”.

هذه هي الطريقة التي يمكننا بها إلحاق HTML التعسفي بالصفحة.

يمكننا أن نلاحظ بسهولة أوجه التشابه بين هذا والصورة السابقة. نقاط الإدراج هي نفسها في الواقع ، ولكن هذه الطريقة تدخل HTML.

وهي موجودة بشكل أساسي لجعل بناء الجملة “موحدًا”. عمليًا ، يتم استخدام insertAdjacentHTML فقط معظم الوقت. لأن العناصر والنصوص ، لدينا طرق “إلحاق / قبل / قبل / بعد” – فهي أقصر في الكتابة ويمكنها إدراج العقد / أجزاء النص.

إزالة العقدة

يرجى ملاحظة: إذا أردنا * نقل * عنصر إلى مكان آخر – فلا حاجة لإزالته من العنصر القديم.

** تقوم جميع طرق الإدراج تلقائيًا بإزالة العقدة من المكان القديم. **

عقد الاستنساخ: cloneNode

يمكننا عمل دالة ووضع الكود هناك. لكن الطريقة البديلة ستكون * استنساخ * “div” الموجود وتعديل النص الموجود بداخله (إذا لزم الأمر).

في بعض الأحيان عندما يكون لدينا عنصر كبير ، قد يكون ذلك أسرع وأبسط.

DocumentFragment

DocumentFragment عبارة عن عقدة DOM خاصة تعمل كغلاف لتمرير قوائم العقد.

يمكننا إلحاق العقد الأخرى بها ، ولكن عندما ندرجها في مكان ما ، يتم إدراج محتواها بدلاً من ذلك.

على سبيل المثال ، يُنشئ getListContent أدناه جزءًا يحتوي على عناصر<li>، والتي يتم إدراجها لاحقًا في<ul>:

يرجى ملاحظة أنه في السطر الأخير (*) نلحق DocumentFragment ، ولكنه" يمتزج "، وبالتالي فإن البنية الناتجة ستكون:

DocumentFragment نادرا ما يستخدم صراحة. لماذا تضيف إلى نوع خاص من العقدة ، إذا كان بإمكاننا إرجاع مجموعة من العقد بدلاً من ذلك؟ مثال معاد كتابته:

نذكر DocumentFragment بشكل أساسي نظرًا لوجود بعض المفاهيم فوقه ، مثل عنصر [template] (info: template-element) ، الذي سنغطيه لاحقًا.

طريقة إدخال / إزالة المدرسة القديمة

هناك أيضًا طرق معالجة DOM “المدرسة القديمة” ، موجودة لأسباب تاريخية.

تأتي هذه الأساليب من العصور القديمة حقًا. في الوقت الحاضر ، لا يوجد سبب لاستخدامها ، حيث أن الأساليب الحديثة ، مثل “إلحاق” ، “قبل” ، “قبل” ، “بعد” ، “إزالة” ، “استبدال” ، تكون أكثر مرونة.

السبب الوحيد لإدراج هذه الطرق هنا هو أنه يمكنك العثور عليها في العديد من النصوص القديمة:

parentElem.insertBefore(node, nextSibling) :إدراج “العقدة” قبل “nextSibling” في “motherElem”.

parentElem.replaceChild(node, oldChild) :يستبدل oldChild بـ" عقدة “بين أطفال” الوالدين ".

يزيل العقدة منالوالدين (بافتراض أن العقدة هي تابعها).

كل هذه الأساليب ترجع العقدة المدرجة / المُزالة. بمعنى آخر ، تُرجع parents 'appendChild (العقدة) العقدة`. ولكن عادة لا يتم استخدام القيمة التي تم إرجاعها ، نقوم فقط بتشغيل الطريقة.

كلمة عن “document.write”

هناك طريقة أخرى قديمة جدًا لإضافة شيء ما إلى صفحة الويب: document.write.

يؤدي استدعاء "document.write (html)إلى كتابة "html" في الصفحة "هنا والآن". يمكن إنشاء سلسلةhtml` ديناميكيًا ، لذا فهي مرنة نوعًا ما. يمكننا استخدام JavaScript لإنشاء صفحة ويب كاملة وكتابتها.

تأتي الطريقة من الأوقات التي لم يكن فيها DOM ، ولا معايير … الأوقات القديمة حقًا. إنها لا تزال حية ، لأن هناك سكربتات تستخدمها.

في النصوص الحديثة نادرًا ما نراها بسبب القيود المهمة التالية:

** لا يعمل الاتصال بـ document.write إلا أثناء تحميل الصفحة. **

إذا نسميها بعد ذلك ، فسيتم مسح محتوى المستند الحالي.

لذا فهو غير قابل للاستخدام في مرحلة “بعد التحميل” ، على عكس طرق DOM الأخرى التي تناولناها أعلاه.

هناك جانب صاعد أيضا. من الناحية الفنية ، عندما يتم استدعاء document.write أثناء قراءة المستعرض لـ HTML (" تحليل ") ، ويكتب شيئًا ، يستهلكه المستعرض تمامًا كما لو كان موجودًا في البداية ، في نص HTML.

لذلك يعمل بسرعة فائقة ، لأنه لا يوجد * تعديل DOM * المعنية. يكتب مباشرة في نص الصفحة ، بينما لم يتم بناء DOM بعد.

لذا إذا احتجنا إلى إضافة الكثير من النص إلى HTML ديناميكيًا ، ونحن في مرحلة تحميل الصفحة ، وكانت السرعة مهمة ، فقد يساعد ذلك. لكن في الواقع نادرا ما تجتمع هذه المتطلبات. وعادة ما يمكننا رؤية هذه الطريقة في البرامج النصية لمجرد أنها قديمة.

ملخص

مهمه

createTextNode vs innerHTML vs textContent

We have an empty DOM element elem and a string text.

Which of these 3 commands will do exactly the same?

elem.append(document.createTextNode(text))
elem.innerHTML = text
elem.textContent = text

Answer: 1 and 3.

Both commands result in adding the text “as text” into the elem.

Here’s an example:

<div id="elem1"></div>
<div id="elem2"></div>
<div id="elem3"></div>
<script>
  let text = '<b>text</b>';

  elem1.append(document.createTextNode(text));
  elem2.innerHTML = text;
  elem3.textContent = text;
</script>

Clear the element

Create a function clear(elem) that removes everything from the element.

<ol id="elem">
  <li>Hello</li>
  <li>World</li>
</ol>

<script>
  function clear(elem) { /* your code */ }

  clear(elem); // clears the list
</script>

First, let’s see how not to do it:

          function clear(elem) {
  for (let i=0; i < elem.childNodes.length; i++) {
      elem.childNodes[i].remove();
  }
}
        

That won’t work, because the call to remove() shifts the collection elem.childNodes, so elements start from the index 0 every time. But i increases, and some elements will be skipped.

The for..of loop also does the same.

The right variant could be:

          function clear(elem) {
  while (elem.firstChild) {
    elem.firstChild.remove();
  }
}
        

And also there’s a simpler way to do the same:

          function clear(elem) {
  elem.innerHTML = '';
}
        

Why does "aaa" remain?

In the example below, the call table.remove() removes the table from the document.

But if you run it, you can see that the text "aaa" is still visible.

Why does that happen?

<table id="table">
  aaa
  <tr>
    <td>Test</td>
  </tr>
</table>

<script>
  alert(table); // the table, as it should be

  table.remove();
  // why there's still aaa in the document?
</script>

The HTML in the task is incorrect. That’s the reason of the odd thing.

The browser has to fix it automatically. But there may be no text inside the <table>: according to the spec only table-specific tags are allowed. So the browser adds "aaa" before the <table>.

Now it’s obvious that when we remove the table, it remains.

The question can be easily answered by exploring the DOM using the browser tools. It shows "aaa" before the <table>.

The HTML standard specifies in detail how to process bad HTML, and such behavior of the browser is correct.

Create a list

Write an interface to create a list from user input.

For every list item:

Ask a user about its content using prompt.
Create the <li> with it and add it to <ul>.
Continue until the user cancels the input (by pressing Esc or via an empty entry).

All elements should be created dynamically.

If a user types HTML-tags, they should be treated like a text.

عرض توضيحي في نافذة جديدة

Please note the usage of textContent to assign the <li> content.

افتح الحل في sandbox.

Create a tree from the object

Write a function createTree that creates a nested ul/li list from the nested object.

For instance:

          let data = {
  "Fish": {
    "trout": {},
    "salmon": {}
  },

  "Tree": {
    "Huge": {
      "sequoia": {},
      "oak": {}
    },
    "Flowering": {
      "apple tree": {},
      "magnolia": {}
    }
  }
};
        

The syntax:

          let container = document.getElementById('container');
createTree(container, data); // creates the tree in the container
        

The result (tree) should look like this:

Choose one of two ways of solving this task:

Create the HTML for the tree and then assign to container.innerHTML.
Create tree nodes and append with DOM methods.

Would be great if you could do both.

P.S. The tree should not have “extra” elements like empty <ul></ul> for the leaves.

افتح sandbox للمهمه.

The easiest way to walk the object is to use recursion.

Create a calendar

Write a function createCalendar(elem, year, month).

The call should create a calendar for the given year/month and put it inside elem.

The calendar should be a table, where a week is <tr>, and a day is <td>. The table top should be <th> with weekday names: the first day should be Monday, and so on till Sunday.

For instance, createCalendar(cal, 2012, 9) should generate in element cal the following calendar:

P.S. For this task it’s enough to generate the calendar, should not yet be clickable.

افتح sandbox للمهمه.

We’ll create the table as a string: "<table>...</table>", and then assign it to innerHTML.

The algorithm:

Create the table header with <th> and weekday names.
Create the date object d = new Date(year, month-1). That’s the first day of month (taking into account that months in JavaScript start from 0, not 1).
First few cells till the first day of the month d.getDay() may be empty. Let’s fill them in with <td></td>.
Increase the day in d: d.setDate(d.getDate()+1). If d.getMonth() is not yet the next month, then add the new cell <td> to the calendar. If that’s a Sunday, then add a newline “</tr><tr>”.
If the month has finished, but the table row is not yet full, add empty <td> into it, to make it square.

افتح الحل في sandbox.

Colored clock with setInterval

Create a colored clock like here:

Use HTML/CSS for the styling, JavaScript only updates time in elements.

افتح sandbox للمهمه.

First, let’s make HTML/CSS.

Each component of the time would look great in its own <span>:

          <div id="clock">
  <span class="hour">hh</span>:<span class="min">mm</span>:<span class="sec">ss</span>
</div>
        

Also we’ll need CSS to color them.

The update function will refresh the clock, to be called by setInterval every second:

          function update() {
  let clock = document.getElementById('clock');
  let date = new Date(); // (*)
  let hours = date.getHours();
  if (hours < 10) hours = '0' + hours;
  clock.children[0].innerHTML = hours;

  let minutes = date.getMinutes();
  if (minutes < 10) minutes = '0' + minutes;
  clock.children[1].innerHTML = minutes;

  let seconds = date.getSeconds();
  if (seconds < 10) seconds = '0' + seconds;
  clock.children[2].innerHTML = seconds;
}
        

In the line (*) we every time check the current date. The calls to setInterval are not reliable: they may happen with delays.

The clock-managing functions:

          let timerId;

function clockStart() { // run the clock
  if (!timerId) { // only set a new interval if the clock is not running
    timerId = setInterval(update, 1000);
  }
  update(); // (*)
}

function clockStop() {
  clearInterval(timerId);
  timerId = null; // (**)
}
        

Please note that the call to update() is not only scheduled in clockStart(), but immediately run in the line (*). Otherwise the visitor would have to wait till the first execution of setInterval. And the clock would be empty till then.

Also it is important to set a new interval in clockStart() only when the clock is not running. Otherways clicking the start button several times would set multiple concurrent intervals. Even worse – we would only keep the timerID of the last interval, losing references to all others. Then we wouldn’t be able to stop the clock ever again! Note that we need to clear the timerID when the clock is stopped in the line (**), so that it can be started again by running clockStart().

افتح الحل في sandbox.

Insert the HTML in the list

Write the code to insert <li>2</li><li>3</li> between two <li> here:

          <ul id="ul">
  <li id="one">1</li>
  <li id="two">4</li>
</ul>
        

When we need to insert a piece of HTML somewhere, insertAdjacentHTML is the best fit.

The solution:

one.insertAdjacentHTML('afterend', '<li>2</li><li>3</li>');

Sort the table

There’s a table:

<table>
<thead>
  <tr>
    <th>Name</th><th>Surname</th><th>Age</th>
  </tr>
</thead>
<tbody>
  <tr>
    <td>John</td><td>Smith</td><td>10</td>
  </tr>
  <tr>
    <td>Pete</td><td>Brown</td><td>15</td>
  </tr>
  <tr>
    <td>Ann</td><td>Lee</td><td>5</td>
  </tr>
  <tr>
    <td>...</td><td>...</td><td>...</td>
  </tr>
</tbody>
</table>

There may be more rows in it.

Write the code to sort it by the "name" column.

افتح sandbox للمهمه.

The solution is short, yet may look a bit tricky, so here I provide it with extensive comments:

          let sortedRows = Array.from(table.tBodies[0].rows) // 1
  .sort((rowA, rowB) => rowA.cells[0].innerHTML.localeCompare(rowB.cells[0].innerHTML));

table.tBodies[0].append(...sortedRows); // (3)
        

The step-by-step algorthm:

Get all <tr>, from <tbody>.
Then sort them comparing by the content of the first <td> (the name field).
Now insert nodes in the right order by .append(...sortedRows).

We don’t have to remove row elements, just “re-insert”, they leave the old place automatically.

P.S. In our case, there’s an explicit <tbody> in the table, but even if HTML table doesn’t have <tbody>, the DOM structure always has it.

افتح الحل في sandbox.

تعديل الوثيقة

مثال: إظهار رسالة

إنشاء عنصر

إنشاء الرسالة

طرق الإدراج

insertAdjacentHTML / Text / Element

إزالة العقدة

عقد الاستنساخ: cloneNode

DocumentFragment

طريقة إدخال / إزالة المدرسة القديمة

كلمة عن “document.write”

ملخص

مهمه

createTextNode vs innerHTML vs textContent

Clear the element

Why does "aaa" remain?

Create a list

Create a tree from the object

Show descendants in a tree

Create a calendar

Colored clock with setInterval

Insert the HTML in the list

Sort the table

التعليقات

فصل

التنقل في الدرس