JS властивість Document.implementation

Загальний опис

Document.implementation є властивістю, що надає доступ до об'єкта DOMImplementation, асоційованого з документом. DOMImplementation є інтерфейсом, що надає ряд методів для створення документів, перевірки можливості реалізації певних функцій у документі та інших операцій, пов'язаних із документами і DOM. Головна користь використання Document.implementation полягає в тому, що вона дозволяє розробникам створювати нові документи (наприклад, HTML або XML) програмним шляхом, а також перевіряти підтримку різних функцій DOM у браузері без необхідності безпосереднього взаємодії з конкретним документом.

Ця властивість є особливо корисною при роботі з XML документами або при необхідності створення віртуальних документів, які можуть бути використані для різних цілей, включаючи тестування, обробку даних або динамічне створення вмісту на сторінці.

Створення нового документа

Один із найпростіших способів використання Document.implementation - створення нового HTML або XML документа. Наприклад, для створення нового HTML документа можна використати наступний код:

let newDoc = document.implementation.createHTMLDocument("Новий Документ");
console.log(newDoc.title); // Виводить "Новий Документ"

Цей код створює новий HTML документ із заголовком "Новий Документ". Створений таким чином документ може бути використаний для динамічного додавання вмісту або для інших цілей у межах JavaScript програми.

Створення XML документа

Для створення XML документа використовується метод createDocument. Нижче наведено приклад створення простого XML документа:

let xmlDoc = document.implementation.createDocument("", "root", null);
let newNode = xmlDoc.createElement("child");
newNode.textContent = "Це текстовий вузол";
xmlDoc.documentElement.appendChild(newNode);

console.log(xmlDoc.documentElement.outerHTML);
// Виводить: <root><child>Це текстовий вузол</child></root>

У цьому прикладі створюється XML документ із кореневим елементом <root>, до якого додається дочірній елемент <child> з текстовим вмістом.

Перевірка підтримки функцій

Document.implementation також може бути використано для перевірки підтримки конкретних функцій у браузері. Наприклад, для перевірки підтримки XML документів можна використати метод hasFeature:

if (document.implementation.hasFeature("XML", "1.0")) {
    console.log("XML 1.0 підтримується");
} else {
    console.log("XML 1.0 не підтримується");
}

Цей код перевіряє, чи підтримує поточний браузер XML версії 1.0.

Використання Document.implementation надає потужні можливості для роботи з документами в JavaScript, дозволяючи розробникам виконувати складні операції, пов'язані зі створенням, модифікацією та аналізом документів, ефективно розширюючи можливості веб-розробки.

правити

Порада

Для створення нового документа, використовуйте метод createDocument об'єкта, повернутого властивістю document.implementation. Цей метод приймає як аргументи простір імен URI, кваліфіковане ім'я та тип документу, що дозволяє точно визначити структуру новоствореного документа.

автор: Bond правити

Порада

При роботі з документами HTML, document.implementation надає метод createHTMLDocument, який спрощує процес створення HTML-документів. Це особливо зручно для створення документів, що використовуються як шаблони або для динамічного генерування контенту на стороні клієнта.

автор: Bond правити

Порада

Використовуючи document.implementation, можна перевірити підтримку конкретних функцій документа або API браузером через метод hasFeature. Хоча цей метод більше не рекомендований до використання і завжди повертає true у новітніх браузерах, знання про його існування може бути корисним при роботі зі старими проєктами або для забезпечення зворотної сумісності.

автор: Bond правити

+ додати пораду чи нотатку

Синтаксис

Document.implementation

Переглядачі

Стаціонарні переглядачі Мобільні переглядачі

Підтримка: стаціонарні переглядачі

Переглядач
	1	1	1	≤12.1	12	6

Підтримка: мобільні переглядачі

Переглядач
	4.4	18	4	1

Приклади

+ запропонувати свій приклад у пісочниці

<header>
  <h2 class="title">Document.implementation Property</h2>
  <p class="description">Дозволяє створювати нові документи.</p>
</header>
<main>
  <div class="result">
    <button id="createContent">Створити контент</button>
    <div id="contentArea"></div>
  </div>
</main>

body {
  font-size: 16px;
  line-height: 1.5;
  font-family: monospace;
}

header {
  background-color: #f1f1f1;
  margin-bottom: 25px;
  padding: 15px;
  -webkit-box-shadow: 0px 0px 3px 0px rgba(118, 118, 118, 1);
  -moz-box-shadow: 0px 0px 3px 0px rgba(118, 118, 118, 1);
  box-shadow: 0px 0px 3px 0px rgba(118, 118, 118, 1);
}

header h2.title {
  padding-bottom: 15px;
  border-bottom: 1px solid #999;
}

header p.description {
  font-style: italic;
  color: #222;
}

.result {
  background-color: #f8f8f8;
  padding: 15px;
  -webkit-box-shadow: 0px 0px 3px 0px rgba(118, 118, 118, 1);
  -moz-box-shadow: 0px 0px 3px 0px rgba(118, 118, 118, 1);
  box-shadow: 0px 0px 3px 0px rgba(118, 118, 118, 1);
}

document.getElementById('createContent').addEventListener('click', function () {
  // Створення нового ізольованого документу
  var newDoc = document.implementation.createHTMLDocument("Новий Документ");

  // Додавання елементів до нового документу
  var newParagraph = newDoc.createElement('p');
  newParagraph.textContent = "Це новий параграф, створений у ізольованому документі.";
  newDoc.body.appendChild(newParagraph);

  // Імпортування та вставка нового елементу в основний документ
  var contentArea = document.getElementById('contentArea');
  var importedNode = document.importNode(newDoc.body, true);
  contentArea.appendChild(importedNode);
});
//# sourceURL=pen.js

// Створення нового порожнього документа HTML
var newDoc = document.implementation.createHTMLDocument("Новий Документ");

// Додавання тексту до новоствореного документа
newDoc.body.textContent = "Це новий документ, створений за допомогою document.implementation.";

console.log(newDoc.title); // Виведення назви нового документа

// Створення нового документа XML
var rssDoc = document.implementation.createDocument(null, "rss", null);
var channel = rssDoc.createElement("channel");

// Додавання елементів до каналу RSS
var title = rssDoc.createElement("title");
title.textContent = "Назва RSS-каналу";
var link = rssDoc.createElement("link");
link.textContent = "https://example.com";
var description = rssDoc.createElement("description");
description.textContent = "Опис RSS-каналу";

// Збирання структури документа
channel.appendChild(title);
channel.appendChild(link);
channel.appendChild(description);
rssDoc.documentElement.appendChild(channel);

console.log(new XMLSerializer().serializeToString(rssDoc)); // Виведення XML-рядка для перевірки