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 inserting and copying nodes.
Modifying Styles
We can change the styles of an element.
For instance, we can write:
const p = document.getElementById('closer');
p.style.border = "1px solid green";
then we set the border of the p element to green.
We can also set the font-weight with the fontWeight property:
p.style.fontWeight = 'bold';
We can set styles with the cssText property:
p.style.cssText; "border: 1px solid green; font-weight: bold;"
The styles can be changed with some string manipulating:
p.style.cssText += " border-style: dashed";
Forms
We can manipulate forms by getting the form element.
For example, we can write:
const input = document.querySelector('input[type=text]');
to get the first input with type attribute set to text.
Then we can get the name property with input.name .
We can set the value entered into the box with:
input.value = 'abc';
And we can get the button for the form with:
document.querySelector("button")
Creating New Nodes
We can create new nodes with the createElement method.
For example, we can write:
const p = document.createElement('p');
p.innerHTML = 'foo';
to create a p element with content 'foo' .
We can get the style with the style property:
p.style
And we can assign new styles to it:
p.style.border = '2px dotted green';
Then we can attach it to a node like the body:
document.body.appendChild(p);
appendChild attaches the node as the last child node of body.
DOM-Only Method
We can also use DOM methods to add text nodes and styling.
For instance, we can use createTextNode to create the text node:
const p = document.createElement('p');
const text = document.createTextNode('something'); p.appendChild(text);
We created a p element and attached the text node 'something' to it.
We can also call appendChild with a text node to add it as a child node:
const str = document.createElement('strong');
str.appendChild(document.createTextNode('bold'));
We created a strong element and added the text bold to it,
The cloneNode() Method
We can clone a node with the cloneNode method.
For instance, we can write:
const el = document.querySelector('p');
document.body.appendChild(el.cloneNode(false));
We get a p element, cloned it with cloneNode , and then attached it to the body.
A shallow copy is done without any children. The false argument will make the copy shallow.
To make a deep copy with all the child nodes copied, we can change the argument of cloneNode to true :
const el = document.querySelector('p');
document.body.appendChild(el.cloneNode(true));
The insertBefore() Method
We can use the insertBefore method to add a child node before a given node.
For instance, we can write:
document.body.insertBefore(
document.createTextNode('first node'),
document.body.firstChild
);
We called inserBefore to insert a text node before the first child of the body .
Conclusion
We can add and remove nodes with various methods.
Their styles can be changed with the style property.
