文章目录
- DOM模型
- document对象中对应的方法
- getelementById
- 正则表达式
- getElementByName
- getElementByTagName
- 查询方法小结
- createElement创建节点对象
- 额外说明
DOM模型
dom全称是Document Object Model 文档对象模型——将文档中的标签，属性，文本转换成对象来管理（注意，这里文本信息也是一个节点）
html的双标签构成的嵌套结构如同一棵多叉树，外层元素就是父亲节点，内层节点就是儿子节点，html的文档树哪层结构如下图所示：其中每个元素都是一个节点，每个节点都有对应相应于其功能的属性。
在html中一个html页面就相当于一个对象，被称为document，该对象又包含了许多子对象也就是文件树中的各个节点。这也是dom模型面向对象的体现。
对document对象的理解
- document管理了所有的html文档内容
- document是一种树结构的文档，具有层级关系
- 它让我们把所有标签 都 对象化
- 可以通过document访问所有的标签对象
提问：如何将html标签对象化，这样有什么好处？
答：由于html具有特殊的层级结构，因此可以讲每一个标签对象化，对象中存储着许多属性信息，这些属性包括事件、关系、颜色等众多信息，以某个
标签为例
<body>
<div id ="div01">div01</div>
</body>dom模型相当于把上述内容进行封装构建了如下的一个类
class Dom{
private String id;
private String tagName;
private Dom parentNode;
private List<Dom> children;
private Stringg innerHTML;
}document对象中对应的方法
基于上述讨论，由于所有的标签都是document标签的子元素，而且所有字元素都具备某些公共的特征，故可以利用相应的方式进行查询以及构建一个标签dom对象，具体的：
查询方法有如下三种（从上到下搜索范围逐渐扩大）
-
document.getElementById(elementId)：通过标签id属性查找dom对象，elementId是标签的id属性（最常用的）。 -
document.getElementByName(elementName)：通过标签的name属性查找dom对象，elementName标签的name属性。 -
document.getElementByTagName(tagname)：通过标签名查找标签的dom对象，tagname是标签名，如
通过标签名创建一个标签对象
document.createElement(tagName)
getelementById
利用dom完成用户名输入验证
Step1：获取当前document对象的某一个id对象（input）
Step2：通过该对象得到用户输入值（value）
Step3：构建正则表达式，并通过正则表达式判断用户输入值是否满足条件
Step4：输出判断结果（if-else语句）
功能代码：实现判断用户输入内容是否合法
<head>
<script type="text/javascript" >
/*
* 需求：当用户点击了较验按钮，要获取输出框中的内容。然后验证其是否合法。<br/>
* 验证的规则是：必须由字母，数字。下划线组成。并且长度是5到12位。
* */
function onclickFun() {
// 1. 通过getElementById获取到对应标签
var usernameObj = document.getElementById("username");
var usernameText = usernameObj.value;
// 2. 构建正则表达式
var patt = /^\w{5,12}$/;
/*
* test()方法用于测试某个字符串，是不是匹配我的规则 ，
* 匹配就返回true。不匹配就返回false.
* */
// 3. 利用if-else语句判断用户输入是否合法
if (patt.test(usernameText)) {
usernameSpanObj.innerHTML = "<img src=\"right.png\" width=\"18\" height=\"18\">";
} else {
usernameSpanObj.innerHTML = "<img src=\"wrong.png\" width=\"18\" height=\"18\">";
}
}
</script>
</head>
<body>
用户名：<input type="text" id="username" value="wzg"/> <!-- 默认值为wzg-->
<button onclick="onclickFun()">较验</button>
</body>效果图
正则表达式
给出几个常见的需求，写出其正则表达式并分析为什么这么写
需求1：用户输入内容必须是5-12位的字符串内容，不能包含特殊字符
需求2：用户密码必须包含大小写以及数字
验证用户输入是否合法的方法
用户最直观看到的就是反馈信息，要么是网页发送的alert消息，要么是利用JavaScript中的事件完成给出相应的反馈信息
**方法1：**使用innerHTML标签；
方法2：采用外引图对和❌来：
getElementByName
需求：给用户提供一个全选全部选对帮助按钮
<body>
兴趣爱好：
<input type="checkbox" name="hobby" value="cpp" checked="checked">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>效果图
对应逻辑实现代码
全选按钮功能
function checkAll() {
// 让所有复选框都选中
// document.getElementsByName();是根据 指定的name属性查询返回多个标签对象集合
// 这个集合的操作跟数组 一样
// 集合中每个元素都是dom对象
// 这个集合中的元素顺序是他们在html页面中从上到下的顺序
var hobbies = document.getElementsByName("hobby");
// checked表示复选框的选中状态。如果选中是true，不选中是false
// checked 这个属性可读，可写
for (var i = 0; i < hobbies.length; i++){
hobbies[i].checked = true;
}
}全不选按钮功能
function checkNo() {
var hobbies = document.getElementsByName("hobby");
// checked表示复选框的选中状态。如果选中是true，不选中是false
// checked 这个属性可读，可写
for (var i = 0; i < hobbies.length; i++){
hobbies[i].checked = false;
}
}反选功能按钮
function checkReverse() {
var hobbies = document.getElementsByName("hobby");
for (var i = 0; i < hobbies.length; i++) {
hobbies[i].checked = !hobbies[i].checked;
}实现步骤
Step1：根据每个标签的特性，设置相同的属性，如上方都设置name属性为hobby
Step2：利用dom对象的选择器，将需要改变的dom对象都选出来（获取目标对象）
Step3：修改每个对象的check属性，将其设置为已选择
getElementByTagName
该方法是通过标签名获得对应dom对象
<script type="text/javascript">
window.onload = function(){
// alert( document.getElementById("btn01") );
}
// 全选
function checkAll() {
alert( document.getElementById("btn01") );
// document.getElementsByTagName("input");
// 是按照指定标签名来进行查询并返回集合
// 这个集合的操作跟数组 一样
// 集合中都是dom对象
// 集合中元素顺序 是他们在html页面中从上到下的顺序。
var inputs = document.getElementsByTagName("input");
for (var i = 0; i < inputs.length; i++){
inputs[i].checked = true;
}
}
</script>
</head>
<body>
<!--as -->
兴趣爱好：
<input type="checkbox" value="cpp" checked="checked">C++
<input type="checkbox" value="java">Java
<input type="checkbox" value="js">JavaScript
<br/>
<button id="btn01" onclick="checkAll()">全选</button>
</body>查询方法小结
document对象的三个查询方法，如果有id属性优先使用getElementById，如果没有id属性，则优先使用getElementByName来进行查询，如果前者者都没有，再按照getElementByTagName，这是因为搜索范围越来越大，后者需要更多的过滤才能实现。
以上三个方法，一定要在页面加载完成之后执行，才能查询到标签对象。这是因为浏览器是一行一行读取代码，先读取到
当浏览器读取完代码后就会进行windos.onload操作
createElement创建节点对象
节点的常用属性和方法
什么是节点？节点就是标签对象，也就是可以操作的最小单元。
在JavaScript中不同的对象创建方式不太一样，具体内容如下
如果想创建一个div对象，可通过如下代码（但这个时候该对象仅仅是在内存中，还需要将其附在某个目标元素标签之后）
var divObj = document.createElement("div"); // 在内存中创建<div></div>具体代码如下：
window.onload = function () {
var divObj = document.createElement("div"); // 在内存中 <div></div>
var textNodeObj = document.createTextNode("gjs，我爱你"); // 有一个文本节点对象
divObj.appendChild(textNodeObj); // <div>国哥，我爱你</div>
// 添加子元素
document.body.appendChild(divObj);
}实现步骤
Step1：创建一个div对象
Step2：获取待添加的父亲节点对象
Step3：将新构建的div对象通过appendChild方法添加至Step2中获得的父亲节点对象
额外说明
每个节点标签对象除了自己特有的元素外，还有一些维护了各自亲属关系的属性值，如下所示
-
childNodes：获取当前节点的所有子节点 -
firstChild：获取当前节点的第一个子节点 -
lastChilde：获取当前节点的最后一个子节点 -
parentNode：获取当前节点的父亲节点 -
nextSibling：获取当前节点的下一个兄弟节点 -
previousSibling：获取档期那节点上一个兄弟节点 -
className：用于获取或设置标签的class属性。注意，这里为了防止和java中反射冲突，采用了这种方式 -
innerHTML：获取/设置起始标签和结束标签中的所有内容 -
innerText：表示获取/设置起始标签中的文本# 系列文章目录
