“This is the fifth day of my participation in the November Gwen Challenge. See details of the event: The Last Gwen Challenge 2021”.

【JavaScript practical skills (2) 】Js operation DOM (by the problem caused by the article revision, the new big guy can)

The blog instructions

The information involved in the article comes from the Internet collation and personal summary, meaning is the summary of personal learning and experience, if there is any infringement, please contact me to delete, thank you!

instructions

The source of this article is a note before the change, which is to get JS to get the value of the input tag. At that time, I only talked about this example, of course, the following example is still retained, after all, to care about the feelings of old users, belongs to the incremental demand.

Judging from an example at that time, there are still many points to be summarized or learned.

The new guy may just want to solve a problem, and the boss may want to see if there is anything to add to the summary.

Js gets the value inside the input tag

demand

Sometimes we need to get some value in the input, such as when sending the mobile phone verification code, first write the following code in the HTML

code

HTML a simple input tag

<input type="text" name="name" id="phone" /> 
Copy the code

Js gets the value of the input tag

var phone = document.getElementById("phone").value;
Copy the code
instructions

Look at the code above, which uses the DOM API to get the value of the input tag. Now that it’s available, the DOM also provides an API to change or replace it, and the DOM can be executed in JS, so the interaction between JS and HTML is here.

One hookup, how much more can we do?

So all kinds of template engines, responsive, JS animation are coming.

Do you feel that the advanced things are coming, not so fast, back to the theme, this chapter is mainly about JS manipulation of DOM.

The ability of JS

When talking about JS manipulation of the DOM, I feel it is necessary to talk about THE ability of JS.

Below is the object of the HTML DOM tree, figure from the W3C, www.w3school.com.cn/js/js_htmld…

With this object model, JavaScript gets all the power to create dynamic HTML:

  • JavaScript can change all HTML elements in a page
  • JavaScript can change all HTML attributes on a page
  • JavaScript can change all CSS styles in a page
  • JavaScript can remove existing HTML elements and attributes
  • JavaScript can add new HTML elements and attributes
  • JavaScript can react to all existing HTML events on a page
  • JavaScript can create new HTML events in a page

Seeing the content above, I feel like I know how to use JS, you can do anything, change anything. This is not seen by the product, or some of the demand you die, not push.

The DOM to understand

Since it is JS to operate DOM, then the first is the need to be familiar with DOM, just in front of a written article about DOM, [browser] talk about DOM

Common ways to manipulate the DOM

methods describe
getElementById() Returns the element with the specified ID.
getElementsByTagName() Returns a node-list (collection/array of nodes) containing all elements with the specified label name.
getElementsByClassName() Returns a node list containing all elements with the specified class name.
appendChild() Adds a new child node to the specified node.
removeChild() Delete child nodes.
replaceChild() Replace the child node.
insertBefore() Inserts a new child node before the specified child node.
createAttribute() Create the properties node.
createElement() Create the element node.
createTextNode() Create a text node.
getAttribute() Returns the value of the specified property.
setAttribute() Sets or modifies the specified property to the specified value.

Get the node of the DOM

GetElementsByTagName () : Gets element objects by element name. The return value is an array.

GetElementsByClassName () : Gets element objects based on the Class attribute value. The return value is an array.

GetElementsByName () : Gets element objects based on the name attribute value. The return value is an array.

These are the four most common ways to get elements

getElementById()

Gets the element object based on the ID attribute value. The id attribute value is generally unique.

If you need to find a particular element in a document, the most efficient method is getElementById(). When operating on a particular element in the document, it is best to give that element an ID attribute, give it a unique name, You can then use that ID to find the desired element.

Example:

<html>
<head>
<script type="text/javascript">
function getValue(){
  var x = document.getElementById("test")
  alert(x.innerHTML)
}
</script>
</head>
<body>

<h1 id="test" onclick="getValue()">my</h1>
<p>Click on mine and see what it looks like</p>

</body>
</html>
Copy the code

Effect:

Code parsing:

Get the node with element ID test by getElementById, and then print the text of the test node.

The image below shows the HTML node obtained

getElementsByClassName()

The getElementsByClassName() method returns a collection of all elements in the document with the specified class name as a NodeList object.

The NodeList object represents an ordered list of nodes. The NodeList object is accessed by the node index number in the NodeList (the index number starts at 0).

Example:

<! DOCTYPEhtml>
<html>
<head>
<meta charset="utf-8">
<title>test</title>
<style>
.example {
    border: 1px solid black;
    margin: 5px;
}
</style>
</head>
<body>

<div class="example">
  <p>I was the first</p>
</div>
<div class="example color">
  <p>I was the second</p>
</div>
<div class="example color">
  <p>I was the third</p>
</div>
<button onclick="myFunction()">Click on me to see the effect</button>
<script>
function myFunction() {
    var x = document.getElementsByClassName("color");
    x[0].style.backgroundColor = "red";
  	console.log(x)
}
</script>

</body>
</html>
Copy the code

Effect:

Code parsing:

GetElementsByClassName gets an object with the class attribute “color”, resulting in a NodeList object representing the collection of elements with the specified class name. The order of elements in the collection is sorted by the order in which they appear in the code. Set the background color of the first one to red.

Note: Internet Explorer 8 and earlier VERSIONS of IE do not support the getElementsByClassName() method

Insert DOM node

There are two ways to insert a node, and they have different meanings.

appendChild()

A new child node is inserted at the end of the parent node.

AppendChild (new child node);Copy the code
insertBefore()
  • Insert a new node before the reference node.
  • If the reference node is null, it inserts a child node at the end of the parent node.
InsertBefore (new child, as a reference child);Copy the code

Example:

<! DOCTYPEhtml>
<html>
<head>
<meta charset="utf-8">
<title>test</title>
</head>
<body>

<ul id="list">
  <li>The first</li>
  <li>The second</li>
</ul>
<p id="demo">Click the button to add the item to the list</p>
<button onclick="myFunction1()">Click on me and add it later</button>
  <button onclick="myFunction2()">Click on me, add in front</button>
<script>
function myFunction1(){
	var node = document.createElement("LI");
	var textnode = document.createTextNode("I'm new.");
	node.appendChild(textnode);
	document.getElementById("list").appendChild(node);
}
  
function myFunction2(){
	var node = document.createElement("LI");
	var textnode = document.createTextNode("I'm new.");
	node.appendChild(textnode);
  var list = document.getElementById("list")
	list.insertBefore(node, list.childNodes[0]);
}
</script>

</body>
</html>
Copy the code

Effect:

Remove nodes

removeChild()

You must specify which child node to delete

RemoveChild (child node);Copy the code

If the node itself needs to be deleted

node.parentNode.removeChild(node);
Copy the code

Example:

<! DOCTYPEhtml>
<html>
<head>
<meta charset="utf-8">
<title>test</title>
</head>
<body>

<ul id="list">
  <li>The first</li>
  <li>The second</li>
</ul>
<p id="demo">Click the button to add the item to the list</p>
<button onclick="myFunction1()">Click on me and add it later</button>
  <button onclick="myFunction2()">Click on me, add in front</button>
  <button onclick="myFunction3()">Click on me to delete the first node</button>
<script>
function myFunction1(){
	var node = document.createElement("LI");
	var textnode = document.createTextNode("I'm new.");
	node.appendChild(textnode);
	document.getElementById("list").appendChild(node);
}
  
function myFunction2(){
	var node = document.createElement("LI");
	var textnode = document.createTextNode("I'm new.");
	node.appendChild(textnode);
  var list = document.getElementById("list")
	list.insertBefore(node, list.childNodes[0]);
}
  
function myFunction3(){
  var list = document.getElementById("list")
	list.removeChild(list.childNodes[0]);
}
  
</script>

</body>
</html>
Copy the code

Effect:

Replication node (clone node)

cloneNode()

Clone node

The node to copy. CloneNode (); The node to copy. CloneNode (true);Copy the code

The effect is different with or without arguments in parentheses.

  • No parameter/Parameter false: Only the node itself is copied, not its child nodes.
  • Parameter true: copies both the node itself and all of its children.

Example:

<! DOCTYPEhtml>
<html>
<head>
<meta charset="utf-8">
<title>test</title>
</head>
<body>

<ul id="list">
  <li>The first</li>
  <li>The second</li>
</ul>
<button onclick="myFunction()">Click me to clone the node</button>

<script>
  
function myFunction(){
	var itm = document.getElementById("list");
	var cln = itm.cloneNode(true);
	document.getElementById("list").appendChild(cln);
}
  
</script>

</body>
</html>
Copy the code

Effect:

Set the properties of a node

It’s also about getting, modifying and deleting

Gets the attribute value of the node
Element node. Attribute; Element node [attribute]; GetAttribute (" Attribute name ");Copy the code

The former manipulates labels directly, while the latter treats them as DOM nodes.

Sets the value of a node property
Mynode. SRC = "XXXX" // Modify SRC attribute value mynode. className = "XXXX "; // Modify the name element node of class. SetAttribute (attribute name, new attribute value);Copy the code

The former manipulates labels directly, while the latter treats them as DOM nodes.

The attributes of a node are deleted
Element node. RemoveAttribute;Copy the code
conclusion

DOM nodes are recommended instead of manipulating labels directly.

Thank you

Universal network

Novice tutorial

As well as hard-working self, personal blog, GitHub test, GitHub

Public number – return child mo, small procedure – small return blog