Использование файлов в веб приложениях - Интерфейсы веб API

Использование файлов в веб приложениях
======================================

Используя File API, добавленный к DOM в HTML5, в веб-приложениях теперь можно запрашивать пользователя выбрать локальные файлы и затем читать содержимое этих файлов. Выбор файлов может осуществляться с помощью элемента `<input>` или drag and drop.

Если вы хотите использовать DOM File API в расширениях или коде Chrome, используйте. На самом деле, в таком случае вам необходимо ознакомиться с дополнительными нюансами. См. статью Using the DOM File API in chrome code для подробностей.

Доступ к выбранным файлам
-------------------------

Рассмотрим следующий код:

```html
<input type="file" id="input" multiple />
```

File API делает возможным доступ к `FileList`, который содержит объекты `File`, которым соответствуют файлы, выбранные пользователем.

Атрибут `multiple` элемента `input` позволяет пользователю выбрать несколько файлов.

Обращение к одному выбранному файлу с использованием классической DOM-модели:

```js
const selectedFile = document.getElementById("input").files[0];
```

Обращение к одному выбранному файлу через jQuery:

```js
var selectedFile = $("#input").get(0).files[0];

var selectedFile = $("#input")[0].files[0];
```

**Примечание:** Ошибка "files is undefined" означает что был выбран не один HTML-элемент, а список элементов, возвращаемый jQuery. Необходимо уточнить, у какого именно элемента требуется вызвать метод "files"

### Доступ к выбранным файлам через событие change

Также возможно (но не обязательно) получить доступ к `FileList` через событие `change`. Нужно использовать `EventTarget.addEventListener()` чтобы добавить обработчик события `change`, как показано здесь:

```js
const inputElement = document.getElementById("input");
inputElement.addEventListener("change", handleFiles, false);
function handleFiles() {
  const fileList = this.files; /\* now you can work with the file list \*/
}
```

Обработчик события `change` можно назначить атрибутом элемента:

```html
<input type="file" id="input" onchange="handleFiles(this.files)" />
```

Когда пользователь выбирает файл, функция handleFiles() будет вызвана с объектом `FileList`, который состоит из объектов `File`, представляющих файлы, выбранные пользователем.

Получение информации о выделенных файлах
----------------------------------------

Объект `FileList` предоставляемый классическим DOM содержит все файлы выбранные пользователем, каждый из которых представляет собой объект `File`. Вы можете определить сколько файлов выбрал пользователь проверяя значение атрибута длины (`length`) списка файлов:

```js
var numFiles = files.length;
```

Конкретные объекты `File` могут быть получены обращением к списку файлов как к массиву:

```js
for (var i = 0, numFiles = files.length; i < numFiles; i++) {
  var file = files[i];
  ..
}
```

Этот цикл проходит по всем файлам в списке файлов.

Всего существует три атрибута, предоставляемых объектом `File`, которые содержат полезную информацию о файле.

`name`

Имя файла как строка доступная только для чтения. Это просто имя файла и оно не включает в себя информацию о пути.

`size`

Размер файла в байтах, как 64-битное целое число (возможно только чтение).

`type`

MIME тип файла, как строка доступная только для чтения, или пустая строка (`""`) если тип файла не может быть определён.

### Пример: Отображение размера файла(ов)

Следующий пример показывает возможное использование свойства `size`:

```html
<!doctype html>
<html>
  <head>
    <meta charset="UTF-8" />
    <title>File(s) size</title>
    <script>
 function updateSize() {
 var nBytes = 0,
 oFiles = document.getElementById("uploadInput").files,
 nFiles = oFiles.length;
 for (var nFileId = 0; nFileId < nFiles; nFileId++) {
 nBytes += oFiles[nFileId].size;
 }
 var sOutput = nBytes + " bytes";
 // optional code for multiples approximation
 for (
 var aMultiples = [
 "KiB",
 "MiB",
 "GiB",
 "TiB",
 "PiB",
 "EiB",
 "ZiB",
 "YiB",
 ],
 nMultiple = 0,
 nApprox = nBytes / 1024;
 nApprox > 1;
 nApprox /= 1024, nMultiple++
 ) {
 sOutput =
 nApprox.toFixed(3) +
 " " +
 aMultiples[nMultiple] +
 " (" +
 nBytes +
 " bytes)";
 }
 // end of optional code
 document.getElementById("fileNum").innerHTML = nFiles;
 document.getElementById("fileSize").innerHTML = sOutput;
 }
 </script>
  </head>

  <body onload="updateSize();">
    <form name="uploadForm">
      <p>
        <input
 id="uploadInput"
 type="file"
 name="myFiles"
 onchange="updateSize();"
 multiple />
        selected files: <span id="fileNum">0</span>; total size:
        <span id="fileSize">0</span>
      </p>
      <p><input type="submit" value="Send file" /></p>
    </form>
  </body>
</html>
```

Использование метода click() скрытых элементов выбора файла
-----------------------------------------------------------

Начиная с Gecko 2.0, вы можете скрыть непривлекательный элемент `<input>` и предоставить свой собственный интерфейс для открытия диалогового окна выбора и отображения файла или файлов, выбранных пользователем. Вы можете сделать это, присвоив свойству display элемента input значение none (display:none) и вызывая метод `click()` скрытого элемента `<input>`.

Рассмотрим следующую разметку HTML:

```html
<input
 type="file"
 id="fileElem"
 multiple
 accept="image/\*"
 style="display:none"
 onchange="handleFiles(this.files)" />
<a href="#" id="fileSelect">Select some files</a>
```

Код, обрабатывающий событие click, может выглядеть следующим образом:

```js
var fileSelect = document.getElementById("fileSelect"),
  fileElem = document.getElementById("fileElem");

fileSelect.addEventListener(
  "click",
  function (e) {
    if (fileElem) {
      fileElem.click();
    }
    e.preventDefault(); // предотвращает перемещение к "#"
  },
  false,
);
```

Таким образом, вы можете стилизовать новую кнопку открытия диалога выбора файла так, как пожелаете.

Использование элемента label скрытого элемента input
----------------------------------------------------

Для того, чтобы открыть диалог выбора файла без использования JavaScript (метода click()), можно воспользоваться элементом `<label>`.

Рассмотрим следующую разметку HTML:

```html
<input
 type="file"
 id="fileElem"
 multiple
 accept="image/\*"
 style="display:none"
 onchange="handleFiles(this.files)" />
<label for="fileElem">Select some files</label>
```

В данном случае нет необходимости добавлять код JavaScript для того, чтобы вызвать `fileElem.click()`. Также в данном случае вы можете стилизовать элемент label так, как пожелаете.

Выбор файлов с использованием технологии drag and drop
------------------------------------------------------

Также вы можете предоставить пользователю возможность непосредственно перетаскивать файлы в ваше веб-приложение.

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

```js
var dropbox;

dropbox = document.getElementById("dropbox");
dropbox.addEventListener("dragenter", dragenter, false);
dropbox.addEventListener("dragover", dragover, false);
dropbox.addEventListener("drop", drop, false);
```

В данном примере мы превращаем элемент с ID, равным `dropbox`, в нашу зону перетаскивания при помощи добавления обработчиков для событий `dragenter`, `dragover` и `drop`.

В нашем случае нет необходимости делать что-то особенное при обработке событий `dragenter` и `dragover`, таким образом, обе функции, ответственные за обработку данных событий, довольно просты. Они останавливают распространение события и предотвращают возникновение действия по умолчанию:

```js
function dragenter(e) {
  e.stopPropagation();
  e.preventDefault();
}

function dragover(e) {
  e.stopPropagation();
  e.preventDefault();
}
```

Вся настоящая магия происходит в функции `drop()`:

```js
function drop(e) {
  e.stopPropagation();
  e.preventDefault();

  var dt = e.dataTransfer;
  var files = dt.files;

  handleFiles(files);
}
```

Здесь мы извлекаем из события поле `dataTransfer`, затем вытаскиваем из него список файлов и передаём этот список в `handleFiles()`. После этого процесс обработки файлов одинаков вне зависимости от того, использовал ли пользователь для их выбора элемент `input` или технологию drag and drop.

Пример: Отображение эскизов изображений, выбранных пользователем
----------------------------------------------------------------

Представим, что вы разрабатываете очередной веб-сайт для обмена фотографиями и вы хотите использовать возможности HTML5 для предварительного просмотра изображений перед тем, как пользователь загрузит их. Вы можете создать `input` элемент или зону перетаскивания, как обсуждалось ранее, и вызвать такую функцию, как `handleFiles()` ниже.

```js
function handleFiles(files) {
  for (var i = 0; i < files.length; i++) {
    var file = files[i];

    if (!file.type.startsWith("image/")) {
      continue;
    }

    var img = document.createElement("img");
    img.classList.add("obj");
    img.file = file;
    preview.appendChild(img); // Предполагается, что "preview" это div, в котором будет отображаться содержимое.

    var reader = new FileReader();
    reader.onload = (function (aImg) {
      return function (e) {
        aImg.src = e.target.result;
      };
    })(img);
    reader.readAsDataURL(file);
  }
}
```

Здесь наш цикл обрабатывает выбранные пользователем файлы, проверяя атрибут `type` у каждого файла, чтобы определить является ли файл изображением (выполняется регулярное выражение в строке "`image.*`"). Для каждого файла, который является изображением, мы создаём новый `img` элемент. Можно использовать CSS для установки красивых рамок, теней, и указания размеров изображения, но здесь нет нужды делать этого.

Каждое изображение имеет CSS класс `obj` добавленный к нему для упрощения его поиска в DOM дереве. Мы также добавили атрибут `file` к каждому изображению, указав `File` ; это позволит нам получить изображения для фактической загрузки позже. Наконец, мы используем `Node.appendChild()` для того, чтобы добавить новый эскиз в область предпросмотра нашего документа.

Затем мы устанавливаем `FileReader` для обработки асинхронной загрузки изображения и прикрепления его к `img` элементу. После создания нового объекта `FileReader`, мы настраиваем его функцию `onload`, затем вызываем `readAsDataURL()` для запуска операции чтения в фоновом режиме. Когда всё содержимое файла изображения загружено, они преобразуют его в `data:` URL, который передаётся в колбэк `onload` . Наша реализация этой процедуры просто устанавливает атрибут `src` у элемента `img` загруженного изображения, в результате чего миниатюра изображения появляется на экране пользователя.

Использование URLs объектов
---------------------------

Gecko 2.0 представляет поддержку для методов DOM `window.URL.createObjectURL()` (en-US) и `window.URL.revokeObjectURL()` (en-US). Они позволяют создавать простые строки URL, которые могут быть использованы для обращения к любым данным, на которые можно ссылаться, используя объект DOM `File`, включая локальные файлы на компьютере пользователя.

Когда у вас есть объект `File`, на который вы хотите ссылаться по URL из HTML, вы можете создать для этого объект URL, такой как этот:

```js
var objectURL = window.URL.createObjectURL(fileObj);
```

URL объекта – это строка, идентифицирующая объект файла `File`. Каждый раз при вызове `window.URL.createObjectURL()` (en-US), создаётся новый уникальный объект URL, даже если вы уже создали объект URL для этого файла. Каждый из них должен быть освобождён. В то время как они освобождаются автоматически когда документ выгружается, если ваша страница использует их динамически, вы должны освободить их явно вызовом `window.URL.revokeObjectURL()` (en-US):

```js
window.URL.revokeObjectURL(objectURL);
```

Пример: Использование URL объектов для отображения изображений
--------------------------------------------------------------

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

HTML, который представляет интерфейс, выглядит так:

```html
<input
 type="file"
 id="fileElem"
 multiple
 accept="image/\*"
 style="display:none"
 onchange="handleFiles(this.files)" />
<a href="#" id="fileSelect">Select some files</a>
<div id="fileList">
  <p>No files selected!</p>
</div>
```

Здесь определяется элемент файла `<input>`, а также ссылка, которая вызывает окно выбора файла, т.к. мы сделали элемент ввода файла скрытым, чтобы этот не слишком привлекательный элемент интерфейса не отображался. Об этом рассказывается в разделе Использование метода click() скрытых элементов выбора файла, как о методе вызова окна выбора файла.

Метод `handleFiles()` может быть реализован таким образом:

```js
window.URL = window.URL || window.webkitURL;

var fileSelect = document.getElementById("fileSelect"),
  fileElem = document.getElementById("fileElem"),
  fileList = document.getElementById("fileList");

fileSelect.addEventListener(
  "click",
  function (e) {
    if (fileElem) {
      fileElem.click();
    }
    e.preventDefault(); // prevent navigation to "#"
  },
  false,
);

function handleFiles(files) {
  if (!files.length) {
    fileList.innerHTML = "<p>No files selected!</p>";
  } else {
    var list = document.createElement("ul");
    for (var i = 0; i < files.length; i++) {
      var li = document.createElement("li");
      list.appendChild(li);

      var img = document.createElement("img");
      img.src = window.URL.createObjectURL(files[i]);
      img.height = 60;
      img.onload = function () {
        window.URL.revokeObjectURL(this.src);
      };
      li.appendChild(img);
      var info = document.createElement("span");
      info.innerHTML = files[i].name + ": " + files[i].size + " bytes";
      li.appendChild(info);
    }
  }
}
```

Он начинается с получения элемента `<div>` с ID `fileList`. Это блок, в который мы вставим наш список файлов, включая эскизы..

Если объект `FileList`, передаваемый в `handleFiles()` является `null`, то мы просто устанавливаем внутренний HTML блока в отображение текста "No files selected!". Иначе мы начинаем строить список файлов таким образом:

1. Создаётся новый элемент - неупорядоченный список (`<ul>`).
2. Этот новый элемент вставляется в блок `<div>` с помощью вызова его метода `element.appendChild()`.
3. Для каждого `File` в `FileList`, представляемого `files`:
    1. Создаём новый элемент пункта списка (`<li>`) и вставляем его в список.
    2. Создаём новый элемент изображения (`<img>`).
    3. Устанавливаем источник изображения в новый URL объекта, представляющий файл, используя `window.URL.createObjectURL()` (en-US) для создания URL на двоичный объект.
    4. Устанавливаем высоту изображения в 60 пикселей.
    5. Устанавливаем обработчик события загрузки изображения для освобождения URL объекта, т.к. после загрузки изображения он больше не нужен. Это делается вызовом метода `window.URL.revokeObjectURL()` (en-US), передавая в него строку URL объекта, которая указана в `img.src`.
    6. Добавляем новый элемент в список.
Пример: Загрузка файла, выбранного пользователем
------------------------------------------------

Ещё одна вещь, которую вы можете захотеть сделать – это позволить пользователю загрузить выбранный файл или файлы (такие, как изображения из предыдущего примера) на сервер. Это можно сделать асинхронно довольно просто.

### Создание заданий на загрузку

Продолжая пример с кодом, который строил эскизы в предыдущем примере, напомним, что каждому изображению эскиза присвоен класс CSS class `obj`, с соответствующим `File`, прикреплённым в атрибут `file`. Это позволяет нам очень просто выбрать все изображения, которые пользователь выбрал для загрузки используя `Document.querySelectorAll()`, как показано здесь:

```js
function sendFiles() {
  var imgs = document.querySelectorAll(".obj");

  for (var i = 0; i < imgs.length; i++) {
    new FileUpload(imgs[i], imgs[i].file);
  }
}
```

Строка 2 получает `NodeList` в переменную `imgs` со всеми элементами документа, имеющих класс CSS `obj`. В нашем случае все они будут эскизами изображений. Как только мы получим этот список, можно просто пройти по нему, создавая для каждого элемента новый экземпляр `FileUpload`. Каждый из них отвечает за загрузку соответствующего файла.

### Управление процессом загрузки файла

Функция `FileUpload` принимает на вход 2 параметра: элемент изображения и файл, из которого нужно читать данные изображения.

```js
function FileUpload(img, file) {
  const reader = new FileReader();
  this.ctrl = createThrobber(img);
  const xhr = new XMLHttpRequest();
  this.xhr = xhr;

  const self = this;
  this.xhr.upload.addEventListener(
    "progress",
    function (e) {
      if (e.lengthComputable) {
        const percentage = Math.round((e.loaded \* 100) / e.total);
        self.ctrl.update(percentage);
      }
    },
    false,
  );

  xhr.upload.addEventListener(
    "load",
    function (e) {
      self.ctrl.update(100);
      const canvas = self.ctrl.ctx.canvas;
      canvas.parentNode.removeChild(canvas);
    },
    false,
  );
  xhr.open(
    "POST",
    "http://demos.hacks.mozilla.org/paul/demos/resources/webservices/devnull.php",
  );
  xhr.overrideMimeType("text/plain; charset=x-user-defined-binary");
  reader.onload = function (evt) {
    xhr.send(evt.target.result);
  };
  reader.readAsBinaryString(file);
}
```

Функция `FileUpload()`, показанная выше, создаёт объект Throbber, который используется для отображения хода загрузки, а затем создаёт `XMLHttpRequest` для управления загрузкой данных.

Перед началом загрузки данных выполняются несколько шагов для подготовки:

1. На `XMLHttpRequest` устанавливается обработчик события `progress` для обновления индикатора хода загрузки новыми значениями процента выполнения, так что по мере хода загрузки, индикатор будет обновляться, отображая последнюю информацию.
2. На `XMLHttpRequest`'s устанавливается обработчик события `load` для установки индикатора загрузки в значение 100%, чтобы убедиться, что индикатор действительно установлен в 100% (в случае проблем детализации в ходе процесса). Затем обработчик удаляет индикатор загрузки, т.к. он более не нужен. Поэтому индикатор исчезает как только загрузка завершена.
3. Запрос на загрузку файла изображения открывается вызовом метода `XMLHttpRequest`'s `open()` для начала создания POST-запроса.
4. Тип MIME для загрузки устанавливается вызовом функции `XMLHttpRequest` `overrideMimeType()`. В этом случае мы используем общий тип MIME type; вам может быть нужно или не нужно вообще устанавливать тип MIME в зависимости от вашего случая.
5. Объект `FileReader` используется для преобразования файла в двоичную строку.
6. И в завершение, когда содержимое загружено, вызывается функция `XMLHttpRequest` `send()` для отправки содержимого файла.
### Асинхронная обработка процесса загрузки

```js
<?php
if (isset($_FILES['myFile'])) {
    // Example:
    move\_uploaded\_file($_FILES['myFile']['tmp\_name'], "uploads/" . $_FILES['myFile']['name']);
    exit;
}
?><!DOCTYPE html>
<html>
<head>
    <title>dnd binary upload</title>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <script type="text/javascript">
        function sendFile(file) {
            var uri = "/index.php";
            var xhr = new XMLHttpRequest();
            var fd = new FormData();

            xhr.open("POST", uri, true);
            xhr.onreadystatechange = function() {
                if (xhr.readyState == 4 && xhr.status == 200) {
                    // Handle response.
                    alert(xhr.responseText); // handle response.
                }
            };
            fd.append('myFile', file);
            // Initiate a multipart/form-data upload
            xhr.send(fd);
        }

        window.onload = function() {
            var dropzone = document.getElementById("dropzone");
            dropzone.ondragover = dropzone.ondragenter = function(event) {
                event.stopPropagation();
                event.preventDefault();
            }

            dropzone.ondrop = function(event) {
                event.stopPropagation();
                event.preventDefault();

                var filesArray = event.dataTransfer.files;
                for (var i=0; i<filesArray.length; i++) {
                    sendFile(filesArray[i]);
                }
            }
        }
    </script>
</head>
<body>
    <div>
        <div id="dropzone" style="margin:30px; width:500px; height:300px; border:1px dotted grey;">Drag & drop your file here...</div>
    </div>
</body>
</html>
```

Пример: Использование URL объектов для отображения PDF
------------------------------------------------------

URL объектов могут быть использованы не только для изображений! Также этот приём можно использовать и для других ресурсов, которые могут отображаться браузером, например, файлы PDF.

В Firefox, для того чтобы файл PDF появился в iframe и не предлагался для загрузки, нужно установить `pdfjs.disabled` в значение `false`
Non-standard
.

```html
<iframe id="viewer"></iframe>
```

А здесь изменение атрибута `src`:

```js
var obj_url = window.URL.createObjectURL(blob);
var iframe = document.getElementById("viewer");
iframe.setAttribute("src", obj_url);
window.URL.revokeObjectURL(obj_url);
```

Пример: Использование URL объектов с другими типами файлов
----------------------------------------------------------

Вы можете таким же образом работать с файлами в других форматах. Ниже приведён пример как загружается видео:

```js
var video = document.getElementById("video");
var obj_url = window.URL.createObjectURL(blob);
video.src = obj_url;
video.play();
window.URL.revokeObjectURL(obj_url);
```

Спецификации
------------

* File upload state (Рабочие материалы HTML 5)
* File API
Дополнительные ссылки
---------------------

* `File`
* `FileList`
* `FileReader`
* `URL`
* `XMLHttpRequest`
* Using XMLHttpRequest
* Using the DOM File API in chrome code
* jQuery JavaScript library


WebGLRenderingContext.shaderSource() - Интерфейсы веб API

WebGLRenderingContext.shaderSource()
====================================

**`WebGLRenderingContext.shaderSource()`** метод WebGL API записывает исходный код шейдера в шейдерную программу `WebGLShader` (en-US).

Синтаксис
---------
```

void gl.shaderSource(shader, source);
```

### Параметры

shader

A `WebGLShader` (en-US) объект в который записывается исходный код.

source

A `DOMString` исходный код шейдера на GLSL который будет записан.

### Возвращаемое значение

None.

Примеры
-------

```js
var shader = gl.createShader(gl.VERTEX\_SHADER);
gl.shaderSource(shader, originalSource);

var source = gl.getShaderSource(shader);
```

Спецификация
------------

| Specification |
| --- |
| WebGL Specification # 5.14.9 |

Совместимость с браузерами
--------------------------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

Смотрите также
--------------

* `WebGLRenderingContext.createShader()` (en-US)
* `WebGLRenderingContext.isShader()` (en-US)
* `WebGLRenderingContext.deleteShader()` (en-US)
* `WebGLRenderingContext.getShaderSource()` (en-US)


WebGLRenderingContext.bindTexture() - Интерфейсы веб API

WebGLRenderingContext.bindTexture()
===================================

**`WebGLRenderingContext.bindTexture()`** метод WebGL API связывает `WebGLTexture` (en-US) с `target`.

Синтаксис
---------
```

void gl.bindTexture(target, texture);
```

### Параметры

target

`GLenum` (en-US) указывает тип объекта `texture` для связывания. Возможные значения:

* `gl.TEXTURE_2D`: двухмерная текстура.
* `gl.TEXTURE_CUBE_MAP`: кубическая текстура.
* При использовании WebGL 2 context (en-US), дополнительно доступны:
    + `gl.TEXTURE_3D`: трёхмерная текстура.
    + `gl.TEXTURE_2D_ARRAY`: массив двумерных текстур.

texture

`WebGLTexture` (en-US) объект связывания

### Возвращаемое значение

None.

### Исключения

`gl.INVALID_ENUM` исключение если `target` не `gl.TEXTURE_2D`, `gl.TEXTURE_CUBE_MAP`, `gl.TEXTURE_3D`, или `gl.TEXTURE_2D_ARRAY`.

Примеры
-------

### Привязка текстуры

```js
var canvas = document.getElementById("canvas");
var gl = canvas.getContext("webgl");
var texture = gl.createTexture();

gl.bindTexture(gl.TEXTURE\_2D, texture);
```

### Получить текущую привязку

Для проверки текущей привязки текстуры, вызовите `gl.TEXTURE_BINDING_2D` или `gl.TEXTURE_BINDING_CUBE_MAP`.

```js
gl.getParameter(gl.TEXTURE\_BINDING\_2D);
```

Спецификации
------------

| Specification |
| --- |
| WebGL Specification # 5.14.8 |
| WebGL 2.0 Specification # 3.7.1 |

Совместимость с браузерами
--------------------------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

Смотрите также
--------------

* `WebGLRenderingContext.createTexture()` (en-US)
* `WebGLRenderingContext.deleteTexture()` (en-US)
* `WebGLRenderingContext.isTexture()` (en-US)
* `WebGLRenderingContext.texImage2D()` (en-US)


WebGLRenderingContext.clear() - Интерфейсы веб API

WebGLRenderingContext.clear()
=============================

Метод **`WebGLRenderingContext.clear()`** из библиотеки WebGL API очищает буфер заданными значениями.

Заданные значения могут быть установлены `clearColor()`, `clearDepth()` (en-US) или `clearStencil()` (en-US).

The scissor box, dithering, and buffer writemasks can affect the `clear()` method.

Синтаксис
---------
```

void gl.clear(mask);
```

### Параметры

`mask`

Побитовая маска ИЛИ `GLbitfield` (en-US) указывает какие конкретно буферы нужно очистить. Возможные значения:

* `gl.COLOR_BUFFER_BIT`
* `gl.DEPTH_BUFFER_BIT`
* `gl.STENCIL_BUFFER_BIT`

### Возвращаемое значение

Ничего.

### Исключения

Если *mask* не является ни одним из перечисленных значений, то генерируется ошибка `gl.INVALID_ENUM`.

Примеры
-------

Метод `clear()` принимает несколько значений.

```js
gl.clear(gl.DEPTH\_BUFFER\_BIT);
gl.clear(gl.DEPTH\_BUFFER\_BIT | gl.COLOR\_BUFFER\_BIT);
```

Чтобы получить текущее значение очистки буфера, нужно воспользоваться следующими константами: `COLOR_CLEAR_VALUE`, `DEPTH_CLEAR_VALUE`, и `STENCIL_CLEAR_VALUE`.

```js
gl.getParameter(gl.COLOR\_CLEAR\_VALUE);
gl.getParameter(gl.DEPTH\_CLEAR\_VALUE);
gl.getParameter(gl.STENCIL\_CLEAR\_VALUE);
```

Спецификации
------------

| Specification |
| --- |
| WebGL Specification # 5.14.11 |

Совместимость с браузерами
--------------------------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

Смотрите также
--------------

* `WebGLRenderingContext.clearColor()`
* `WebGLRenderingContext.clearDepth()` (en-US)
* `WebGLRenderingContext.clearStencil()` (en-US)


WebGLRenderingContext.canvas - Интерфейсы веб API

WebGLRenderingContext.canvas
============================

`Свойство WebGLRenderingContext.canvas` доступно только для чтения. Возвращает ссылку на объекты `HTMLCanvasElement` или `OffscreenCanvas` (en-US) связанные с установленным контекстом отрисовки. Если объект `<canvas>` или `OffscreenCanvas` (en-US) не связан с контекстом, то возвращается значение `null`.

Syntax
------
```

gl.canvas;
```

### Return value

Either a `HTMLCanvasElement` or `OffscreenCanvas` (en-US) object or `null`.

Examples
--------

### Canvas element

Given this `<canvas>` element:

```html
<canvas id="canvas"></canvas>
```

You can get back a reference to it from the `WebGLRenderingContext` using the `canvas` property:

```js
var canvas = document.getElementById("canvas");
var gl = canvas.getContext("webgl");
gl.canvas; // HTMLCanvasElement
```

### Offscreen canvas

Example using the experimental `OffscreenCanvas` (en-US) object.

```js
var offscreen = new OffscreenCanvas(256, 256);
var gl = offscreen.getContext("webgl");
gl.canvas; // OffscreenCanvas
```

Specifications
--------------

| Specification |
| --- |
| WebGL Specification # DOM-WebGLRenderingContext-canvas |

Совместимость с браузерами
--------------------------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

See also
--------

* `CanvasRenderingContext2D.canvas`
* `OffscreenCanvas` (en-US)


WebGLRenderingContext.uniform[1234][fi][v]() - Интерфейсы веб API

WebGLRenderingContext.uniform[1234][fi][v]()
============================================

**`WebGLRenderingContext.uniform[1234][fi][v]()`** метод WebGL API устанавливает значение для постоянных переменных Uniform.

**Примечание:** Многие из описанных в этом разделе функцию имеют расширенные интерфейсы WebGL 2, которые можно найти `WebGL2RenderingContext.uniform[1234][uif][v]()` (en-US).

Синтаксис
---------
```

gl.uniform1f (floatUniformLoc, v); // для float
gl.uniform1fv(floatUniformLoc, [v]); // для float или массива float
gl.uniform2f (vec2UniformLoc, v0, v1); // для vec2
gl.uniform2fv(vec2UniformLoc, [v0, v1]); // для vec2 или массива vec2
gl.uniform3f (vec3UniformLoc, v0, v1, v2); // для vec3
gl.uniform3fv(vec3UniformLoc, [v0, v1, v2]); // для vec3 или массива vec3
gl.uniform4f (vec4UniformLoc, v0, v1, v2, v4); // для vec4
gl.uniform4fv(vec4UniformLoc, [v0, v1, v2, v4]); // для vec4 или массива vec4

gl.uniform1i (intUniformLoc, v); // для int
gl.uniform1iv(intUniformLoc, [v]); // для int или массива int
gl.uniform2i (ivec2UniformLoc, v0, v1); // для ivec2
gl.uniform2iv(ivec2UniformLoc, [v0, v1]); // для ivec2 или массива ivec2
gl.uniform3i (ivec3UniformLoc, v0, v1, v2); // для ivec3
gl.uniform3iv(ivec3UniformLoc, [v0, v1, v2]); // для ivec3 или массива ivec3
gl.uniform4i (ivec4UniformLoc, v0, v1, v2, v4); // для ivec4
gl.uniform4iv(ivec4UniformLoc, [v0, v1, v2, v4]); // для ivec4 или массива ivec4

gl.uniform1i (sampler2DUniformLoc, v); // для sampler2D (текстуры)
gl.uniform1iv(sampler2DUniformLoc, [v]); // для sampler2D или массива sampler2D

gl.uniform1i (samplerCubeUniformLoc, v); // для samplerCube (текстуры)
gl.uniform1iv(samplerCubeUniformLoc, [v]); // для samplerCube или массива samplerCube
```

### Параметры

location

`WebGLUniformLocation` (en-US) объект содержащий uniform атрибут для его изменения.

`value, v0, v1, v2, v3`

Новое значение для uniform переменной. Допустимые типы:

* Тип float `Number` для этого типа (методы с "f").
* Последовательность чисел с плавающей точкой (пример `Float32Array` или `Array` чисел) для векторных методов с плавающей точкой (методы с "fv").
* Тип `Number` для этого типа (методы с "i").
* `Int32Array` вектор чисел `Number` (методы с "iv").

### Возвращаемое значение

None.

Примеры
-------

```js
GL.uniform1f(GL.getUniformLocation(PROGRAM, "u\_time"), timeStamp / 1000.0);
```

Спецификация
------------

| Specification |
| --- |
| WebGL Specification # 5.14.10 |

Совместимость с браузерами
--------------------------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

Смотрите также
--------------

* `WebGLRenderingContext.uniformMatrix()` (en-US)


WebGLRenderingContext.clearColor() - Интерфейсы веб API

WebGLRenderingContext.clearColor()
==================================

Метод **`WebGLRenderingContext.clearColor()`** из WebGL API определяет значения, используемые для задания цвета во время очистки буферов цвета.

This specifies what color values to use when calling the `clear()` method. Эти значения находятся в пределах от 0 до 1.

Syntax
------
```

void gl.clearColor(red, green, blue, alpha);
```

### Parameters

`red`

A `GLclampf` (en-US) specifying the red color value used when the color buffers are cleared. Default value: 0.

`green`

A `GLclampf` (en-US) specifying the green color value used when the color buffers are cleared. Default value: 0.

`blue`

A `GLclampf` (en-US) specifying the blue color value used when the color buffers are cleared. Default value: 0.

`alpha`

A `GLclampf` (en-US) specifying the alpha (transparency) value used when the color buffers are cleared. Default value: 0.

### Return value

None.

Examples
--------

```js
gl.clearColor(1, 0.5, 0.5, 3);
```

To get the current clear color, query the `COLOR_CLEAR_VALUE` constant which returns a `Float32Array`.

```js
gl.getParameter(gl.COLOR\_CLEAR\_VALUE);
// Float32Array[1, 0.5, 0.5, 1]
```

Specifications
--------------

| Specification |
| --- |
| WebGL Specification # 5.14.3 |

Совместимость с браузерами
--------------------------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

See also
--------

* `WebGLRenderingContext.clear()`
* `WebGLRenderingContext.clearDepth()` (en-US)
* `WebGLRenderingContext.clearStencil()` (en-US)


WebGLRenderingContext.enable() - Интерфейсы веб API

WebGLRenderingContext.enable()
==============================

Метод **`WebGLRenderingContext.enable()`** из WebGL API активирует определённые возможности WebGL для текущего контекста.

Синтаксис
---------
```

void gl.enable(cap);
```

### Параметры

`cap`

A `GLenum` (en-US) specifying which WebGL capability to enable. Possible values:

| Константа | Описание |
| --- | --- |
| `gl.BLEND` | Активирует смешение значений цветов вычисленного фрагмента. Смотри `WebGLRenderingContext.blendFunc()` (en-US). |
| `gl.CULL_FACE` | Активирует отбраковку полигонов. Смотри `WebGLRenderingContext.cullFace()` (en-US). |
| `gl.DEPTH_TEST` | Активирует сравнения глубин и обновления для буфера глубины. Смотри `WebGLRenderingContext.depthFunc()` (en-US). |
| `gl.DITHER` | Activates dithering of color components before they get written to the color buffer. |
| `gl.POLYGON_OFFSET_FILL` | Activates adding an offset to depth values of polygon's fragments. See `WebGLRenderingContext.polygonOffset()` (en-US). |
| `gl.SAMPLE_ALPHA_TO_COVERAGE` | Activates the computation of a temporary coverage value determined by the alpha value. |
| `gl.SAMPLE_COVERAGE` | Activates ANDing the fragment's coverage with the temporary coverage value. See `WebGLRenderingContext.sampleCoverage()` (en-US). |
| `gl.SCISSOR_TEST` | Activates the scissor test that discards fragments that are outside of the scissor rectangle. See `WebGLRenderingContext.scissor()` (en-US). |
| `gl.STENCIL_TEST` | Activates stencil testing and updates to the stencil buffer. See `WebGLRenderingContext.stencilFunc()` (en-US). |

When using a WebGL 2 context (en-US), the following values are available additionally:

| Constant | Description |
| --- | --- |
| `gl.RASTERIZER_DISCARD` | Primitives are discarded immediately before the rasterization stage, but after the optional transform feedback stage. `gl.clear()` commands are ignored. |

### Return value

None.

Examples
--------

```js
gl.enable(gl.DITHER);
```

To check if a capability is enabled, use the `WebGLRenderingContext.isEnabled()` (en-US) method:

```js
gl.isEnabled(gl.DITHER);
// true
```

Specifications
--------------

| Specification |
| --- |
| WebGL Specification # 5.14.3 |

Совместимость с браузерами
--------------------------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

See also
--------

* `WebGLRenderingContext.disable()` (en-US)
* `WebGLRenderingContext.isEnabled()` (en-US)


WebGLRenderingContext.bindBuffer() - Интерфейсы веб API

WebGLRenderingContext.bindBuffer()
==================================

**`ebGLRenderingContext.bindBuffer()`** метод WebGL API связывает `WebGLBuffer` (en-US) c точкой связывания(Атрибут регистром).

Синтаксис
---------
```

void gl.bindBuffer(target, buffer);
```

### Параметры

target

`GLenum` (en-US) определяет точку связывания (target). Возможные значения:

* `gl.ARRAY_BUFFER`: Буфер содержащий вершинные атрибуты, такие как координаты, текстурные координаты(UV) или цвет вершины.
* `gl.ELEMENT_ARRAY_BUFFER`: Буфер использующий для индексирования элементов.
* When using a WebGL 2 context (en-US), the following values are available additionally:
    + `gl.COPY_READ_BUFFER`: Buffer for copying from one buffer object to another.
    + `gl.COPY_WRITE_BUFFER`: Buffer for copying from one buffer object to another.
    + `gl.TRANSFORM_FEEDBACK_BUFFER`: Buffer for transform feedback operations.
    + `gl.UNIFORM_BUFFER`: Buffer used for storing uniform blocks.
    + `gl.PIXEL_PACK_BUFFER`: Buffer used for pixel transfer operations.
    + `gl.PIXEL_UNPACK_BUFFER`: Buffer used for pixel transfer operations.

buffer

`WebGLBuffer` (en-US) с которым осуществляется связывание.

### Return value

Нет.

### Exceptions

Only one target can be bound to a given `WebGLBuffer` (en-US). An attempt to bind the buffer to another target will throw an `INVALID_OPERATION` error and the current buffer binding will remain the same.

Examples
--------

### Binding a buffer to a target

```js
var canvas = document.getElementById("canvas");
var gl = canvas.getContext("webgl");
var buffer = gl.createBuffer();

gl.bindBuffer(gl.ARRAY\_BUFFER, buffer);
```

### Getting current bindings

To check the current buffer bindings, query the `ARRAY_BUFFER_BINDING` and `ELEMENT_ARRAY_BUFFER_BINDING` constants.

```js
gl.getParameter(gl.ARRAY\_BUFFER\_BINDING);
gl.getParameter(gl.ELEMENT\_ARRAY\_BUFFER\_BINDING);
```

Specifications
--------------

| Specification |
| --- |
| WebGL Specification # 5.14.5 |
| WebGL 2.0 Specification # 3.7.1 |

Совместимость с браузерами
--------------------------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

See also
--------

* `WebGLRenderingContext.createBuffer()` (en-US)
* `WebGLRenderingContext.deleteBuffer()` (en-US)
* `WebGLRenderingContext.isBuffer()` (en-US)
* Other buffers: `WebGLFramebuffer` (en-US), `WebGLRenderbuffer` (en-US)


WebGLRenderingContext.compileShader() - Интерфейсы веб API

WebGLRenderingContext.compileShader()
=====================================

**WebGLRenderingContext.compileShader()** метод WebGL API компилирующий исходный код GLSL шейдера в бинарные данные для использования программой `WebGLProgram`.

Синтаксис
---------
```

void gl.compileShader(shader);
```

### Параметры

`shader`

Вершинный или фрагментный шейдер `WebGLShader` (en-US).

Примеры
-------

```js
var shader = gl.createShader(gl.VERTEX\_SHADER);
gl.shaderSource(shader, shaderSource);
gl.compileShader(shader);
```

Спецификация
------------

| Specification |
| --- |
| WebGL Specification # 5.14.9 |

Совместимость с браузерами
--------------------------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

Смотрите также
--------------

* `WebGLProgram`
* `WebGLShader` (en-US)
* `WebGLRenderingContext.attachShader()` (en-US)
* `WebGLRenderingContext.createProgram()` (en-US)
* `WebGLRenderingContext.createShader()` (en-US)
* `WebGLRenderingContext.deleteProgram()` (en-US)
* `WebGLRenderingContext.deleteShader()` (en-US)
* `WebGLRenderingContext.detachShader()` (en-US)
* `WebGLRenderingContext.getAttachedShaders()` (en-US)
* `WebGLRenderingContext.getProgramParameter()` (en-US)
* `WebGLRenderingContext.getProgramInfoLog()` (en-US)
* `WebGLRenderingContext.getShaderParameter()` (en-US)
* `WebGLRenderingContext.getShaderPrecisionFormat()` (en-US)
* `WebGLRenderingContext.getShaderInfoLog()`
* `WebGLRenderingContext.getShaderSource()` (en-US)
* `WebGLRenderingContext.isProgram()` (en-US)
* `WebGLRenderingContext.isShader()` (en-US)
* `WebGLRenderingContext.linkProgram()` (en-US)
* `WebGLRenderingContext.shaderSource()`
* `WebGLRenderingContext.useProgram()` (en-US)
* `WebGLRenderingContext.validateProgram()` (en-US)


WebGLRenderingContext.getShaderInfoLog() - Интерфейсы веб API

WebGLRenderingContext.getShaderInfoLog()
========================================

**WebGLRenderingContext.getShaderInfoLog** возвращает логи для указанной шейдерной программы `WebGLShader` (en-US). Оно содержит предупреждения, информацию для отладки и информацию о компиляции.

Синтаксис
---------
```

gl.getShaderInfoLog(shader);
```

### Параметры

shader

Шейдер `WebGLShader` (en-US) чьи логи мы запрашиваем.

### Возвращаемое значение

`DOMString` может содержать диагностические сообщения, предупреждения и другую информацию о последней операции компиляции. Когда `WebGLShader` (en-US) объект создан, его информационный журнал будет строкой длинной 0.

Примеры
-------

### Проверить сообщения компиляции

```js
/\* Загружаем исходный код программы. \*/
gl.shaderSource(shader, shaderCode);

/\* Компилируем программу. \*/
gl.compileShader(shader);

/\* Получаем список сообщений \*/
var message = gl.getShaderInfoLog(shader);

if (message.length > 0) {
  /\* Сообщение может быть ошибкой или предупреждением \*/
  throw message;
}
```

Спецификация
------------

| Specification |
| --- |
| WebGL Specification # 5.14.9 |

Совместимость с браузерами
--------------------------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

Смотрите также
--------------

* `WebGLRenderingContext.getShaderParameter()` (en-US) – использование с `gl.COMPILE_STATUS` для проверки ошибок компиляции.
* `WebGLRenderingContext.getError()` (en-US)


WebGLRenderingContext.activeTexture() - Интерфейсы веб API

WebGLRenderingContext.activeTexture()
=====================================

**`WebGLRenderingContext.activeTexture()`** метод WebGL API указывает какую текстуру сделать активной.

Синтаксис
---------
```

void gl.activeTexture(texture);
```

### Параметры

`texture`

Номер текстуры которую необходимо активировать. Значение `gl.TEXTUREI` где *I* значение в диапазоне от 0 до `gl.MAX_COMBINED_TEXTURE_IMAGE_UNITS - 1`.

### Возвращаемое значение

None.

### Исключения

Если *texture* не относится к `gl.TEXTUREI`, где *I* значение в диапазоне от 0 до `gl.MAX_COMBINED_TEXTURE_IMAGE_UNITS - 1`, то получаем исключение `gl.INVALID_ENUM` .

Примеры
-------

Вызов со значением `gl.TEXTURE1` выберет текстуру в качестве текущей. Последующие вызовы будут изменять эту текстуру.

```js
gl.activeTexture(gl.TEXTURE1);
```

Количество текстур зависит от реализации, вы можете получить количество текстур с помощью константы `MAX_COMBINED_TEXTURE_IMAGE_UNITS`. Согласно спецификации не менее 8.

```js
gl.getParameter(gl.MAX\_COMBINED\_TEXTURE\_IMAGE\_UNITS);
```

чтобы получить текущую активную текстуру вызовите `gl.getParameter` с константой `ACTIVE_TEXTURE`.

```js
gl.activeTexture(gl.TEXTURE0);
gl.getParameter(gl.ACTIVE\_TEXTURE);
// вернёт "33984" (0x84C0, gl.TEXTURE0 enum value)
```

Спецификация
------------

| Specification |
| --- |
| WebGL Specification # 5.14.3 |

Совместимость с браузерами
--------------------------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

Смотрите также
--------------

* `WebGLRenderingContext.getParameter()` (en-US)


Node.isEqualNode() - Интерфейсы веб API

Node.isEqualNode()
==================

**`Node.isEqualNode()`** проверяет, равны ли два узла. Два узла равны, когда они имеют один и тот же тип, определяющий характеристики (для элементов это будет их идентификатор, количество потомков и т. д.), Его атрибуты совпадают и т. д. Конкретный набор точек данных, которые должны совпадать, зависит от типов узлов.

Синтаксис
---------
```

var isEqualNode = node.isEqualNode(otherNode);
```

* `otherNode`: Узел `Node` с которым надо сравнить.
Пример
------

В этом примере мы создаём три блока `<div>`. Первый и третий имеют одинаковое содержание и атрибуты, в то время как второй отличается. Затем мы запускаем некоторый JavaScript-код для сравнения узлов с помощью isEqualNode () и выводим результаты.

### HTML

```html
<div>This is the first element.</div>
<div>This is the second element.</div>
<div>This is the first element.</div>

<p id="output"></p>
```

```
#output {
  width: 440px;
  border: 2px solid black;
  border-radius: 5px;
  padding: 10px;
  margin-top: 20px;
  display: block;
}
```

### JavaScript

```js
let output = document.getElementById("output");
let divList = document.getElementsByTagName("div");

output.innerHTML +=
  "div 0 equals div 0: " + divList[0].isEqualNode(divList[0]) + "<br/>";
output.innerHTML +=
  "div 0 equals div 1: " + divList[0].isEqualNode(divList[1]) + "<br/>";
output.innerHTML +=
  "div 0 equals div 2: " + divList[0].isEqualNode(divList[2]) + "<br/>";
```

### Results

Спецификации
------------

| Specification |
| --- |
| DOM Standard # ref-for-dom-node-isequalnode① |

Совместимость с браузерами
--------------------------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.


Node.compareDocumentPosition - Интерфейсы веб API

Node.compareDocumentPosition
============================

Аннотация
---------

Сравнивает позицию текущего узла и другого узла в любом другом документе.

Синтаксис
---------
```

node.compareDocumentPosition( otherNode )
```

* `node` это узел, который сравнивается
* `otherNode` это узел, с которым идёт сравнение.

Возвращаемое значение вычисляется как отношение, которое имеется между `otherNode` и `node`.

Примечание
----------

Возвращаемое значение - это битовая маска со следующими значениями:

| Имя | Значение |
| --- | --- |
| `DOCUMENT_POSITION_DISCONNECTED` | 1 |
| `DOCUMENT_POSITION_PRECEDING` | 2 |
| `DOCUMENT_POSITION_FOLLOWING` | 4 |
| `DOCUMENT_POSITION_CONTAINS` | 8 |
| `DOCUMENT_POSITION_CONTAINED_BY` | 16 |
| `DOCUMENT_POSITION_IMPLEMENTATION_SPECIFIC` | 32 |

Пример
------

```js
var head = document.getElementsByTagName("head").item(0);
if (
  head.compareDocumentPosition(document.body) & Node.DOCUMENT\_POSITION\_FOLLOWING
) {
  console.log("well-formed document");
} else {
  console.log("<head> is not before <body>");
}
```

**Примечание:** *Из-за того, что результат, возвращаемый* `compareDocumentPosition`, является битовой маской, побитовый оператор и (en-US) должен использоваться для осмысленных значений.

Спецификации
------------

| Specification |
| --- |
| DOM Standard # ref-for-dom-node-comparedocumentposition① |

Совместимость с браузерами
--------------------------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

Смотрите также
--------------

* `Node.contains` (en-US)
* John Resig - Comparing Document Position


Node.isConnected - Интерфейсы веб API

Node.isConnected
================

Baseline Widely available
-------------------------

This feature is well established and works across many devices and browser versions. It’s been available across browsers since January 2020.

* Learn more
* See full compatibility
* Report feedback
The **`isConnected`** read-only property of the `Node` interface returns a boolean indicating whether the Node is connected (directly or indirectly) to the context object, for example the `Document` object in the case of the normal DOM, or the `ShadowRoot` (en-US) in the case of a shadow DOM.

Синтаксис
---------
```

var isItConnected = nodeObjectInstance.isConnected
```

### Return value

A `Boolean` (en-US) that is `true` if the node is connected to its relevant context object, and `false` if not.

Пример
------

Стандартный DOM пример:

```js
let test = document.createElement("p");
console.log(test.isConnected); // returns false
document.body.appendChild(test);
console.log(test.isConnected); // returns true
```

A shadow DOM example:

```js
// Create a shadow root
var shadow = this.attachShadow({ mode: "open" });

// Create some CSS to apply to the shadow dom
var style = document.createElement("style");
console.log(style.isConnected); // returns false

style.textContent =
  ".wrapper {" +
  "position: relative;" +
  "}" +
  ".info {" +
  "font-size: 0.8rem;" +
  "width: 200px;" +
  "display: inline-block;" +
  "border: 1px solid black;" +
  "padding: 10px;" +
  "background: white;" +
  "border-radius: 10px;" +
  "opacity: 0;" +
  "transition: 0.6s all;" +
  "position: absolute;" +
  "bottom: 20px;" +
  "left: 10px;" +
  "z-index: 3;" +
  "}" +
  // attach the created style element to the shadow dom

  shadow.appendChild(style);
console.log(style.isConnected); // returns true
```

Спецификация
------------

| Specification |
| --- |
| DOM Standard # ref-for-dom-node-isconnected① |

Совместимость с браузерами
--------------------------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.


Node.baseURI - Интерфейсы веб API

Node.baseURI
============

Свойство **`Node.baseURI`** только для чтения, возвращающее абсолютный базовый URL узла.

Базовый URL используется для разрешения относительных URLs, когда браузеру нужно получить абсолютный URL, например, когда обрабатывает элемент HTML `<img>`, `src` атрибут или XML `xlink:href` атрибут.

В самом простом случае, базовый URL это просто местонахождение документа, но это может зависеть от многих факторов, включая элемент `<base>` в HTML и атрибут `xml:base` (en-US) в XML.

Синтаксис
---------
```

var baseURI = node.baseURI;
```

* `baseURI` это `DOMString` представляющий базовый URL обусловленный `Node`. Может быть `null` если не удалось получить абсолютный URI
* `node.baseURI` только для чтения.
* `node.baseURI` может измениться со временем (с.м. ниже).
Подробности
-----------

### Базовый URL документа

Базовый URL *документа* по умолчанию, адрес документа (как отображено в браузере и доступно в `window.location`), но может измениться по умолчанию:

* Когда HTML `<base>` тег найден в документе;
* Когда этот новый документ создан динамически.

Смотрите Раздел базовый URLs в действующем стандарте HTML для уточнения деталей.

Вы можете использовать ``document`.baseURI` для получения базового URL документа. Заметим, что получение базового URL для документа, может возвращать различные URLs в течение долгого времени, если `<base>` теги или местонахождение документа изменилось.

### Базовый URL элемента

Базовый URL *элемента* в HTML обычно равен базовому URL документу узла.

Если документ содержит атрибуты `xml:base` (en-US) (которые вы не должны использовать в документах HTML), `element.baseURI` принимает во внимание `xml:base` атрибуты родительского элемента, когда вычисляет базовый URL. Для уточнения деталей смотрите xml:base (en-US).

Вы можете использовать ``element`.baseURI` для получения базового URL of элемента.

Спецификации
------------

| Specification |
| --- |
| DOM Standard # ref-for-dom-node-baseuri① |

Совместимость с браузерами
--------------------------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

Смотрите также
--------------

* `<base>` element (HTML)
* `xml:base` (en-US) атрибуты (XML документы).
* `Node.baseURIObject` (en-US) - вариант этого API для Mozilla дополнений и внутреннего кода. Возвращает базовый URL как `nsIURI`.


Node.isDefaultNamespace() - Интерфейсы веб API

Node.isDefaultNamespace()
=========================

Метод **`Node.isDefaultNamespace()`** принимает URI пространства имён в качестве аргумента и возвращает `Boolean` со значением `true` если пространство имён является пространством имён данного узла по умолчанию или `false` если нет.

Синтаксис
---------
```

result = node.isDefaultNamespace(namespaceURI)
```

* `result` содержит в себе возвращаемое значение `true` или `false`.
* `namespaceURI` это строка представляющая собой пространство имён, на которое элемент будет проверен.
Пример
------

```js
var XULNS = "http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul";
var el = document.getElementsByTagNameNS(XULNS, "textbox")[0];

alert(el.isDefaultNamespace(XULNS)); // true
```

Спецификации
------------

| Specification |
| --- |
| DOM Standard # dom-node-isdefaultnamespace |

Совместимость с браузерами
--------------------------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.


Node.insertBefore() - Интерфейсы веб API

Node.insertBefore()
===================

Метод **`Node.insertBefore()`** добавляет элемент в список дочерних элементов родителя перед указанным элементом.

Синтаксис
---------
```

var insertedElement = parentElement.insertBefore(newElement, referenceElement);
```

В Mozilla Firefox, если referenceElement не задан или равен null, newElement вставляется в конец списка дочерних элементов. В IE, referenceElement равный undefined, сгенерируется исключение "Invalid argument", в то время как Chrome сгенерирует исключение "Uncaught TypeError", ожидая 2 аргумента.

* `insertedElement` Вставленный элемент.
* `parentElement` Родитель для нового элемента.
* `newElement` Элемент для вставки.
* `referenceElement` Элемент, перед которым будет вставлен `newElement`.
Пример
------

```html
<div id="parentElement">
  <span id="childElement">foo bar</span>
</div>

<script>
 // Создаём новый <span>
 var sp1 = document.createElement("span");

 // Получаем ссылку на элемент, перед которым мы хотим вставить sp1
 var sp2 = document.getElementById("childElement");
 //Получаем ссылку на родителя sp2
 var parentDiv = sp2.parentNode;

 // Вставляем sp1 перед sp2
 parentDiv.insertBefore(sp1, sp2);
</script>
```

Однако нет метода insertAfter. Он может быть заменён использованием метода insertBefore в связке с `nextSibling` (en-US).

В предыдущем примере sp1 может быть вставлен после sp2 следующим образом:
```

parentDiv.insertBefore(sp1, sp2.nextSibling);
```

Если `sp2` не имеет следующего элемента, то он будет последним дочерним элементом, `sp2.nextSibling` вернёт `null`, а `sp1` вставится в конец дочернего узла (сразу после sp2).

Пример 2
--------

Вставка элемента перед первым дочерним элементом с помощью firstChild (en-US).

```js
// Получаем ссылку на элемент в который мы хотим добавить новый элемент
var parentElement = document.getElementById("parentElement");
// Получаем ссылку на первый дочерний элемент
var theFirstChild = parentElement.firstChild;

// Создаём новый элемент, который будем добавлять
var newElement = document.createElement("div");

// Вставляем новый элемент перед первым дочерним элементом
parentElement.insertBefore(newElement, theFirstChild);
```

Когда у родителя нет первого дочернего элемента, `firstChild` вернёт `null`. Новый элемент всё равно будет выставляться после последнего дочернего элемента. Но так как родитель не имеет первого дочернего элемента, то он не будет иметь и последнего. Следовательно, после добавления в него элемента, этот элемент будет единственным дочерним элементом.

Спецификации
------------

| Specification |
| --- |
| DOM Standard # dom-node-insertbefore |

Совместимость с браузерами
--------------------------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.


Node.nextSibling - Интерфейсы веб API

Node.nextSibling
================

Свойство **`Node.nextSibling`** используется только для чтения и возвращает узел, непосредственно следующий за данным узлом в списке `childNodes` его родительского элемента, или `null` если данный узел последний в этом списке.

Синтаксис
---------
```

nextNode = node.nextSibling
```

Примечания
----------

 Браузеры, основанные на Gecko, вставляют текстовые узлы в документ для представления пробелов в разметке.
 Поэтому узел, полученный, например, при использовании `Node.firstChild` или `Node.previousSibling` может относиться к
 пробелу, а не к тому элементу, который автор хотел получить.

 Смотрите Пробел в DOM (en-US) и
 W3C DOM 3 FAQ: Почему некоторые текстовые узлы пустые?
 для дополнительной информации.

Пример
------

```html
<div id="div-01">Вот div-01</div>
<div id="div-02">Вот div-02</div>

<script type="text/javascript">
 var el = document.getElementById("div-01").nextSibling,
 i = 1;

 console.log("Потомки div-01:");

 while (el) {
 console.log(i + ". " + el.nodeName);
 el = el.nextSibling;
 i++;
 }
</script>

<!--
 Следующий пример напишет в консоль:

 Потомки div-01:

 1. #text
 2. DIV
 3. #text
 4. SCRIPT

-->
```

В приведённом выше примере вы можете видеть, что `#text` узлы вставляются в DOM, где между тегами встречаются пробелы (т.е. после закрывающего тега элемента и до открывающего тега рядом). Не создаётся пробелов между элементами, вставленных с помощью `document.write`

Возможность включения текстовых узлов в DOM должна быть разрешена, когда DOM обходится с помощью `nextSibling`. Смотрите раздел "Примечания".

Спецификации
------------

* DOM Level 1 Core: nextSibling
* DOM Level 2 Core: nextSibling
Смотрите также
--------------

* `Element.nextElementSibling`


Node.appendChild - Интерфейсы веб API

Node.appendChild
================

Аннотация
---------

**`Node.appendChild()`** добавляет узел в конец списка дочерних элементов указанного родительского узла. Если данный дочерний элемент является ссылкой на существующий узел в документе, то функция `appendChild()` перемещает его из текущей позиции в новую позицию (нет необходимости удалять узел из родительского узла перед добавлением его к какому-либо другому узлу).

Это означает, что узел не может находиться в двух точках документа одновременно. Поэтому, если у узла уже есть родитель, он сначала удаляется, а затем добавляется в новую позицию. `Node.cloneNode()` можно использовать для создания копии узла перед добавлением его в новый родительский элемент. Обратите внимание, что копии, сделанные с помощью `cloneNode` , не будут автоматически синхронизироваться.

Если данный дочерний элемент является `DocumentFragment`, то все содержимое `DocumentFragment` перемещается в дочерний список указанного родительского узла.

**Примечание:** Доступен новый API! > `ParentNode.append()` (en-US) поддерживает несколько аргументов и добавляемые строки.

Синтаксис
---------
```

var child = element.appendChild(child);
```

* `element` родительский элемент.
* `child` это элемент вставляется в конец `element`.
### Возвращаемое значение

Возвращается дочерний элемент (`aChild`), кроме тех случаев, когда `child` это `DocumentFragment`, в таком случае возвращается пустой `DocumentFragment`.

Примечание
----------

Цепочка может работать не так, как ожидалось, из-за того, что `appendChild()` возвращает дочерний элемент:

```js
let aBlock = document
  .createElement("block")
  .appendChild(document.createElement("b"));
```

Присваивает переменной `aBlock` элемент `<b></b>`, а не `<block></block>`, как вы могли ожидать.

Пример
------

```js
// Создаём новый элемент параграфа, и вставляем в конец document body
var p = document.createElement("p");
document.body.appendChild(p);
```

Спецификации
------------

| Specification |
| --- |
| DOM Standard # dom-node-appendchild |

Совместимость с браузерами
--------------------------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

Смотрите также
--------------

* `Node.removeChild`
* `Node.replaceChild`
* `Node.insertBefore`
* `Node.hasChildNodes`


Node.contains - Интерфейсы веб API

Node.contains
=============

Метод **`Node.contains()`** возвращает `Boolean` значение, указывающее, является ли узел потомком данного узла, т. е. сам узел, один из его прямых потомков ( `childNodes` ), один из детей его детей и так далее.Синтаксис
---------
```

node.contains( otherNode )
```

* `node` элемент который сравнивается.
* `otherNode` элемент с которым производится сравнение.
Пример
------

Эта функция проверяет, находится ли элемент в теле страницы.

```js
function isInPage(node) {
  return node === document.body ? false : document.body.contains(node);
}
```

Спецификация
------------

| Specification |
| --- |
| DOM Standard # ref-for-dom-node-contains① |

Совместимость с браузерами
--------------------------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

Смотрите также
--------------

* `Node.compareDocumentPosition`
* `Node.hasChildNodes`


Node.normalize() - Интерфейсы веб API

Node.normalize()
================

Метод **`Node.normalize()`** преобразует указанный узел и все его под-деревья в "нормализованный" вид. В нормализованном под-дереве нет ни пустых, ни смежных текстовых узлов.

Синтаксис
---------
```

element.normalize();
```

Пример
------

```js
var wrapper = document.createElement("div");

wrapper.appendChild(document.createTextNode("Part 1 "));
wrapper.appendChild(document.createTextNode("Part 2 "));

// At this point, wrapper.childNodes.length === 2
// wrapper.childNodes[0].textContent === "Part 1 "
// wrapper.childNodes[1].textContent === "Part 2 "

wrapper.normalize();

// Now, wrapper.childNodes.length === 1
// wrapper.childNodes[0].textContent === "Part 1 Part 2 "
```

Спецификации
------------

| Specification |
| --- |
| DOM Standard # ref-for-dom-node-normalize① |

Совместимость с браузерами
--------------------------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

Смотрите также
--------------

* `Text.splitText` (en-US)


Node.lookupPrefix() - Интерфейсы веб API

Node.lookupPrefix()
===================

Метод **`Node.lookupPrefix()`** возвращает `DOMString` содержащий префикс для данного пространства имён URI, если он присутствует, и `null` если нет. Когда возможно присутствие нескольких префиксов, результат зависит от реализации.

Из-за ошибки bug 312019, этот метод не работает с динамическим назначением пространства имён, которое установлено с тем же свойством `Node.prefix`.

Смотрите также
--------------

* http://www.w3.org/TR/DOM-Level-3-Cor...amespacePrefix


Node.removeChild - Интерфейсы веб API

Node.removeChild
================

Аннотация
---------

Удаляет дочерний элемент из DOM. Возвращает удалённый элемент.

Синтаксис
---------
```

var oldChild = element.removeChild(child);
element.removeChild(child);
```

* `child` дочерний элемент который будет удалён из DOM.
* `element` родительский элемент удаляемого `child`.
* `oldChild` ссылка на удаляемый дочерний элемент. `oldChild` === `child`.

Удалённый дочерний элемент остаётся в памяти, но больше не является частью DOM. Вы можете повторно использовать удалённый элемент с помощью ссылки на объект - `oldChild`.

Если `child` не является дочерним элементом `element`, тогда метод генерирует исключение. Также это происходит если `child` является дочерним элементом `element` во время вызова метода, но был удалён во время вызова обработчика событий удаляющего элемент(т.e при удалении элемента непосредственно перед вызовом обработчика событий).

Пример
------
```

<!-- Пример -->

<div id="top" align="center">
  <div id="nested"></div>
</div>
```

```js
// Удаление элемента с известным родителем
var d = document.getElementById("top");
var d_nested = document.getElementById("nested");
var throwawayNode = d.removeChild(d_nested);
```

```js
// Удаление элемента без указания его родителя
var node = document.getElementById("nested");
if (node.parentNode) {
  node.parentNode.removeChild(node);
}
```

```js
// Удаление всех дочерних элементов
var element = document.getElementById("top");
while (element.firstChild) {
  element.removeChild(element.firstChild);
}
```

Спецификации
------------

| Specification |
| --- |
| DOM Standard # dom-node-removechild |

Совместимость с браузерами
--------------------------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

Смотрите также
--------------

* `Node.replaceChild`
* `Node.parentNode`
* `ChildNode.remove` (en-US)


Node.firstChild - Интерфейсы веб API

Node.firstChild
===============

Свойство **`Node.firstChild`** только для чтения, возвращающее первый потомок узла в древе или `null`, если узел является бездетным. Если узел это `документ`, он возвращает первый узел в списке своих прямых детей.

Синтаксис
---------
```

var childNode = node.firstChild;
```

Описание
--------

`childNode` это ссылка на первый потомок `node,` если таковой имеется, в противном случае это `null`.

Пример
------

Этот пример демонстрирует использование `firstChild` и как этому свойству могут мешать пробелы. Смотрите раздел Notes для получения дополнительной информации о обработке пробелов в Gecko DOM.

```html
<p id="para-01">
  <span>First span</span>
</p>

<script type="text/javascript">
 var p01 = document.getElementById("para-01");
 alert(p01.firstChild.nodeName);
</script>
```

В данном примере alert выведет '#text', потому что текстовый узел вставлен для сохранения пробела между концом открытого <p> и тега <span>. **Любое** пустое пространство между элементами является причиной вставки узла #text, начиная от единичного пробела, разрыва строки, отступа и так далее.

Другой #text узел вставляется между закрывающими тегами </span> и </p>.

Если эти пробелы удаляются из источника, #text узлы не вставляются и элемент span становится первым потомком абзаца.

```html
<p id="para-01"><span>First span</span></p>

<script type="text/javascript">
 var p01 = document.getElementById("para-01");
 alert(p01.firstChild.nodeName);
</script>
```

Теперь alert будет показывать 'SPAN'.

Спецификации
------------

| Specification |
| --- |
| DOM Standard # ref-for-dom-node-firstchild① |

Совместимость с браузерами
--------------------------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.


Node.nodeValue - Интерфейсы веб API

Node.nodeValue
==============

Свойство **`Node.nodeValue`** возвращает или устанавливает значение текущего узла.

Синтаксис
---------
```

value = node.nodeValue;
```

`value` это строка содержащая значение текущего узла, если таковой имеется.

Примечания
----------

Для самого документа, `nodeValue` возвращает `null`. Для текста, комментария и CDATA узлов, `nodeValue` возвращает содержимое узла. Для узла атрибута, вернётся значение атрибута.

Следующая таблица, показывает возвращаемые значения различных элементов:

| Attr | Значение атрибута |
| --- | --- |
| CDATASection | Содержимое секции CDATA |
| Comment | Содержимое комментария |
| Document | null |
| DocumentFragment | null |
| DocumentType | null |
| Element | null |
| NamedNodeMap | null |
| EntityReference | null |
| Notation | null |
| ProcessingInstruction | Все содержимое исключая цель |
| Text | Содержимое текстового узла |

Когда `nodeValue` равно `null`, установки не имеют эффекта.

Спецификация
------------

* DOM Level 2 Core: Node.nodeValue


Node.parentNode - Интерфейсы веб API

Node.parentNode
===============

Аннотация
---------

Возвращает родителя определённого элемента DOM дерева.

Синтаксис
---------
```

parentNode = node.parentNode
```

`parentNode` родитель текущего элемента. Родитель элемента является `Element` узлом, `Document` узлом, или `DocumentFragment` узлом.

Пример
------

```js
if (node.parentNode) {
  // удаляем элемент из дерева
  node.parentNode.removeChild(node);
}
```

Примечание
----------

`Document` и `DocumentFragment` nodes (en-US) *могут не иметь родителя*, в этом случае `parentNode` всегда возвращает `null`.

Так же возвращает `null` если элемент только был создан и ещё не добавлен в DOM дерево.

Спецификации
------------

| Specification |
| --- |
| DOM Standard # ref-for-dom-node-parentnode① |

Совместимость с браузерами
--------------------------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

Смотрите также
--------------

* `Node.firstChild`
* `Node.lastChild`
* `Node.childNodes`
* `Node.nextSibling`
* `Node.previousSibling`
* `Node.removeChild`


Node.childNodes - Интерфейсы веб API

Node.childNodes
===============

Доступный для чтения аттрибут `Node.childNodes` возвращает *коллекцию* дочерних элементов данного элемента.

Синтаксис
---------
```

var ndList = elementNodeReference.childNodes;
```

*ndList* — упорядоченная коллекция объектов элементов, которые являются детьми данного элемента. Если у элемента нет детей, *ndList* пуст.

*ndList* — переменная, хранящая список дочерних элементов. Тип этого списка — `NodeList`.

Пример
------

```js
// parg -- ссылка на элемент <p>

if (parg.hasChildNodes()) {
  // Таким образом, сначала мы проверяем, не пуст ли объект, есть ли у него дети
  var children = parg.childNodes;

  for (var i = 0; i < children.length; ++i) {
    // сделать что-то с каждым внутренним элементом через children[i]
    // ПРИМЕЧАНИЕ: Список является ссылкой, Добавление или удаление дочерних элементов изменит список
  }
}
```

---

```js
// Это один из способов удалить все дочерние элементы из элемента
// box -- ссылка на элемент с детьми

while (box.firstChild) {
  //Список является ссылкой, то есть он будет переиндексирован перед каждым вызовом
  box.removeChild(box.firstChild);
}
```

Примечания
----------

Элементы в коллекции — объекты, а не строки. Чтобы получить данные из этих объектов, вы должны использовать их свойства (например, `elementNodeReference.childNodes[1].nodeName` чтобы получить имя, и т. д.).

Объект `document` обладает 2-мя детьми: декларацией Doctype и корневым элементов, к которому как правило обращаются как `documentElement`. (В (X)HTML документах это HTML-элемент.)

`childNodes` также включают, например, текстовые узлы и комментарии. Чтобы пропустить их, используйте `ParentNode.children` (en-US) взамен.

Спецификации
------------

| Specification |
| --- |
| DOM Standard # ref-for-dom-node-childnodes① |

Совместимость с браузерами
--------------------------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

Смотрите также
--------------

* `Node.firstChild`
* `Node.lastChild`
* `Node.nextSibling`
* `Node.previousSibling`
* `ParentNode.children` (en-US)


Node.cloneNode() - Интерфейсы веб API

Node.cloneNode()
================

Метод **`Node.cloneNode()`** возвращает дубликат узла, из которого этот метод был вызван.

Синтаксис
---------
```

var dupNode = node.cloneNode(deep);
```

*node*

Узел, который будет клонирован.

*dupNode*

Новый узел, который будет клоном `node`

*deep Необязательный*

`true,` если дети узла должны быть клонированы или `false` для того, чтобы был клонирован только указанный узел.

**Примечание:** в спецификации DOM4 (как реализовано в Gecko 13.0), `deep` необязательный аргумент. Если он опущен, метод действует как если бы значение `deep` было **`true`**, по умолчанию используется глубокое клонирование. Для создания поверхностного клонирования, `deep` должен быть установлен как `false`.

Это поведение было изменено в последней спецификации, и если опущено значение, метод будет действовать как если бы `deep` было **`false`**. Хотя, это все ещё не обязательно, вы всегда должны обеспечить аргументом `deep`, для прямой и обратной совместимости. С Gecko 28.0), консоль предупреждает разработчиков не опускать аргумент. Начиная с Gecko 29.0), поверхностный клон, по умолчанию, вместо глубокого клона.

Пример
------

```js
var p = document.getElementById("para1");
var p_prime = p.cloneNode(true);
```

Примечание
----------

Клонирование узлов копирует все атрибуты и их значения, в том числе собственных (в линию) перехватчиков. Это не копирует перехватчики событий, добавленных используя `addEventListener()` (en-US) или тех что назначены через свойства элемента (т.е `node.onclick = fn`).

Дубликат узла, возвращённого `cloneNode()` не является частью документа, пока не будет добавлен в другой узел, который является частью документа, используя `Node.appendChild()` или другой метод. Кроме того, не имеет родителя, пока не будет добавлен к другому узлу.

`Если deep` установлен как `false`, дочерние узлы не клонируются. Любой текст, который содержит узел также не клонируется, как и содержащийся в одном или более дочернем узле `Text`.

Если `deep` установлено как `true`, все поддеревья (включая текст, который может быть потомком узла `Text`) копируется тоже. Для пустых узлов (т.е `<img>` и `<input>` элементов) это не имеет значения установлен ли `deep` как `true` или `false`.

**Предупреждение:** **Внимание:** `cloneNode()` может привести к дублированию идентификаторов элементов в документе.

Если исходный узел имеет идентификатор и клон размещён в том же документе, идентификатор должен быть изменён, для того что бы быть уникальным. Имя атрибута также может нуждаться в изменении, в зависимости от будущего имени дубликата.

Чтобы клонировать узел для добавления к другому документу используйте `Document.importNode()` вместо этого.

Спецификации
------------

| Specification |
| --- |
| DOM Standard # ref-for-dom-node-clonenode① |

Совместимость с браузерами
--------------------------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.


Node.nodeName - Интерфейсы веб API

Node.nodeName
=============

Свойство **`Node.nodeName`** только для чтения, возвращающие имя текущего узла в виде строки.

Возвращаемое значение для различных типов узлов:

| Интерфейс | значение nodeName |
| --- | --- |
| `Attr` | Значение `Attr.name` (en-US) |
| `CDATASection` | `"#cdata-section"` |
| `Comment` | `"#comment"` |
| `Document` | `"#document"` |
| `DocumentFragment` | `"#document-fragment"` |
| `DocumentType` (en-US) | Значение `DocumentType.name` (en-US) |
| `Element` | Значение `Element.tagName` |
| `Entity` | имя сущности |
| `EntityReference` | Имя сущности ссылки |
| `Notation` | Название обозначения |
| `ProcessingInstruction` (en-US) | Значение `ProcessingInstruction.target` (en-US) |
| `Text` | `"#text"` |

Синтаксис
---------
```

var str = node.nodeName;
```

Пример
------

Учитывая следующую разметку:

```html
<div id="d1">hello world</div>
<input type="text" id="t" />
```

и следующий скрипт:

```js
var div1 = document.getElementById("d1");
var text_field = document.getElementById("t");

text_field.value = div1.nodeName;
```

В XHTML (или любых других форматов XML), значение `text_field` будет прочитано как "div". Тем не менее, в HTML, значение `text_field` будет прочитано как "DIV", потому что `nodeName` и `tagName` возвращают в верхнем регистре элементы HTML в DOM помеченном как HTML документ. Узнайте больше деталей о чувствительности регистра nodeName в различных браузерах.

Обратите внимание, что свойство `tagName` (en-US) можно было бы использовать вместо него, поскольку `nodeName` имеет тоже значение что и `tagName` для элемента. Однако имейте в виду, что `nodeName` будет возвращать `#text` для текстово узла, в то время как `tagName` будет возвращать `undefined`.

Спецификации
------------

| Specification |
| --- |
| DOM Standard # ref-for-dom-node-nodename① |

Совместимость с браузерами
--------------------------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.


Node.lookupNamespaceURI() - Интерфейсы веб API

Node.lookupNamespaceURI()
=========================

Метод **`Node.lookupNamespaceURI()`** берёт префикс и возвращает пространство имён URI связанное с ним в данном узле, если найден (и `null` если нет). Устанавливает `null` для префикса который возвращает пространство имён по умолчанию.

Из-за ошибки bug 312019, этот метод не работает с динамическим назначением пространства имён (т.е., с уставленным тем же Node.prefix).

Смотрите также
--------------

* http://www.w3.org/TR/DOM-Level-3-Cor...upNamespaceURI


Node.lastChild - Интерфейсы веб API

Node.lastChild
==============

Основная информация
-------------------

**lastChild** возвращает последнего потомка в узле.

Синтаксис
---------
```

var last_child = element.lastChild
```

Описание
--------

Возвращаемый элемент `last_child` является узлом. Если его родитель является элементом, то возвращаемый узел является узлом типа Элемент, Текст, или же узлом комментария. Если в опрашиваемом узле нет дочерних элементов, **lastChild** возвращает `null` .

Пример
------

```js
var tr = document.getElementById("row1");
var corner_td = tr.lastChild;
```

Спецификации
------------

| Specification |
| --- |
| DOM Standard # ref-for-dom-node-lastchild① |

Совместимость с браузерами
--------------------------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.


Node.textContent - Интерфейсы веб API

Node.textContent
================

Аннотация
---------

Позволяет задавать или получать текстовое содержимое элемента и его потомков.

Синтаксис
---------
```

var text = element.textContent;
element.textContent = "Это просто текст";
```

Описание
--------

* `textContent` возвращает `null,` *если узел является документом (en-US), типом документа, или его описанием*. Для получения *всего* текста и CDATA-данных во всём документе можно использовать `document.documentElement.textContent`.
* Если узел является CDATA, комментарием, инструкцией, или текстовым элементом, `textContent` возвращает текст внутри узла в виде строки (т.н. nodeValue (en-US)).
* Для узлов других типов `textContent` возвращает конкатенацию свойств `textContent` всех дочерних узлов, исключая комментарии и строки кода. Если узел не имеет дочерних узлов, будет возвращена пустая строка.
* Установка данного значения удаляет все дочерние узлы и заменяет их единичным текстовым узлом с указанным значением.
### Отличие от `innerText`

`element.innerText` был введён Internet Explorer-ом. Работает по тому же принципу за небольшими исключениями:

* `textContent` получает содержимое *всех* элементов, включая `<script>` и `<style>`, тогда как `innerText` этого не делает.
* `innerText` умеет считывать стили и не возвращает содержимое скрытых элементов, тогда как `textContent` этого не делает.
* Метод `innerText` позволяет получить CSS, а `textContent` — нет.
### Отличие от `innerHTML`

`innerHTML`, как можно понять из его названия, возвращает HTML. Довольно часто `innerHTML` используется для получения или записи текста в элемент. Тем не менее, вместо него желательно использовать `textContent`: этот метод потребляет гораздо меньше ресурсов, так как текст парсится как текст, а не HTML. Кроме того, это защищает от XSS атак.

Пример
------

```js
// Дан следующий фрагмент:
// <div id="block">Это — <span>просто</span> текст</div>

// Достаём текстовое содержимое:
var text = document.getElementById("block").textContent;
// В переменной |text| находится: "Это — просто текст".

// Меняем текст:
document.getElementById("block").textContent = "Это — просто текст";
// Теперь наш фрагмент выглядит так:
// <div id="block">Это — просто текст</div>
```

Совместимость с браузерами
--------------------------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

Спецификация
------------

* textContent
Смотрите также
--------------

* Подробнее о различиях `innerText` и `textContent` (пост в блоге)


Node.hasChildNodes() - Интерфейсы веб API

Node.hasChildNodes()
====================

Метод **`Node.hasChildNodes()`** возвращает `Boolean` значение показывающее имеет ли текущий `Node` дочерние узлы (en-US) или нет.

Синтаксис
---------
```

node.hasChildNodes()
```

Пример
------

Следующий пример удаляет первый дочерний узел внутри элемента с id `"foo"`, если foo имеет дочерние узлы.

```js
var foo = document.getElementById("foo");

if (foo.hasChildNodes()) {
  foo.removeChild(foo.childNodes[0]);
}
```

Спецификации
------------

| Specification |
| --- |
| DOM Standard # ref-for-dom-node-haschildnodes① |

Совместимость с браузерами
--------------------------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

Смотрите также
--------------

* `Node.childNodes`
* `Node.hasAttributes`


Node.nodeType - Интерфейсы веб API

Node.nodeType
=============

Доступное только для чтения свойство `Node.nodeType` возвращает беззнаковое короткое целочисленное значение, представляющее тип узла.

Синтаксис
---------
```

var type = node.nodeType;
```

`type` – беззнаковое короткое целочисленное значение с одним из следующих значений:

| Name | Value |
| --- | --- |
| `ELEMENT_NODE` | `1` |
| `ATTRIBUTE_NODE`
Устарело
 | `2` |
| `TEXT_NODE` | `3` |
| `CDATA_SECTION_NODE`
Устарело
 | `4` |
| `ENTITY_REFERENCE_NODE`
Устарело
 | `5` |
| `ENTITY_NODE`
Устарело
 | `6` |
| `PROCESSING_INSTRUCTION_NODE` (en-US) | `7` |
| `COMMENT_NODE` | `8` |
| `DOCUMENT_NODE` | `9` |
| `DOCUMENT_TYPE_NODE` (en-US) | `10` |
| `DOCUMENT_FRAGMENT_NODE` | `11` |
| `NOTATION_NODE`
Устарело
 | `12` |

Пример
------

В примере проверяется, является ли первый узел внутри `documentElement` узлом комментария, если нет, то выводится сообщение.

```js
var node = document.documentElement.firstChild;
if (node.nodeType != Node.COMMENT\_NODE)
  console.log("You should comment your code well!");
```

Спецификации
------------

| Specification |
| --- |
| DOM Standard # ref-for-dom-node-nodetype① |

Совместимость с браузерами
--------------------------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.


Node.ownerDocument - Интерфейсы веб API

Node.ownerDocument
==================

Свойство **`Node.ownerDocument`** только для чтения, возвращающее объект документа верхнего уровня для этого узла.

Синтаксис
---------
```

document = element.ownerDocument
```

* `document` это объект `document` (en-US) родитель текущего элемента.
Пример
------

```js
// given a node "p", get the top-level HTML child
// of the document object

var d = p.ownerDocument;
var html = d.documentElement;
```

Примечание
----------

Объект `document`, возвращаемый этим свойством, это основной объект с которым все дочерние узлы в настоящем HTML документе созданы. Если это свойство используется для узла самого документа, результат будет `null`.

Совместимость с браузерами
--------------------------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

Спецификация
------------

* DOM Level 2 Core: Node.ownerDocument


Node.isSameNode() - Интерфейсы веб API

Node.isSameNode()
=================

The **`Node.isSameNode()`** проверяет ссылаются ли два узла на один и тот же объект.

**Предупреждение:** Данный метод больше не реализуется в последних браузерах.

```js
// Instead of using
node1.isSameNode(node2);

// use
node1 === node2; // or
node1 == node2;
```

Синтаксис
---------
```

var isSameNode = node.isSameNode(other);
```

* `other` узел для проверки.
Спецификации
------------

| Specification |
| --- |
| DOM Standard # dom-node-issamenode |

Совместимость с браузерами
--------------------------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

Смотрите также
--------------

* `Node.isEqualNode()`


Node.parentElement - Интерфейсы веб API

Node.parentElement
==================

Свойство **`Node.parentElement`** только для чтения, возвращает родителя узла DOM `Element`, или `null` если узел не имеет родителя, или его родитель не DOM `Element`.

Синтаксис
---------
```

parentElement = node.parentElement
```

`parentElement` это родительский элемент текущего узла. Это всегда объект DOM `Element`, или `null`.

Пример
------

```js
if (node.parentElement) {
  node.parentElement.style.color = "red";
}
```

Спецификации
------------

| Specification |
| --- |
| DOM Standard # ref-for-dom-node-parentelement① |

Совместимость с браузерами
--------------------------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

Смотрите также
--------------

* `Node.parentNode`


Node.replaceChild - Интерфейсы веб API

Node.replaceChild
=================

Аннотация
---------

Заменяет дочерний элемент на выбранный. Возвращает заменённый элемент.

Синтаксис
---------
```

replacedNode = parentNode.replaceChild(newChild, oldChild);
```

* `newChild` элемент на который будет заменён `oldChild`. В случает если он уже есть в DOM, то сначала он будет удалён.
* `oldChild` элемент который будет заменён.
* `replacedNode` заменённый элемент. Тоже самое что и `oldChild`.
Пример
------

```js
// <div>
// <span id="childSpan">foo bar</span>
// </div>

// Создаём новый пустой элемент
// without an ID, any attributes, or any content
var sp1 = document.createElement("span");

// Присваиваем ему id 'newSpan'
sp1.setAttribute("id", "newSpan");

// Создаём строку.
var sp1_content = document.createTextNode("new replacement span element.");

// Добавляем контент в созданный нами узел
sp1.appendChild(sp1_content);

// создаём ссылку на существующий элемент который будем заменять
var sp2 = document.getElementById("childSpan");
var parentDiv = sp2.parentNode;

// заменяем существующий элемент sp2 на созданный нами sp1
parentDiv.replaceChild(sp1, sp2);

// Результат:
// <div>
// <span id="newSpan">new replacement span element.</span>
// </div>
```

Спецификации
------------

| Specification |
| --- |
| DOM Standard # dom-node-replacechild |

Совместимость с браузерами
--------------------------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

Смотрите также
--------------

* `Node.removeChild`


Node.previousSibling - Интерфейсы веб API

Node.previousSibling
====================

Свойство **`Node.previousSibling`** используется только для чтения, оно возвращает узел предшествующий указанному в родительском элементе `childNodes`, или `null`, если указанный узел первый в своём родителе.

Синтаксис
---------
```

previousNode = node.previousSibling;
```

Пример
------

```js
// <a><b1 id="b1"/><b2 id="b2"/></a>

alert(document.getElementById("b1").previousSibling); // null
alert(document.getElementById("b2").previousSibling.id); // "b1"
```

Примечание
----------

 Браузеры, основанные на Gecko, вставляют текстовые узлы в документ для представления пробелов в разметке.
 Поэтому узел, полученный, например, при использовании `Node.firstChild` или `Node.previousSibling` может относиться к
 пробелу, а не к тому элементу, который автор хотел получить.

 Смотрите Пробел в DOM (en-US) и
 W3C DOM 3 FAQ: Почему некоторые текстовые узлы пустые?
 для дополнительной информации.

Для навигации через список дочерних узлов в обратном порядке используйте Node.nextSibling (en-US).

Спецификация
------------

* DOM Level 1 Core: previousSibling
* DOM Level 2 Core: previousSibling
* DOM Level 3 Core: previousSibling


Storage.removeItem() - Интерфейсы веб API

Storage.removeItem()
====================

Если методу `removeItem()` интерфейса `Storage` передать ключ, то из хранилища будет удалён элемент с указанным ключом.

Синтаксис
---------
```

storage.removeItem(keyName);
```

### Параметры

***название Ключа***

`DOMString` содержит в себе название ключа.

### Возвращает

*Метод не возвращает значений.*

Пример
------

Следующая функция создаёт три элемента внутри локального хранилища и потом удаляет элемент с ключом *image*.

```js
function populateStorage() {
  localStorage.setItem("bgcolor", "red");
  localStorage.setItem("font", "Helvetica");
  localStorage.setItem("image", "myCat.png");

  localStorage.removeItem("image");
}
```

>
> \*\*Примечание:\*\*чтобы увидеть использование этой функции на реальном примере, загляните в Web Storage Demo.
>
>
>

Спецификации
------------

| Specification |
| --- |
| HTML Standard # dom-storage-removeitem-dev |

Совместимость с браузерами
--------------------------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

Смотрите также
--------------

Using the Web Storage API


Storage.key() - Интерфейсы веб API

Storage.key()
=============

Метод **`key()`** интерфейса `Storage` получает числовое значение n и возвращает имя n-ого ключа из данного объекта `Storage`. Порядок ключей зависит от реализации браузера, поэтому лучше не полагаться на него.

Syntax
------

```js
var aKeyName = storage.key(index);
```

### Параметры

`index`

Целочисленное значение, представляющее номер ключа, имя которого нужно получить. Индексация начинается с нуля.

### Возвращаемое значение

`DOMString` с именем ключа. Если этот индекс не найден, вернётся `null`.

Примеры
-------

Следующая функция перебирает все ключи из локального хранилища:

```js
function forEachKey(callback) {
  for (var i = 0; i < localStorage.length; i++) {
    callback(localStorage.key(i));
  }
}
```

Следующая функция перебирает все ключи из локального хранилища и получает значение по каждому из них:

```js
for (var i = 0; i < localStorage.length; i++) {
  console.log(localStorage.getItem(localStorage.key(i)));
}
```

**Примечание:** более реалистичный пример использования функции показан на странице Web Storage Demo.

Спецификации
------------

| Specification |
| --- |
| HTML Standard # dom-storage-key-dev |

Совместимость с браузерами
--------------------------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

Смотрите также
--------------

* Использование Web Storage API


Storage.setItem() - Интерфейсы веб API

Storage.setItem()
=================

Если методу setItem() интерфейса `Storage` передать ключ и значение, то в хранилище будет добавлено соответствующее ключу значение, либо, если запись уже есть в хранилище, то значение по ключу будет обновлено.

Синтаксис
---------
```

storage.setItem(название Ключа, значение Ключа);
```

### Параметры

*название Ключа*

Является строкой `DOMString` содержащей название ключа, значение которого будет добавлено/обновлено.

*значение Ключа*

Является строкой `DOMString` содержащей значение ключа, которое будет добавлено/обновлено.

### Возвращаемые значения

*Метод не возвращает значений.*

Пример
------

Следующая функция создаёт три элемента с данными в хранилище.

```js
function populateStorage() {
  localStorage.setItem("bgcolor", "red");
  localStorage.setItem("font", "Helvetica");
  localStorage.setItem("image", "myCat.png");
}
```

**Примечание:** Чтобы вживую посмотреть на работу функции, посетите страницу демонстрации Web Storage.

Спецификации
------------

| Specification |
| --- |
| HTML Standard # dom-storage-setitem-dev |

Совместимость с браузерами
--------------------------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

Смотрите также
--------------

Использование Web Storage API


Storage.getItem() - Интерфейсы веб API

Storage.getItem()
=================

Если в метод `getItem()` интерфейса `Storage` передать ключ в качестве параметра, то метод вернёт значение, лежащее в хранилище по указанному ключу.

Синтаксис
---------
```

var aValue = storage.getItem(название Ключа);
```

### Параметры

*название Ключа*

Является строкой `DOMString`, содержащей название ключа, по которому получается значение из хранилища.

### Возвращаемые значения

Является строкой `DOMString`, содержащей значение для соответствующего ключа. Если ключ не существует, то будет возвращено значение `null`.

Пример
------

Следующая функция получает 3 значения из локального хранилища, после этого они используются для установки стилей на странице.

```js
function setStyles() {
  var currentColor = localStorage.getItem("bgcolor");
  var currentFont = localStorage.getItem("font");
  var currentImage = localStorage.getItem("image");

  document.getElementById("bgcolor").value = currentColor;
  document.getElementById("font").value = currentFont;
  document.getElementById("image").value = currentImage;

  htmlElem.style.backgroundColor = "#" + currentColor;
  pElem.style.fontFamily = currentFont;
  imgElem.setAttribute("src", currentImage);
}
```

**Примечание:** Чтобы вживую посмотреть на работу функции, посетите страницу демонстрации Web Storage.

Спецификации
------------

| Specification |
| --- |
| HTML Standard # dom-storage-getitem-dev |

Совместимость с браузерами
--------------------------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

Смотрите также
--------------

Using the Web Storage API


Storage.clear() - Интерфейсы веб API

Storage.clear()
===============

Метод `clear()` интерфейса `Storage` удалит все значения из хранилища.

Синтаксис
---------

```js
storage.clear();
```

### Параметры

*Метод не принимает параметры.*

### Возвращаемое значение

*Метод не возвращает значение.*

Пример
------

Следующая функция создаёт 3 записи в локальном хранилище, после этого все значения удаляются с помощью метода `clear()`.

```js
function populateStorage() {
  localStorage.setItem("bgcolor", "red");
  localStorage.setItem("font", "Helvetica");
  localStorage.setItem("image", "myCat.png");

  localStorage.clear();
}
```

**Примечание:** Чтобы вживую посмотреть на работу функции, посетите страницу демонстрации Web Storage.

Спецификации
------------

| Specification |
| --- |
| HTML Standard # dom-storage-clear-dev |

Совместимость с браузерами
--------------------------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

Смотрите также
--------------

Using the Web Storage API


Storage.length - Интерфейсы веб API

Storage.length
==============

Свойство length интерфейса `Storage` доступно только для чтения и возвращает число с количеством элементов, которые хранятся в объекте Storage на данный момент.

Синтаксис
---------
```

var aLength = storage.length;
```

### Возвращаемые значения

Число

Пример
------

Следующая функция добавляет три элемента с данными в локальное хранилище для домена, на котором выполняется код и возвращает число элементов в хранилище:

```js
function populateStorage() {
  localStorage.setItem("bgcolor", "yellow");
  localStorage.setItem("font", "Helvetica");
  localStorage.setItem("image", "cats.png");

  localStorage.length; // return 3
}
```

**Примечание:** чтобы посмотреть выполнение кода вживую, посетите страницу Web Storage Demo.

Спецификации
------------

| Specification |
| --- |
| HTML Standard # dom-storage-length-dev |

Совместимость с браузерами
--------------------------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

Смотрите также
--------------

Использование Web Storage API


VRDisplay.requestAnimationFrame() - Интерфейсы веб API

VRDisplay.requestAnimationFrame()
=================================

**Экспериментальная возможность:** **Это экспериментальная технология**
Так как спецификация этой технологии ещё не стабилизировалась, смотрите таблицу совместимости по поводу использования в различных браузерах. Также заметьте, что синтаксис и поведение экспериментальной технологии может измениться в будущих версиях браузеров, вслед за изменениями спецификации.

Метод **`requestAnimationFrame()`** интерфейса `VRDisplay` (en-US) является специфичной реализацией метода `Window.requestAnimationFrame` и принимает в качестве аргумента колбэк-функцию. Эта функция будет вызвана, когда объект типа `VRDisplay` будет готов отобразить новый кадр сцены:

* Если в этот момент объект типа `VRDisplay` не находится в процессе отображения сцены, то вызов этой функции эквивалентен вызову `Window.requestAnimationFrame`.
* Если объект типа `VRDisplay` находится в состоянии отображения сцены, вызов колбэк-функции происходит с собственной частотой обновления устройства, представленного этим объектом.
Синтаксис
---------

```js
var handle = vrDisplayInstance.requestAnimationFrame(callback);
```

### Параметры

callback

Колбэк-функция, которая будет вызвана когда объект типа `VRDisplay` будет готов отобразить новый кадр сцены.

### Возвращаемое значение

A long representing the handle of the `requestAnimationFrame()` call. This can then be passed to a `VRDisplay.cancelAnimationFrame()` (en-US) call to unregister the callback.

Examples
--------

```js
var frameData = new VRFrameData();
var vrDisplay;

navigator.getVRDisplays().then(function(displays) {
  vrDisplay = displays[0];
  console.log('Display found');
  // Starting the presentation when the button is clicked: It can only be called in response to a user gesture
  btn.addEventListener('click', function() {
    vrDisplay.requestPresent([{ source: canvas }]).then(function() {
      drawVRScene();
    });
  });
});

// WebVR: Draw the scene for the WebVR display.
function drawVRScene() {
  // WebVR: Request the next frame of the animation
  vrSceneFrame = vrDisplay.requestAnimationFrame(drawVRScene);

  // Populate frameData with the data of the next frame to display
  vrDisplay.getFrameData(frameData);

  // You can get the position, orientation, etc. of the display from the current frame's pose
  var curFramePose = frameData.pose;
  var curPos = curFramePose.position;
  var curOrient = curFramePose.orientation;

  // Clear the canvas before we start drawing on it.

  gl.clear(gl.COLOR\_BUFFER\_BIT | gl.DEPTH\_BUFFER\_BIT);

  // WebVR: Create the required projection and view matrix locations needed
  // for passing into the uniformMatrix4fv methods below

  var projectionMatrixLocation = gl.getUniformLocation(shaderProgram, "projMatrix");
  var viewMatrixLocation = gl.getUniformLocation(shaderProgram, "viewMatrix");

  // WebVR: Render the left eye’s view to the left half of the canvas
  gl.viewport(0, 0, canvas.width \* 0.5, canvas.height);
  gl.uniformMatrix4fv(projectionMatrixLocation, false, frameData.leftProjectionMatrix);
  gl.uniformMatrix4fv(viewMatrixLocation, false, frameData.leftViewMatrix);
  drawGeometry();

  // WebVR: Render the right eye’s view to the right half of the canvas
  gl.viewport(canvas.width \* 0.5, 0, canvas.width \* 0.5, canvas.height);
  gl.uniformMatrix4fv(projectionMatrixLocation, false, frameData.rightProjectionMatrix);
  gl.uniformMatrix4fv(viewMatrixLocation, false, frameData.rightViewMatrix);
  drawGeometry();

  function drawGeometry() {
    // draw the view for each eye
  }

    ...

  // WebVR: Indicate that we are ready to present the rendered frame to the VR display
  vrDisplay.submitFrame();
}
```

**Примечание:** You can see this complete code at raw-webgl-example.

Specifications
--------------

#### No specification found

No specification data found for `api.VRDisplay.requestAnimationFrame`.
Check for problems with this page or contribute a missing `spec_url` to mdn/browser-compat-data. Also make sure the specification is included in w3c/browser-specs.

Совместимость с браузерами
--------------------------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

See also
--------

* WebVR API