DOM query in JavaScript

catalogue

!!! js is my video self-study in sgg. I may not have learned it all by myself. Please forgive me!!!

Find by Id

Use the getElementById() method to query

Find by TagName

Use the getElementsByTagName() method to query

Find by Name

Use the getElementsByName() method to query

Find by ClassName

Use the getElementsByClassName() method to query

Query all child nodes of a node

Query the first child node of a node

Query the parent node of a node

Query the previous sibling node of a node

Read the value attribute value of a node

Set the value attribute value of a node

Read the text value of a node

Get body tag

Get the root tag of html

Get all elements in the page

Gets the number of a class tag

Query the number of tags under a tag

HTML source code

  CSS source code

!!! js is my video self-study in sgg. I may not have learned it all by myself. Please forgive me!!!

Find by Id

Use the getElementById() method to query

var btn01 = document.getElementById("btn01");
btn01.onclick = function() {
	var bj = document.getElementById("bj");
	//Get the html code inside the element
	alert(bj.innerHTML);
}

Find by TagName

Use the getElementsByTagName() method to query

var btn02 = document.getElementById("btn02");
btn02.onclick = function() {
	var lis = document.getElementsByTagName("li");
	// alert(lis);

	for (var i = 0; i < lis.length; i++) {
		alert(lis[i].innerHTML);
	}
}

Find by Name

Use the getElementsByName() method to query

var btn03 = document.getElementById("btn03");
btn03.onclick = function() {
    var inputs = document.getElementsByName("gender");
	for (var i = 0; i < inputs.length; i++) {
		// alert(inputs[i].value);
		alert(inputs[i].className);
	}
}

Find by ClassName

Use the getElementsByClassName() method to query

var inner = document.getElementsByClassName("inner");
alert(inner);

>>>

[object HTMLCollection]

Query all child nodes of a node

//Returns #city's all child nodes
var btn05 = document.getElementById("btn05");
btn05.onclick = function() {
	var cities = document.getElementById("city");
	var cns = cities.children;
	alert(cns.length)
}

Query the first child node of a node

//Returns #phone's first child node
var btn06 = document.getElementById("btn06");
btn06.onclick = function() {
	var phone = document.getElementById("phone");
	var fir = phone.firstChild;
	alert(fir);
}

Query the parent node of a node

Because the functions are basically the same, they are encapsulated and easy to use

			function MyClick(idStr, fun) {
				var btn = document.getElementById(idStr);
				btn.onclick = fun;
			}

                //Returns #bj the parent node of the
				MyClick("btn07", function() {
					var bj = document.getElementById("bj");
					var pn = bj.parentNode;
					// alert(pn.innerHTML);
					alert(pn.innerText);
				});

Query the previous sibling node of a node

				//Return #android's previous sibling node
				MyClick("btn08", function() {
					var and = document.getElementById("android");

					// Gets a space if it is preceded by a space
					var ps = and.previousSibling;

					//Get previous sibling element
					var pe = and.previousElementSibling;
					alert(pe);
				});

Read the value attribute value of a node

				//Read #username's value attribute value
				MyClick("btn09", function() {
					var name = document.getElementById("username");
					alert(name.value);
				});

Set the value attribute value of a node

				//Set #username's value property value
				MyClick("btn10", function() {
					var name = document.getElementById("username");
					name.value = prompt();
				});

Read the text value of a node

				//Text value returned #bj by
				MyClick("btn11", function() {
					var bj = document.getElementById("bj");
					alert(bj.innerText)
				});

Get body tag

				//Get body tag
				var body = document.body;
                console.log(body);

Get the root tag of html

				//Get the root tag of html
				var html = document.documentElement;
                console.log(html);

Get all elements in the page

				//Get all elements in the page
				var all = document.all;
				console.log(all.length);

				for (var i = 0; i < all.length; i++) {
					console.log(all[i]);
				}

Gets the number of a class tag

				var box = document.getElementsByClassName("box");
				console.log(box.length);

Query the number of tags under a tag

Using the querySelector() method

				//If one is found, it will be returned
				var div = document.querySelector(".box div");
				console.log(div.innerHTML)

Use the querySelectorAll() method

				//Query multiple return arrays, even if there is only one return array
				var divs = document.querySelectorAll(".box");
				console.log(divs.length);

HTML source code

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
		<title>Untitled Document</title>
		<link rel="stylesheet" type="text/css" href="../css/select/css.css" />
		<script type="text/javascript">
			function MyClick(idStr, fun) {
				var btn = document.getElementById(idStr);
				btn.onclick = fun;
			}

			window.onload = function() {
				//Find #bj node
				var btn01 = document.getElementById("btn01");
				btn01.onclick = function() {
					var bj = document.getElementById("bj");
					//Get the html code inside the element
					alert(bj.innerHTML);
				}


				//Find all li nodes
				var btn02 = document.getElementById("btn02");
				btn02.onclick = function() {
					var lis = document.getElementsByTagName("li");
					// alert(lis);

					for (var i = 0; i < lis.length; i++) {
						alert(lis[i].innerHTML);
					}
				}


				//Find all nodes with name=gender
				var btn03 = document.getElementById("btn03");
				btn03.onclick = function() {
					var inputs = document.getElementsByName("gender");
					for (var i = 0; i < inputs.length; i++) {
						// alert(inputs[i].value);
						alert(inputs[i].className);
					}
				}
				btn03.onclick = function() {
					var inputs = document.getElementsByName("gender");
					for (var i = 0; i < inputs.length; i++) {
						// alert(inputs[i].value);
						alert(inputs[i].className);
					}
				}


				//Find all li nodes under #city
				var btn04 = document.getElementById("btn04");
				btn04.onclick = function() {
					var cities = document.getElementById("city");
					var lis = cities.getElementsByTagName("li");
					for (var i = 0; i < lis.length; i++) {
						alert(lis[i].innerHTML);
					}
				}


				//Returns #city's all child nodes
				var btn05 = document.getElementById("btn05");
				btn05.onclick = function() {
					var cities = document.getElementById("city");
					var cns = cities.children;
					alert(cns.length)
				}


				//Returns #phone's first child node
				var btn06 = document.getElementById("btn06");
				btn06.onclick = function() {
					var phone = document.getElementById("phone");
					var fir = phone.firstChild;
					alert(fir);
				}


				//Returns #bj the parent node of the
				MyClick("btn07", function() {
					var bj = document.getElementById("bj");
					var pn = bj.parentNode;
					// alert(pn.innerHTML);
					alert(pn.innerText);
				});


				//Return #android's previous sibling node
				MyClick("btn08", function() {
					var and = document.getElementById("android");

					// Gets a space if it is preceded by a space
					var ps = and.previousSibling;

					//Get previous sibling element
					var pe = and.previousElementSibling;
					alert(pe);
				});


				//Read #username's value attribute value
				MyClick("btn09", function() {
					var name = document.getElementById("username");
					alert(name.value);
				});


				//Set #username's value property value
				MyClick("btn10", function() {
					var name = document.getElementById("username");
					name.value = prompt(); 
				});


				//Text value returned #bj by
				MyClick("btn11", function() {
					var bj = document.getElementById("bj");
					alert(bj.innerText)
				});


				var inner = document.getElementsByClassName("inner");
				alert(inner);


			}
		</script>
	</head>
	<body>
		<div id="total">
			<div class="inner">
				<p>
					Which city do you like?
				</p>

				<ul id="city">
					<li id="bj">Beijing</li>
					<li>Shanghai</li>
					<li>Tokyo</li>
					<li>Seoul</li>
				</ul>

				<br>
				<br>

				<p>
					What kind of stand-alone game do you like?
				</p>

				<ul id="game">
					<li id="rl">Red police</li>
					<li>Actual situation</li>
					<li>Best flying car</li>
					<li>World of Warcraft</li>
				</ul>

				<br />
				<br />

				<p>
					What is the operating system of your mobile phone?
				</p>

				<ul id="phone">
					<li>IOS</li>
					<li id="android">Android</li>
					<li>Windows Phone</li>
				</ul>
			</div>

			<div class="inner">
				gender:
				<input class="hello" type="radio" name="gender" value="male" />
				Male
				<input type="radio" name="gender" value="female" />
				Female
				<br>
				<br>
				name:
				<input type="text" name="name" id="username" value="abcde" />
			</div>
		</div>
		<div id="btnList">
			<div><button id="btn01">lookup#bj node < / button > < / div >
			<div><button id="btn02">Find all li node</button></div>
			<div><button id="btn03">lookup name=gender All nodes of</button></div>
			<div><button id="btn04">lookup#All li nodes under city < / button > < / div >
			<div><button id="btn05">return#All child nodes of city < / button > < / div >
			<div><button id="btn06">return#The first child node of the phone < / button > < / div >
			<div><button id="btn07">return#bj's parent node < / button > < / div >
			<div><button id="btn08">return#The previous brother node of android < / button > < / div >
			<div><button id="btn09">return#Value attribute value of username < / button > < / div >
			<div><button id="btn10">set up#Value attribute value of username < / button > < / div >
			<div><button id="btn11">return#bj text value < / button > < / div >
		</div>
	</body>
</html>
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>dom</title>
		<script type="text/javascript">
			window.onload = function() {
				//Get body tag
				var body = document.body;

				//Get the root tag of html
				var html = document.documentElement;

				//Get all elements in the page
				var all = document.all;
				console.log(all.length);

				for (var i = 0; i < all.length; i++) {
					console.log(all[i]);
				}

				var box = document.getElementsByClassName("box");
				console.log(box.length);

				//If one is found, it will be returned
				var div = document.querySelector(".box div");
				console.log(div.innerHTML)

				//Query multiple return arrays, even if there is only one return array
				var divs = document.querySelectorAll(".box");
				console.log(divs.length);
			}
		</script>
	</head>
	<body>
		<div class="box">
			<div>box Medium div</div>
		</div>
		<div class="box">
			<div>box Medium div</div>
		</div>
		<div class="box">
			<div>box Medium div</div>
		</div>

	</body>
</html>

  CSS source code

@CHARSET "UTF-8";

body {
	width: 800px;
	margin-left: auto;
	margin-right: auto;
}

button {
	width: 300px;
	margin-bottom: 10px;
}

#btnList {
	float:left;
}

#total{
	width: 450px;
	float:left;
}

ul{
	list-style-type: none;
	margin: 0px;
	padding: 0px;
}

.inner li{
	border-style: solid;
	border-width: 1px;
	padding: 5px;
	margin: 5px;
	background-color: #99ff99;
	float:left;
}

.inner{
	width:400px;
	border-style: solid;
	border-width: 1px;
	margin-bottom: 10px;
	padding: 10px;
	float: left;
}

Tags: Javascript Front-end html

Posted on Thu, 02 Dec 2021 16:26:39 -0500 by shamoon