一、Document 对象（*****重点）
Document 对象的理解：
第一点：Document 它管理了所有的 HTML 文档内容。
第二点：document 它是一种树结构的文档。有层级关系。
第三点：它让我们把所有的标签 都 对象化
第四点：我们可以通过 document 访问所有的标签对象。
那么 html 标签 要 对象化 怎么办？
二、Document 对象中的方法介绍（*****重点）
document.getElementById(elementId)
通过标签的 id 属性查找标签 dom 对象，elementId 是标签的 id 属性值
document.getElementsByName(elementName)
通过标签的 name 属性查找标签 dom 对象，elementName 标签的 name 属性值
document.getElementsByTagName(tagname)
通过标签名查找标签 dom 对象。tagname 是标签名document.createElement( tagName)
方法，通过给定的标签名，创建一个标签对象。tagName 是要创建的标签
document.getElementById(elementId)示例代码：
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script type="text/javascript">
/*需求：当用户点击了校验按钮，要获取输出框中的内容。然后验证其是否合法。
* 验证的规则是：必须由字母，数字。下划线组成。并且长度是 5 到 12 位。*/
function onclickfun(){
//1.当我们要操作一个标签的时候，一定要先获取这个标签对象
var usernameobj = document.getElementById("username");
//获取文本框对应的文本内容
var usernameText = usernameobj.value;
//如何验证字符串，符合某个规则，需要使用正则表达式
var patt = /^w{5,12}$/;
/*
*
* test()方法用于测试某个字符串，是不是匹配我的规则
* 匹配就返回true，不匹配就返回false
* */
var usernameSpanobj = document.getElementById("usernameSpan");
//alert(usernameSpanobj.innerHTML);
//innerHtml 表示起始标签和结束标签中的内容
//innerHtml 这个属性可读，可写
if (patt.test(usernameText)){
//alert("用户名合法");
//usernameSpanobj.innerHTML = "用户名合法";
usernameSpanobj.innerHTML = "<img src=\"right.png\" width=\"18\"height=\"18\">";
}else{
//alert("用户名不合法")
usernameSpanobj.innerHTML = " <img src=\"right.png\" width=\"18\"height=\"18\">";
}
}
</script>
</head>
<body>
用户名：<input type="text" id="username"/>
<span id="usernameSpan" style="color: red">
</span>
<button onclick="onclickfun()">校验</button>
</body>
</html>
document.getElementsByName(elementName)示例代码：
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script type="text/javascript">
//全选
function checkAll(){
//document.getElementsByTagName("input");是按照指定标签名来进行查询并返回集合
//并且集合的操作和数组一样
//集合中都是domduix
//集合中元素顺序 是他们在html页面中从上到下的顺序
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" checked="checked">java
<input type="checkbox" value="c">c
<input type="checkbox" value="js">js<br/>
<button onclick="checkAll()">全选</button>
</body>
</html>
document.getElementsByTagName(tagname)示例代码：
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script type="text/javascript">
//全选
function checkAll(){
//让所有复选框都选上
//document.getElementsByName();是根据 指定的name属性查询返回多个标签对象
//这个集合的操作和数组一样
//集合中每个元素都是dom对象
//这个集合的元素顺序是他们在html页面中从上到下的顺序
var hobbies = document.getElementsByName("hobby");
for (var i = 0; i < hobbies.length; i++) {
//checked 表示复选框的选中状态，如果选中是true，不选中是false
//checked 这个属性可读可写
hobbies[i].checked = true;
}
}
}
</script>
</head>
<body>
兴趣爱好：<input type="checkbox" name="hobby" value="java" checked="checked">java
<input type="checkbox" name="hobby" value="c">c
<input type="checkbox" name="hobby" value="js">js<br/>
<button onclick="checkAll()">全选</button>
<button onclick="checkNo()">全不选</button>
<button onclick="checkReverse()">反选</button>
</body>
</html>
注：
document 对象的三个查询方法，如果有 id 属性，优先使用 getElementById 方法来进行查询
如果没有 id 属性，则优先使用 getElementsByName 方法来进行查询
如果 id 属性和 name 属性都没有最后再按标签名查 getElementsByTagName
以上三个方法，一定要在页面加载完成之后执行，才能查询到标签对象
三、正则表达式
菜鸟教程 js正则表达式
JavaScript 正则表达式 | 菜鸟教程 (runoob.com)
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script type="text/javascript">
//表示字符串中是否包含e
//var patt = new RegExp("e");
//var patt = /e/; //也是正则表达式对象
//表示字符串中，是否包含a或b或c
//var patt = /[abc]/;
//表示字符串，是否包含小写字母
//var patt = /[a-z]/;
//表示字符串，是否包含大写字母
//var patt = /[A-Z]/;
//表示字符串，是否包含数字
//var patt = /[0-9]/;
//表示字符串，是否包含字母、数字、下划线
//var patt = /\w/;
//表示字符串,是否包含至少一个a
//var patt = /a+/;
//表示字符串,是否*包含*零个 或 多个a
//var patt = /a*/;
//表示字符串,是否*包含*一个 或 零个a
//var patt = /a?/;
//表示字符串,是否包含连续3个a
//var patt = /a{3}/;
//表示字符串,是否包含至少3个连续的a，最多5个连续的a
//var patt = /a{3,5}/;
//表示字符串,是否包含至少3个连续的a
//var patt = /a{3,}/;
//表示字符串,必须以a结尾
//var patt = /a$/;
//表示字符串,必须以a开头
//var patt = /^a/;
//表示字符串,从头到位完全匹配
var patt = /^a{3，5}$/;
alert(patt);// /e/
var str = "aaaaa";
alert(patt.test(str));
</script>
</head>
<body>
</body>
</html>