Перемещение по таблице HTML с помощью JavaScript и интерфейсов DOM

В этой статье рассматриваются некоторые мощные и фундаментальные методы DOM уровня 1 и способы их использования из JavaScript. Вы узнаете, как динамически создавать, получать доступ к элементам, управлять ими и удалять элементы HTML. Методы DOM, представленные здесь, не специфичны для HTML; они также применяются к XML. Представленные здесь демонстрации будут работать в любой современной браузере.

Примечание: Методы DOM, представленные здесь, являются частью спецификации Document Object Model (Core) уровня 1. DOM уровня 1 включает в себя как методы для общего доступа и манипулирования документом (DOM 1 Core), так и методы, специфичные для документов HTML (DOM 1 HTML).

Динамическое создание таблицы HTML

Пример

В этом примере к странице добавляется новая таблица при нажатии на кнопку.

HTML

<input type="button" value="Generate a table" onclick="generateTable()" />

JavaScript

function generateTable() {
  // creates a <table> element and a <tbody> element
  const tbl = document.createElement("table");
  const tblBody = document.createElement("tbody");

  // creating all cells
  for (let i = 0; i < 2; i++) {
    // creates a table row
    const row = document.createElement("tr");

    for (let j = 0; j < 2; j++) {
      // Create a <td> element and a text node, make the text
      // node the contents of the <td>, and put the <td> at
      // the end of the table row
      const cell = document.createElement("td");
      const cellText = document.createTextNode(`cell in row ${i}, column ${j}`);
      cell.appendChild(cellText);
      row.appendChild(cell);
    }

    // add the row to the end of the table body
    tblBody.appendChild(row);
  }

  // put the <tbody> in the <table>
  tbl.appendChild(tblBody);
  // appends <table> into <body>
  document.body.appendChild(tbl);
  // sets the border attribute of tbl to '2'
  tbl.setAttribute("border", "2");
}

Результат

Описание

Обратите внимание на порядок, в котором мы создали элементы и узел текста:

Сначала мы создали элемент <table>.
Затем мы создали элемент <tbody>, который является дочерним элементом элемента <table>.
Далее, мы использовали цикл для создания элементов <tr>, которые являются дочерними элементами элемента <tbody>.
Для каждого элемента <tr> мы использовали цикл для создания элементов <td>, которые являются дочерними элементами элементов <tr>.
Для каждого элемента <td> мы затем создали узел текста с текстом ячейки таблицы.

После создания элементов <table>, <tbody>, <tr>, и <td>, а также узла текста, мы затем добавляем каждый объект к своему родительскому элементу в обратном порядке:

Сначала мы прикрепляем каждый узел текста к его родительскому элементу <td> с помощью
```
cell.appendChild(cellText);
```
Далее, мы прикрепляем каждый элемент <td> к его родительскому элементу <tr> с помощью
```
row.appendChild(cell);
```
Далее, мы прикрепляем каждый элемент <tr> к родительскому элементу <tbody> с помощью
```
tblBody.appendChild(row);
```
Далее, мы прикрепляем элемент <tbody> к его родительскому элементу <table> с помощью
```
tbl.appendChild(tblBody);
```
Далее, мы прикрепляем элемент <table> к его родительскому элементу <body> с помощью
```
document.body.appendChild(tbl);
```

Запомните эту технику. Вы будете часто использовать её при программировании для W3C DOM. Сначала вы создаёте элементы сверху вниз, затем прикрепляете дочерние элементы к родительским снизу вверх.

Вот разметка HTML, сгенерированная кодом JavaScript:

<table border="2">
  <tbody>
    <tr>
      <td>cell is row 0 column 0</td>
      <td>cell is row 0 column 1</td>
    </tr>
    <tr>
      <td>cell is row 1 column 0</td>
      <td>cell is row 1 column 1</td>
    </tr>
  </tbody>
</table>

Вот дерево объекта DOM, сгенерированное кодом для элемента <table> и его дочерних элементов:

How a DOM object tree is generated from the main element and its children

Вы можете построить эту таблицу и её внутренние дочерние элементы, используя всего несколько методов DOM. Помните о модели дерева для структур, которые вы планируете создать; это облегчит написание необходимого кода. В дереве <table> на рисунке 1 элемент <table> имеет одного потомка: элемент <tbody>. У <tbody> два потомка. У каждого потомка <tbody> (<tr>) два потомка (<td>). И наконец, каждый <td> имеет одного потомка: узел текста.

Установка цвета фона абзаца

Пример

В этом примере мы изменяем цвет фона абзаца при нажатии на кнопку.

HTML

<body>
  <input
    type="button"
    value="Set paragraph background color"
    onclick="setBackground()" />
  <p>hi</p>
  <p>hello</p>
</body>

JavaScript

function setBackground() {
  // now, get all the p elements in the document
  const paragraphs = document.getElementsByTagName("p");

  // get the second paragraph from the list
  const secondParagraph = paragraphs[1];

  // set the inline style
  secondParagraph.style.background = "red";
}

Результат

Описание

getElementsByTagName(tagNameValue) — метод, доступный для любого DOM-элемента Element или корневого элемента Document. При вызове он возвращает массив со всеми дочерними элементами, соответствующими имени тега. Первый элемент в списке находится на позиции [0] в массиве.

Мы выполнили следующие шаги:

Сначала мы получаем все элементы p в документе:
```
const paragraphs = document.getElementsByTagName("p");
```
Затем мы получаем второй элемент абзаца из списка элементов p:
```
const secondParagraph = paragraphs[1];
```
Наконец, мы устанавливаем цвет фона в красный с помощью свойства style объекта paragraph:
```
secondParagraph.style.background = "red";
```

Создание узлов текста с помощью document.createTextNode("..")

Используйте объект документа для вызова метода createTextNode и создайте узел текста. Вам просто нужно передать текстовое содержимое. Возвращаемое значение — это объект, представляющий узел текста.

myTextNode = document.createTextNode("world");

Это означает, что вы создали узел типа TEXT_NODE (фрагмент текста), чьи данные текста составляют "world", и myTextNode является вашей ссылкой на этот объект узла. Чтобы вставить этот текст в страницу HTML, вам необходимо сделать этот узел текста потомком какого-либо другого узла-элемента.

Вставка элементов с помощью appendChild(..)

Таким образом, вызывая secondParagraph.appendChild(node_element), вы делаете элемент новым потомком второго элемента <p>.

secondParagraph.appendChild(myTextNode);

После тестирования этого примера обратите внимание, что слова «привет» и «мир» находятся вместе: «приветмир». Таким образом, визуально, когда вы видите страницу HTML, кажется, что два узла текста «привет» и «мир» — это один узел, но помните, что в модели документа их два. Второй узел — это новый узел типа TEXT_NODE, и он является вторым потомком второго тега <p>. На следующей фигуре показан недавно созданный объект узла текста внутри дерева документа.

Text nodes in a paragraph element as individual siblings in the DOM tree.

Примечание: createTextNode() и appendChild() — простой способ включить пробел между словами привет и мир. Еще один важный момент заключается в том, что метод appendChild будет добавлять потомка после последнего потомка, так же как слово мир было добавлено после слова привет. Таким образом, если вы хотите вставить узел текста между привет и мир, вам нужно использовать insertBefore вместо appendChild.

Создание новых элементов с помощью объекта document и метода createElement(..)

Вы можете создавать новые HTML-элементы или любые другие элементы, которые вам нужны, с помощью createElement. Например, если вы хотите создать новый элемент <p> в качестве потомка элемента <body>, вы можете использовать myBody в предыдущем примере и добавить новый узел элемента. Для создания узла вызовите document.createElement("tagname"). Например:

myNewPTagNode = document.createElement("p");
myBody.appendChild(myNewPTagNode);

How a new node element is appended to the text node object inside the document tree

Удаление узлов с помощью метода removeChild(..)

Узлы можно удалять. Следующий код удаляет узел текста myTextNode (содержащий слово «мир») из второго элемента <p> элемента secondParagraph.

secondParagraph.removeChild(myTextNode);

Узел текста myTextNode (содержащий слово «мир») все еще существует. Следующий код присоединяет myTextNode к недавно созданному элементу <p> элементу myNewPTagNode.

myNewPTagNode.appendChild(myTextNode);

Конечное состояние изменённого дерева объектов выглядит так:

Creating and appending a new node element to the object tree text structure

Динамическое создание таблицы (возврат к Sample1.html)

В остальной части этой статьи мы будем продолжать работать с sample1.html. На следующей фигуре показана структура дерева объекта таблицы для таблицы, созданной в примере.

Обзор структуры HTML-таблицы

The HTML table object tree structure after adding new node elements

Создание узлов элементов и их вставка в дерево документа

Основные шаги по созданию таблицы в sample1.html:

Получение объекта body (первый элемент объекта документа).
Создание всех элементов.
Наконец, добавление каждого потомка в соответствии со структурой таблицы (как показано на рисунке выше). Следующий код исходного кода — это прокомментированная версия для sample1.html.

Примечание: В конце функции start есть новая строка кода. Свойство border таблицы было установлено с помощью другого метода DOM, setAttribute(). setAttribute() имеет два аргумента: имя атрибута и значение атрибута. Вы можете установить любой атрибут любого элемента, используя метод setAttribute.

<html lang="en">
  <head>
    <title>
      Sample code - Traversing an HTML Table with JavaScript and DOM Interfaces
    </title>
    <script>
      function start() {
        // get the reference for the body
        const myBody = document.getElementsByTagName("body")[0];

        // creates <table> and <tbody> elements
        const myTable = document.createElement("table");
        const myTableBody = document.createElement("tbody");

        // creating all cells
        for (let j = 0; j < 3; j++) {
          // creates a <tr> element
          const myCurrentRow = document.createElement("tr");

          for (let i = 0; i < 4; i++) {
            // creates a <td> element
            const myCurrentCell = document.createElement("td");
            // creates a Text Node
            const currentText = document.createTextNode(
              `cell is row ${j}, column ${i}`,
            );
            // appends the Text Node we created into the cell <td>
            myCurrentCell.appendChild(currentText);
            // appends the cell <td> into the row <tr>
            myCurrentRow.appendChild(myCurrentCell);
          }
          // appends the row <tr> into <tbody>
          myTableBody.appendChild(myCurrentRow);
        }

        // appends <tbody> into <table>
        myTable.appendChild(myTableBody);
        // appends <table> into <body>
        myBody.appendChild(myTable);
        // sets the border attribute of myTable to 2;
        myTable.setAttribute("border", "2");
      }
    </script>
  </head>
  <body onload="start()"></body>
</html>

Изменение таблицы с помощью DOM и CSS

Получение узла текста из таблицы

Этот пример представляет два новых атрибута DOM. Сначала используется атрибут childNodes для получения списка дочерних узлов myCell. Список childNodes включает все дочерние узлы независимо от их имени или типа. Как и getElementsByTagName(), он возвращает список узлов.

Различия заключаются в том, что (а) getElementsByTagName() возвращает только элементы указанного тега; и (б) childNodes включает всех потомков на любом уровне, а не только непосредственных детей.

После получения возвращённого списка используйте метод [x] для извлечения нужного дочернего элемента. В этом примере в myCellText хранится текстовый узел второй ячейки во второй строке таблицы.

Затем, чтобы отобразить результаты в этом примере, создаётся новый текстовый узел, содержащий данные из myCellText, и он добавляется как дочерний элемент <body>.

Примечание: Если ваш объект — текстовый узел, вы можете использовать атрибут data и получить текстовое содержимое узла.

myBody = document.getElementsByTagName("body")[0];
myTable = myBody.getElementsByTagName("table")[0];
myTableBody = myTable.getElementsByTagName("tbody")[0];
myRow = myTableBody.getElementsByTagName("tr")[1];
myCell = myRow.getElementsByTagName("td")[1];

// first item element of the childNodes list of myCell
myCellText = myCell.childNodes[0];

// content of currentText is the data content of myCellText
currentText = document.createTextNode(myCellText.data);
myBody.appendChild(currentText);

Получение значения атрибута

В конце примера sample1 вызывается setAttribute на объекте myTable. Этот вызов использовался для установки свойства border таблицы. Для получения значения атрибута используйте метод getAttribute.

myTable.getAttribute("border");

Скрытие столбца путём изменения свойств стиля

После того, как объект находится в вашей переменной JavaScript, вы можете установить свойства style напрямую. Следующий код — модифицированная версия sample1.html, в которой каждая ячейка второго столбца скрывается, а каждая ячейка первого столбца получает красный фон. Обратите внимание, что свойство style было установлено напрямую.

<html lang="en">
  <body onload="start()"></body>
  <script>
    function start() {
      const myBody = document.getElementsByTagName("body")[0];
      const myTable = document.createElement("table");
      const myTableBody = document.createElement("tbody");

      for (let row = 0; row < 2; row++) {
        const myCurrentRow = document.createElement("tr");
        for (let col = 0; col < 2; col++) {
          const myCurrentCell = document.createElement("td");
          const currentText = document.createTextNode(`cell is: ${row}${col}`);
          myCurrentCell.appendChild(currentText);
          myCurrentRow.appendChild(myCurrentCell);
          // set the cell background color
          // if the column is 0. If the column is 1 hide the cell
          if (col === 0) {
            myCurrentCell.style.background = "rgb(255 0 0)";
          } else {
            myCurrentCell.style.display = "none";
          }
        }
        myTableBody.appendChild(myCurrentRow);
      }
      myTable.appendChild(myTableBody);
      myBody.appendChild(myTable);
    }
  </script>
</html>

© 2005–2024 MDN contributors.
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.
https://developer.mozilla.org/en-US/docs/Web/API/Document_Object_Model/Traversing_an_HTML_table_with_JavaScript_and_DOM_Interfaces