SoFunction
Updated on 2025-04-07

Methods in js are explained in detail

1. Three commonly used js methods to obtain elements

1 ("");
2 ();
3 ();

var doc=document;
var box=("box");
var li=("li");
var surfaces=("surfaces");

querySelector() can directly add click events, while querySelectorAll() can not directly add click events.

2、querySelector()

var node = (“#lover”); 
// Get the first element in the document with id=lovevar node = (“.lover”); 
// Get the first class="lover" element in the documentvar node = (“”); 
// Get the first p element of class="lover"var node = (“a[target]”);
// Get the first a element with target attributevar element = (‘.foo,.bar');
//Return the first element with foo or bar style class(“body”).style=”"; 
// Remove the style attribute(“h2,h3”). = “blue”;
//Add background color to the first h2 element of the document, but if in the document

Before the element, the element will be set with the specified background color. Summary. When selecting multiple elements, which matches first is who, and only one is selected.
The querySelector() method returns only the first element that matches the specified selector.

3、querySelectorAll

elementList = (selectors);

elementList is a static object of type NodeList.

selectors is a comma-concatenated string containing one or more CSS selectors.

Find the tags containing the "target" attribute in the document and set borders for it:

var x = ("a[target]");
var i;
for (i = 0; i < ; i++) {
x[i]. = "10px solid red";
}

-------------------------------------------
let t0 = ();
let li = ('li');
("The number of li", );
for (let i = 0; i < ; i++) {
    li[i].textContent = i;
}
let t1 = ();
("time consuming" + (t1 - t0) + "millisecond");

When multiple identical class tags (or multiple identical tags (such as multiple divs) appear in the page, if you need to return all elements, use the querySelectorAll() method instead.

This method returns all elements that meet the conditions, and the result is a nodeList collection. The search rules are the same as mentioned above. ---->querySelectorAll gets a pseudo-array DOM.

The result of () is a NodeList array, but it is not an ordinary js array (Array), so you cannot directly call the Array method.

<div >

<ul>
<li data-href=''>tagname 111</li>
<li class="surfaces">This isclase? 222</li>
<li class="surfaces">This isclass333</li>
<li class="surfaces" data-href=''>This isclass444</li>
</ul>

</div>
<br>

("box").addEventListener("click", function(){
var attr=('[data-href]');
(attr);
},!1);

<input type="checkbox" name="gender" value="male" checked>
<input type="checkbox" name="gender" value="female">

<div lang="en"><q>This English quote has a <q>nested</q> quote inside.</q></div>
<div lang="fr"><q>This French quote has a <q>nested</q> quote inside.</q></div>
<div lang="de"><q>This German quote has a <q>nested</q> quote inside.</q></div>

<input type="text" placeholder="I'm a placeholder">
<input type="text" placeholder="I'm a placeholder" value="My value covers the placeholder">

let target = ('input[type="checkbox"]:checked');
('Use querySelector to find', target)

let fr = ('div:lang(fr)');
('Use querySelector to find', fr);

let pl = ('input:placeholder-shown');
('Use querySelector to find', pl);

and

<div >
<ul>
<li >tagname 111</li>
<li class="surfaces">This isclase 222</li>
<li class="surfaces">This isclass333</li>
<li class="surfaces">This isclass444</li>
</ul>
</div>

--------------------------------------------------------------------------

var query_id=query('#box'); //dom id 
var query_class=query('.surfaces'); // dom class 
var query_tagname=query('li') //dom tag
('query'+query_id.innerHTML); //

('query'+query_class.innerHTML); The first222

('query'+query_tagname.innerHTML); The first222

--------------------------------------------------------------------------

1 var query = (document); //Singlevar query_id=query('#box'); //dom id
var query_class=query('.surfaces'); // dom class
var query_tagname=query('li') //dom tagquery_id.addEventListener('click',function(){
('click_query_id'+);   //click surfaces 2222
});

query_class.addEventListener('click',function(){
var e=e||;
('click_query_class'+); //click surfaces 2222
();
});

query_tagname.addEventListener('click', function(e){
var e=e||;
('click_query_tagname' + ); //click surfaces 2222
();
});

Summarize

This is all about this article about the () method in js. For more related contents of the () method in js, please search for my previous articles or continue browsing the related articles below. I hope everyone will support me in the future!