一、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.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;
}
function checkNo() {
var hobbies = document.getElementsByName("hobby");
for (var i = 0; i < hobbies.length; i++) {
//checked 表示复选框的选中状态，如果选中是true，不选中是false
//checked 这个属性可读可写
hobbies[i].checked = false;
}
}
function checkReverse(){
for (var i = 0; i < hobbies.length; i++) {
//checked 表示复选框的选中状态，如果选中是true，不选中是false
//checked 这个属性可读可写
hobbies[i].checked = !hobbies[i].checked;
}
}
}
</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.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.createElement( tagName)示例代码：**
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script type="text/javascript">
window.onload = function () {
//现在需要我们使用js代码来创建html标签，并显示在页面上
//标签的内容就是<div>加油加油</div>
var divobj = document.createElement("div");//在内存中<div></div>
alert(divobj);
var textNodeObj = document.createTextNode("呜呼呜呼");//有一个文本节点对象
divobj.appendChild(textNodeObj);
divobj.innerHTML = "加油加油" //现在还只是在内存中 要放到body中
//添加子元素
document.body.appendChild(divobj);
}
</script>
</head>
<body>
</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>
四、节点的常用属性和方法
节点就是标签对象
方法：
通过具体的元素节点调用
getElementsByTagName()
方法，获取当前节点的指定标签名孩子节点
appendChild( oChildNode )
方法，可以添加一个子节点，oChildNode 是要添加的孩子节点
属性：
childNodes
属性，获取当前节点的所有子节点
firstChild
属性，获取当前节点的第一个子节点
lastChild
属性，获取当前节点的最后一个子节点
parentNode
属性，获取当前节点的父节点
nextSibling
属性，获取当前节点的下一个节点
previousSibling
属性，获取当前节点的上一个节点
className
用于获取或设置标签的 class 属性值
innerHTML
属性，表示获取/设置起始标签和结束标签中的内容
innerText
属性，表示获取/设置起始标签和结束标签中的文本
练习：05.DOM 查询练习
示例代码：
<html>
<head>
<meta charset="UTF-8">
<title>dom查询</title>
<link rel="stylesheet" type="text/css" href="style/css.css" />
<script type="text/javascript">
window.onload = function(){
//1.查找#bj节点
document.getElementById("btn01").onclick = function () {
var bjobj = document.getElementById("bj");
alert(bjobj.innerHTML);
}
//2.查找所有li节点
var btn02Ele = document.getElementById("btn02");
btn02Ele.onclick = function(){
vat lis = document.getElementsByTagName("li");
alert(lis.length);
};
//3.查找name=gender的所有节点
var btn03Ele = document.getElementById("btn03");
btn03Ele.onclick = function(){
var genders = document.getElementsByName("gender");
alert(genders.length);
};
//4.查找#city下所有li节点
var btn04Ele = document.getElementById("btn04");
btn04Ele.onclick = function(){
//1.获取id为city的节点
//2.通过city结点，getElementsByTagName 按标签查子结点
var lis = document.getElementById("city").getElementsByTagName("li");
alert(lis.length);
};
//5.返回#city的所有子节点
var btn05Ele = document.getElementById("btn05");
btn05Ele.onclick = function(){
alert(document.getElementById("city").childNodes.length);
};
//6.返回#phone的第一个子节点
var btn06Ele = document.getElementById("btn06");
btn06Ele.onclick = function(){
alert(document.getElementById("phone").firstChild.innerHTMl);
};
//7.返回#bj的父节点
var btn07Ele = document.getElementById("btn07");
btn07Ele.onclick = function(){
//1.查找id为bj的结点
//2.bj结点获取父节点
document.getElementById("bj").parentNode;
};
//8.返回#android的前一个兄弟节点
var btn08Ele = document.getElementById("btn08");
btn08Ele.onclick = function(){
//1.查找id为查找id为android的结点的结点
//2.通过android结点获取前一个节点
alert(document.getElementById("android").previousSibling);
};
//9.读取#username的value属性值
var btn09Ele = document.getElementById("btn09");
btn09Ele.onclick = function(){
alert(document.getElementById("username").value);
};
//10.设置#username的value属性值
var btn10Ele = document.getElementById("btn10");
btn10Ele.onclick = function(){
document.getElementById("username").value = "加油";
};
//11.返回#bj的文本值
var btn11Ele = document.getElementById("btn11");
btn11Ele.onclick = function(){
alert(document.getElementById("bj").innerHTML);
alert(document.getElementById("bj").innerText);
};
};
</script>
</head>
<body>
<div id="total">
<div class="inner">
<p>
你喜欢哪个城市?
</p>
<ul id="city">
<li id="bj">北京</li>
<li>上海</li>
<li>东京</li>
<li>首尔</li>
</ul>
<br>
<br>
<p>
你喜欢哪款单机游戏?
</p>
<ul id="game">
<li id="rl">红警</li>
<li>实况</li>
<li>极品飞车</li>
<li>魔兽</li>
</ul>
<br />
<br />
<p>
你手机的操作系统是?
</p>
<ul id="phone"><li>IOS</li><li id="android">Android</li><li>Windows Phone</li></ul>
</div>
<div class="inner">
gender:
<input 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">查找#bj节点</button></div>
<div><button id="btn02">查找所有li节点</button></div>
<div><button id="btn03">查找name=gender的所有节点</button></div>
<div><button id="btn04">查找#city下所有li节点</button></div>
<div><button id="btn05">返回#city的所有子节点</button></div>
<div><button id="btn06">返回#phone的第一个子节点</button></div>
<div><button id="btn07">返回#bj的父节点</button></div>
<div><button id="btn08">返回#android的前一个兄弟节点</button></div>
<div><button id="btn09">返回#username的value属性值</button></div>
<div><button id="btn10">设置#username的value属性值</button></div>
<div><button id="btn11">返回#bj的文本值</button></div>
</div>
</body>
</html>
本文章为转载内容，我们尊重原作者对文章享有的著作权。如有内容错误或侵权问题，欢迎原作者联系我们进行内容更正或删除文章。
