Detailed explanation of how JavaScript operates HTML elements and styles

Detailed explanation of how JavaScript operates HTML elements and styles_Basic knowledge

WBOY

Release： 2016-05-16 15:35:47

Original

1223 people have browsed it

JavaScript HTML DOM element (node)
Create new HTML element
To add a new element to the HTML DOM, you must first create the element (element node) and then append the element to an existing element.
Example

<div id="div1">
<p id="p1">This is a paragraph.</p>
<p id="p2">This is another paragraph.</p>
</div>

<script>
var para=document.createElement("p");
var node=document.createTextNode("This is new.");
para.appendChild(node);

var element=document.getElementById("div1");
element.appendChild(para);
</script>

Copy after login

Example analysis:
This code creates a new

element:

var para=document.createElement("p");

Copy after login

To add text to a

element, you must first create a text node. This code creates a text node:

var node=document.createTextNode("This is a new paragraph.");

Copy after login

Then you have to append this text node to the

element:

para.appendChild(node);

Copy after login

Finally you must append the new element to an existing element.
This code finds an existing element:

var element=document.getElementById("div1");

Copy after login

The following code adds a new element after an existing element:

element.appendChild(para);

Copy after login

Delete existing HTML elements
This code appends a new element to this existing element:
Example

<div id="div1">
<p id="p1">This is a paragraph.</p>
<p id="p2">This is another paragraph.</p>
</div>
<script>
var parent=document.getElementById("div1");
var child=document.getElementById("p1");
parent.removeChild(child);
</script>

Copy after login

Example analysis
This HTML document contains a

element with two child nodes (two

elements):

<div id="div1">
<p id="p1">This is a paragraph.</p>
<p id="p2">This is another paragraph.</p>
</div>

Copy after login

Find the element with id="div1":

var parent=document.getElementById("div1");

Copy after login

Find the

element with id="p1":

var child=document.getElementById("p1");

Copy after login

Remove child elements from parent elements:

parent.removeChild(child);

Copy after login

lamp It would be great if you could delete an element without referencing the parent element.
But it's a pity. The DOM needs to know the element you need to delete, and its parent element.
This is a common solution: find the child element you wish to remove and then use its parentNode property to find the parent element:

var child=document.getElementById("p1");
child.parentNode.removeChild(child);

Copy after login

JavaScript HTML DOM - Changing CSS
The HTML DOM allows JavaScript to change the style of HTML elements.
Change HTML style
To change the style of an HTML element, use this syntax:
document.getElementById(id).style.property=new style
The following example changes the style of the

element:
Example

<html>
<body>

<p id="p2">Hello World!</p>

<script>
document.getElementById("p2").style.color="blue";
</script>

<p>The paragraph above was changed by a script.</p>

</body>
</html>

Copy after login

This example changes the style of the HTML element with id="id1" when the user clicks the button:
Example

<!DOCTYPE html>
<html>
<body>

<h1 id="id1">My Heading 1</h1>
<button type="button" 
onclick="document.getElementById('id1').style.color='red'">
Click Me!</button>

</body>
</html>

Copy after login