createElement
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script>
window.onload = function () {
let divs = document.createElement("div");
divs.innerHTML = "子天真溜";
document.body.appendChild(divs);
}
</script>
</head>
<body>
</body>
</html>
getElementById
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style type="text/css">
span{
color: red;
}
</style>
<script type="text/javascript">
function onclickFun() {
let byId = document.getElementById('001');
let value = byId.value
let patt = /^\w{5,12}$/;
let spanId = document.getElementById("002");
if (patt.test(value)) {
spanId.innerHTML = "用户名合法";
spanId.innerHTML = "<img src=\"right.png\" width=\"18\" height=\"18\">";
} else {
spanId.innerText = "用户名不合法";
spanId.innerHTML = "<img src=\"wrong.png\" width=\"18\" height=\"18\">";
}
}
</script>
</head>
<body>
use_name: <input type="text" id="001" value="112">
<span id="002"> </span>
<button onclick="onclickFun()">校验</button>
</body>
</html>
getElementsByName
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script type="text/javascript">
var checkAll = function () {
let name = document.getElementsByName("hobby");
for (var i = 0; i < name.length; i++) {
name[i].checked = true;
}
}
function checkNo() {
let name = document.getElementsByName("hobby");
for (var i = 0; i < name.length; i++) {
name[i].checked = false;
}
}
function checkReverse() {
let name = document.getElementsByName("hobby");
for (var i = 0; i < name.length; i++) {
name[i].checked = !name[i].checked;
}
}
</script>
</head>
<body>
兴趣爱好:
<input type="checkbox" name="hobby" value="cpp">C++
<input type="checkbox" name="hobby" value="Java">Java
<input type="checkbox" name="hobby" value="JS">JavaScript<br/>
<button onclick="checkAll()">全选</button>
<button onclick="checkNo()">全不选</button>
<button onclick="checkReverse()">反选</button>
</body>
</html>
getElementsByTagName
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script type="text/javascript">
function checkAll() {
let name = document.getElementsByTagName("input");
for (var i = 0; i < name.length; i++) {
name[i].checked = true;
}
}
</script>
</head>
<body>
兴趣爱好:
<input type="checkbox" value="cpp">C++
<input type="checkbox" value="Java">Java
<input type="checkbox" value="JS">JavaScript<br/>
<button onclick="checkAll()">全选</button>
</body>
</html>