1.getElementByid
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script type="text/javascript">
/*
当用户点击校验按钮，需要获取输出框中的内容，然后验证其是否合法
验证的规则是：必须由字母、下划线、数字组合的5到12位
*/
function onclickfun() {
//1.获取输入框的内容（当操作一个标签的时候，一定要先获取该标签对象）
var usernameobject = document.getElementById("username");
var usernameText = usernameobject.value;
//如何验证 字符串符合某个规则，需要使用正则表达式
var patt=/^w{5,12}$/
/*
getElementById方法只返回对应id值的的第一个对象
test()方法用来测试某个字符串，是否匹配规定规则
匹配就返回true，不匹配返回false
innerHTML 属性 表示起始标签和结束标签的内容，该属性可读可写
*/
var userspan = document.getElementById("userspan");
userspan.innerHTML ="javascript";
if(patt.test(usernameText)){
userspan.innerHTML ="用户名合法";
}
else{
userspan.innerHTML ="用户名不合法";
}
}
</script>
</head>
<body>
用户名：<input type="text" id="username" /></br>
<span style="color: #ff0000" id="userspan"></span>
<button onclick="onclickfun();">校验</button>
</body>
</html>
2.正则
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script type="text/javascript">
/*//表示要求的字符串中，是否包含字母e
//方式一：var patt = new RegExp("e");
//方式二：
var patt = /e/;
alert(patt);// 显示结果 /e/
var str = "abcd";
alert(patt.test(str));//false
*/
var patt = /[abc]/;//表示校验的字符串中，是否包含a或b或c
var patt2= /[a-z]/;//表示校验的字符串中，是否包含小写字母
var patt3= /[0-9]/;//表示校验的字符串中，是否包含数字
/*
w 元字符：表示单词字符包含：a-z、A-Z、0-9、以及下划线、包含_(下划线)字符
W 非单词字符
n+(例如：a+) 表示字符串中至少包含一个n(a)
n*、n？ 表示字符串中是否包含0个 或 多个n
n{X} 表是字符串是否包含连续X个n
n{X,Y} 表示字符串最少包含X个n，最多包含Y个n
一般应用 ： ^n{X,Y}$ 表示从头到尾全匹配
n{X,} 表示字符串最少包含X个n
n$ 表示字符串是否以n结尾
^n 表示字符串是否以n开头
*/
</script>
</head>
<body>
</body>
</html>
3.getElementsByName
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script>
/*
document.getElementsByName(): 是根据指定的name属性查询返回多个标签对象集合，
该集合的操作和数组一样，集合中每个元素都是dom对象
checked表示复选框的选中状态，如果选中为true，不选中为false
*/
function checkAll() {
var hobbies = document.getElementsByName("hobby");
for(var i =0;i<hobbies.length;i++){
hobbies[i].checked = true;
}
}
function checknone() {
var hobbies = document.getElementsByName("hobby");
for(var i =0;i<hobbies.length;i++){
hobbies[i].checked = false;
}
}
function checkReverse() {
var hobbies = document.getElementsByName("hobby");
// 方式一： hobbies[i].checked = !hobbies[i].checked;
for(var i =0;i<hobbies.length;i++){
if(hobbies[i].checked){
hobbies[i].checked = false;
}else{
hobbies[i].checked = true;
}
}
}
</script>
</head>
<body>
喜爱课程:
<input type="checkbox" name="hobby" value="java"/>java
<input type="checkbox" name="hobby" value="javaweb"/>javaweb
<input type="checkbox" name="hobby" value="oracle"/>oracle
<br/>
<button onclick="checkAll();">全选</button>
<button onclick="checknone();">全不选</button>
<button onclick="checkReverse();">反选</button>
</body>
</html>
4.getElementsByTagName
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script>
/*
document.getElementsByTagName(): 是按照指定标签名来指定查询并返回集合
该集合的操作跟数组一样，集合中都是dom对象
*/
function checkAll() {
var inputs = document.getElementsByTagName("input");
for(var i=0;i<inputs.length;i++){
inputs[i].checked = true;
}
}
</script>
</head>
<body>
喜爱课程:
<input type="checkbox" value="java"/>java
<input type="checkbox" value="javaweb"/>javaweb
<input type="checkbox" value="oracle"/>oracle
<br/>
<button onclick="checkAll();">全选</button>
<!--节点的常用属性和方法
节点就是标签对象
方法：
通过具体的元素节点调用：getElementsTagName() :获取当前节点的之地那个标签名孩子节点
appendChildNode(ochildnode):可以添加一个子节点，ochildnode是要添加的孩子节点
属性
childNodes ：获取当前节点的所有子节点
firstChild ：获取当前节点的第一个子节点
lastChild ：获取当前节点的最后一个子节点
parentNode：获取当前节点的父节点
nextSibling ：获取当前节点的下一个节点
previewSibling ：获取当前节点的上一个节点
className : 用于获取/设置标签的class属性值
innerHtml： 获取/设置起始标签和结束标签中的内容
innerText： 获取/设置起始标签和结束标签中的文本
-->
</body>
</html>
5.createElement
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script type="text/javascript">
window.onload= function () {
//需要js代码来创建html标签，并创建在页面上
//标签内容是<div>javaScript</div>
var htmlDivElement = document.createElement("div");//在内存中 <div></div>
htmlDivElement.innerHTML="javaScript";//在内存中 <div>javascript</div>
//div需要在body标签内，给body添加子元素
document.body.appendChild(htmlDivElement);
}
</script>
</head>
<body>
</body>
</html>