Java Script | ShareTechnote

Javascript

Document

In case of utliziaing Javascript in web application (i.e, in html), there should be some mechanism of bridging between the programming part (i.e, Javascript) and other html contents. I think document object is such a bridge connecting the script and the other contents. So it would be good to understand the basics on what does document object do.

Let's check how chatGPT explains about document. Obviously I think it explains much better than I would have done :). This is what chatGPT says.

In JavaScript, the document object represents the HTML document in a web browser. It provides an API for accessing and manipulating the elements in an HTML document.

The document object is the root node of the HTML document, and it contains all the other elements in the document. We can use the document object to access the HTML elements in the document and perform various operations on them, such as:

Accessing elements by their tag name, class name, or ID
Changing the contents of an element
Modifying the styles of an element
Adding or removing elements from the document
Traversing the hierarchy of elements in the document

By using the document object, we can make dynamic changes to the HTML document and create interactive web applications that respond to user actions. The document object is a fundamental part of JavaScript in a web browser and is used extensively in client-side programming.

NOTE : In this note, I am trying to use chatGPT in a little bit different way. Instead of asking chatGPT to write a specific code that I requested, I asked chatGPT about generic questions about Javascript. I just asked some generic questions and copied the answers in this note and will keep adding my persona comments afterwords.

NOTE : What is the point of just doing copy and paste of what chatGPT writes out. You can ask the same question directly into chatGPT. There are a couple of reasons as below.

After some time, I often forget my own question.
In many cases, chatGPT replies a little bit differently even with the same question. Some replies are pretty satisfactory but some are not. So I learned that it would be good idea to copy and store it somewhere else whenever you get qood answers.
Purely for curiosity. I want to observe myself about how much I can collobrate with chatGPT in various different way (e.g, in writing specific code or in general technical conversation)

Properties of document object

document.URL: The complete URL of the document.
document.title: The title of the document.
document.body: A reference to the <body> element of the document.
document.head: A reference to the <head> element of the document.
document.forms: A collection of all the <form> elements in the document.
document.images: A collection of all the <img> elements in the document.
document.links: A collection of all the <a> elements in the document.
document.referrer: The URL of the document that referred the user to the current document.
document.cookie: The contents of the document's cookie.

Methods of document object

document.getElementById(id): Returns the element with the specified id.
document.getElementsByTagName(tagName): Returns a collection of elements with the specified tag name.
document.createElement(tagName): Creates a new element with the specified tag name.
document.write(text): Writes the specified text to the document.
document.getElementsByClassName(className): Returns a collection of elements with the specified class name.
document.querySelector(selector): Returns the first element that matches the specified selector.
document.querySelectorAll(selector): Returns a collection of all elements that match the specified selector.
document.createTextNode(text): Creates a new text node with the specified text.
document.appendChild(node): Adds a new child node to the document.
document.removeChild(node): Removes the specified child node from the document.
document.insertBefore(newNode, referenceNode): Inserts a new node before a specified reference node.
document.replaceChild(newNode, oldNode): Replaces an old node with a new node.
document.getAttribute(attribute): Returns the value of the specified attribute for the current element.
document.setAttribute(attribute, value): Sets the value of the specified attribute for the current element.

Is it possible to assign an external HTML to a document ?

Is it possible to assign an external HTML file to a document and manipulate it with all the properties and methods provided by document object ?

Unfortunately the answer is NO because document object is pointing only to current HTML file in which the javascript is running.

One possible alternative to manipulate an external html document would be to use XMLHttpRequest. You can retrieve the whole contents of an external html file using this object and manipulate it with various string manipulation method.