Основы JavaScript: детальное объяснение свойств и методов объекта document

----- Введение

Каждый загруженный браузером HTML документ становится объектом Document.

Объект Document позволяет нам из скрипта доступа ко всем элементам HTML страницы.

Атрибуты

1　 document.anchors　 Возвращает ссылку на все Anchor объекты в документе. Есть также document.links/document.forms/document.images и т.д.

2　 document.URL　 Возвращает URL текущего документа

3　 document.title　 Возвращает заголовок текущего документа

4　 document.body　 Возвращает узел элемента body

Методы

1　 document.close()　 Закрывает поток вывода, открытый методом document.open(), и показывает выбранные данные.

<!DOCTYPE html>
<html>
<head>
<script>
function createDoc()
{
var w=window.open();
w.document.open();
w.document.write("<h1>Hello World!</h1>");
w.document.close();
}
</script>
</head>
</body>
<input type="button" value="New document in a new window" onclick="createDoc()">
</body>
</html>

2　 document.createElement()　 Создает узел элемента.

<!DOCTYPE html>
<html lang="en">
<!DOCTYPE html>
<head>
</head>
</body>
  <p>hello world</p>
<script>
  var a = document.createElement('hr');
  document.body.appendChild(a);
</script>
</body>
</html>

3　 document.createAttribute()　 Создает узел атрибута.

<!DOCTYPE html>
<html>
</body>
<p id="demo">Нажмите кнопку, чтобы создать элемент BUTTON.</p>
<button onclick="myFunction()">Try it</button>
<script>
function myFunction()
{
var btn=document.createElement("BUTTON");
document.body.appendChild(btn);
};
</script>
</body>
</html>

4　 document.createTextNode()　 Создает узел текста.

<!DOCTYPE html>
<html lang="en">
<!DOCTYPE html>
<head>
</head>
</body>
  <p>hello world</p>
<script>
  var a = document.createTextNode('hahahah');
  document.body.appendChild(a);
</script>
</body>
</html>

5　document.getElementsByClassName() возвращает коллекцию элементов с указанным классом, как NodeList. NodeList — это формат данных, аналогичный массиву, который предоставляет только атрибут length, методы push, pop и т.д. не предоставляются.

6　document.getElementById() возвращает ссылку на первый объект с указанным id.

7　document.getElementsByName() возвращает коллекцию объектов с указанным именем.

8　document.getElementsByTagName() возвращает коллекцию объектов с указанным тегом.Коллекция объектов.

9　document.write() записывает HTML-выражение или код JavaScript в документ. Замечание: использование метода write после загрузки html-документа приведет к замене содержимого оригинального html-документа.

<!DOCTYPE html>
<html lang="en">
<!DOCTYPE html>
<head>
</head>
</body>
  <p>hello world</p>
<script>
  document.write('hahahh');
</script>
</body>
</html>

Вот и все, что я могу предложить вам по вопросам свойств и методов объекта document в DOM. Надеюсь, что вы поддержите и похвалите учебник 'Yellowsign tutorial'~

Основной учебник

Вам может понравиться