catalogue
!!! js is my video self-study in sgg. I may not have learned it all by myself. Please forgive me!!!
Use the getElementById() method to query
Use the getElementsByTagName() method to query
Use the getElementsByName() method to query
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
Gets the number of a class tag
Query the number of tags under a tag
!!! 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;
}