Several ways to get page elements

In JS we can get to the elements in the page in the following ways:

1. Use ID to get the element of the object (the object element obtained is unique)

document.getElementById ("")

Cases:

<input type= "text" value= "Default text" id= "txt"/>
<input type= "button" value= "buttons" id= "btn"/>
<script>
The first way to get page elements getElementById
var txt = document. getElementById ("txt");
console. log (TXT);
console. log (txt. Value);
Txt. Value= "This is the modified text";

var btn = document. getElementById ("btn");
console. log (BTN);
console. log (btn. Value);

console. log (btn. ID);
Btn. Value = "button 6666";
</script>

2, through the tag name to obtain

Document.getelementstagname ("")

Cases

<input type= "text" value= "123"/>
<input type= "text" value= "456"/>
<input type= "text" value= "789"/>
<input type= "text" value= "abc"/>
<input type= "text" value= "MMMM"/>
<input type= "text" value= "KKK"/>

<script>
The second way to get the page elements is by signing

var inputs = document. getElementsByTagName ("input");
console. log (inputs);
For (Var i=0;i<inputs. length; i++) {
Console.log (Inputs[i].value);
Inputs[i]. value = "AAAAA";
}
</script>

The element obtained by means of a label name is an array, even if only one tag is placed within the group;

3, through the class name to obtain

Document.getelementsbyclassname ("")

Cases

Div class= "DV" ></div>
<p class= "DV" ></p>
<div class= "DV" ></div>
<p class= "DV" ></p>
<span class= "DV" ></span>
<script>
Third way to get page elements
var eles = document. Getelementsbyclassname ("DV"); A set of data is also obtained
console. log (Eles);
</script>

The element that gets to the object through the class name is also a set of data

However, Getelementsbyclassname has strong compatibility and is generally not recommended for use.

Look at the way to get the page elements below we are looking at the events in JS;

An event is an interactive moment of some characteristic that occurs in a page document or in a browser window.

The event has three elements as well as fiction:

The first event should have an event source: The object to register the event for

The second event should have an event name: What kind of object to register

The third event is to have an event handler: the code or result to execute

There are two ways to register events, namely, inline and in-line;

After watching the event, look at the difference between innerText and innerHTML.

For example

div id= "box" >
<p> This is some text </p>
<p> This is some text </p>
<p id= "P3" > This is some text </p>
<p> This is some text </p>
<p> This is some text </p>
</div>
<script>
Get Event Source
var box =Document. getElementById ("box");
var p3 =Document. getElementById ("P3");
Console. log (box.InnerText); Inner inside text text inside text only gets the textual content between the labels
Console. log (box.InnerHTML); is to get all the content between the tags, including the label

The effect is the same when there is only text information between the labels
Console. log (p3.InnerHTML);
Console. log (p3.InnerText);
</script>

Summary:

The difference between InnerText and InnerHTML is the same: the content between elements can be obtained by using innerText and InnerHTML; different points: 1, InnerText: Internal Text Only gets the text content between the labels 2, InnerHTML: Get all the content between the tags, including the label (as-is output) 3, innertext in the early Firefox browser is not supported, only support Textcontent, the new version of Firefox are supported; 4, innertext set when, will be output, The innerHTML will render the corresponding label as a normal label and the effect is the same when there is only text information between the labels.

Let's do it today!

Several ways to get page elements