JavaScript is partly an object-oriented language.
To learn JavaScript, we got to learn the object-oriented parts of JavaScript.
In this article, we’ll look at the DOM and some useful document properties.
Removing Nodes
We can call the removeChild method to remove a child node.
For instance, if we have the following HTML:
<body>
<p class="opener">foo</p>
<p><em>bar</em> </p>
<p id="closer">baz</p>
<!-- the end -->
</body>
We can remove the node by writing:
const p = document.querySelector('p');
const removed = document.body.removeChild(p);
then the p element is removed from the body with removeChild .
The removed node is returned.
There’s also the replaceChild method that lets us remove a node and puts another one in place.
For example, we can write:
const p1 = document.querySelector('.opener');
const p2 = document.querySelector('#closer');
const removed = document.body.replaceChild(p1, p2);
to replace the node with ID closer with the one that has class opener .
HTML — only DOM Objects
There are various ways to access HTML-only DOM objects.
We can access than with some properties that are available in modern browsers.
document.body has the body element.
It’s one of the elements that are in the DOM Level 0 spec that’s moved to the HTML extension of the DOM spec.
Other properties includes the document.images to get the img elements.
document.applets lets us get the applet elements.
document.links gets us the link elements.
document.anchors gets us anchor a elements.
document.forms lets us get the forms.
So:
document.forms[0];
is the same as:
document.getElementsByTagName('forms')[0];
If we have the following form:
<form>
<input name="name" id="name" type="text" size="50" maxlength="255" value="Enter name" />
</form>
Then we can get the input element and set the value with:
document.forms[0].elements[0].value = 'foo';
We can disable the input with:
document.forms[0].elements[0].disabled = true;
And we can get the input by its name attribute with:
document.forms[0].elements['name'];
or:
document.forms[0].elements.name;
The document.write() Method
The document.write method lets us write HTML to the page.
For example, we can write:
document.write(`<p>${new Date()}</p>`);
to write the date to the screen.
If we load the page, document.write will replace all the content on the page.
Cookies, title, referrer, and domain
We can get and set the client-side cookies with the document.cookie property.
It’s a string that has some key-values and the expiry date.
When a server sends a page to the client, it may send the Set-Cookie HTTP response header back with the cookie.
The document.title property lets us get and set the title of the page, so we can write:
document.title = 'title';
The document.domain property has the domain of the current page.
We may get something like “jsfiddle.net” if we are in there.
We can’t set it to a different domain, so if we’re in jsfiddle.net, then we can’t write:
document.domain = 'example.com'
We’ll get the error:
Uncaught DOMException: Failed to set the 'domain' property on 'Document': 'example.com' is not a suffix of 'jsfiddle.net'.
This is good for protecting users. We don’t want to let scripts go to any domain they like.
Conclusion
We can remove nodes with DOM methods.
Also, we can use various properties and methods of document to manipulate a document.
