• Home
  • JavaScript method to find nodes, add links to tags, and select all or none

JavaScript method to find nodes, add links to tags, and select all or none

zhangsan3333 2022-05-22 13:13:42 阅读数:919

javascriptmethodnodesaddlinks

How to find nodes

Insert picture description here

How to get elements effect
document.getElementById(“id”) adopt id Attribute to a unique element if there are multiple elements with the same name on the page id, Then you get the second 1 Elements
document.getElementsByName(“name”) adopt name Property gets a set of tags , Returns an array
document.getElementsByTagName (“ Tag name ”) Get a set of tags by tag name , Returns an array
document.getElementsByClassName(“ Class name ”) Get a set of tags by class name , Returns an array

Add a link to the tag 

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>JS</title>
<script type="text/javascript">
window.onload = function () {

// Find elements by tag name 
var b2 = document.getElementById("b2");
b2.onclick = function () {

// It returns an array object 
var aNodes = document.getElementsByTagName("a");
for (var index = 0; index < aNodes.length; index++) {

aNodes[index].href = "http://www.itcast.cn";
}
}
// according to name The property value of is not found 
var b3 = document.getElementById("b3");
b3.onclick = function () {

// according to name Find element for attribute value of , Returns an array object 
var divs = document.getElementsByName("one");
for (var index = 0; index < divs.length; index++) {

divs[index].innerHTML = "<a href='https://www.baidu.com/'>baidu.com</a>";
}
}
var b4 = document.getElementById("b4");
b4.onclick = function () {

// according to class Find element for attribute value of , Returns an array object 
var divs = document.getElementsByClassName("two")
for (var index = 0; index < divs.length; index++) {

divs[index].innerHTML = "<a href='https://www.google.com/'>Google.com</a>";
}
}
}
</script>
</head>
<body>
<input type="button" value="( By tag name ) to a Link add address " id="b2"/>
<input type="button" value="( adopt name attribute ) to div Set the value " id="b3"/>
<input type="button" value="( By class name ) to div Set the value " id="b4"/>
<hr/>
<a> Spreading wisdom Podcast </a><br/>
<hr/>
<div name="one"> Baidu </div>
<hr/>
<div class="two"> Google </div>
</body>
</html>

Insert picture description here
Insert picture description here

Achieve all options / Totally unselected , The function of commodity settlement 

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script type="text/javascript"> // Future generations / Totally unselected  function selectAll () {
 // Get the status of the check box below  var all = document.getElementById("all"); // Get all the checkboxes above  var items = document.getElementsByName("item"); for (var i = 0; i < items.length; i++) {
 items[i].checked = all.checked; } } // Reverse election  function reverseSelect () {
 // Get all the checkboxes above  var items = document.getElementsByName("item"); for (var i = 0; i < items.length; i++) {
 items[i].checked = !items[i].checked; } } </script>
</head>
<body>
<h3> List of commodity prices </h3>
<input type="checkbox" name="item" value="1500" /> Mountain Bike 1500<br />
<input type="checkbox" name="item" value="200" /> Women's fashion 200<br />
<input type="checkbox" name="item" value="3000" /> laptop 3000 element <br />
<input type="checkbox" name="item" value="800" /> Couple Watch 800<br />
<input type="checkbox" name="item" value="2000" /> santana 2000<br />
<hr/>
<input type="checkbox" id="all" onclick="selectAll()" /> Future generations / Totally unselected &nbsp;
<input type="button" id="reverse" onclick="reverseSelect()" value=" back choose "/>&nbsp;
</body>
</html>

Insert picture description here

copyright：author[zhangsan3333]，Please bring the original link to reprint, thank you. https://en.javamana.com/2022/142/202205211913270046.html

《 [Java] collection details