文章目录

1、DOM模型
2、Document对象中的方法
3、正则表达式对象
4、两种常见的验证提示效果
5、getElementsByName方法
6、getElementsByTagName方法
7、节点的常用属性和方法

1、DOM模型

DOM全称Document Object Model即文档对象模型。直白的说就是把html文档中的标签、属性、文本都转化成对象来管理。

Document对象：

Document对象的理解：

document它管理了所有的HTML文档内容
document它是一种树结构的文档，有层级关系
它让我们把所有的标签都对象化
我们可以通过document访问所有的标签对象

关于标签对象化的理解：

//先类比Java
有一个年龄22、性别男、名字9527的人，将这个人的信息对象化：

class Person{
	private int age;
	private String sex;
	private String name;
}

现在有一个html标签：

<body>
	<div id="div01">div01</div>
</body>

模拟对象化，相当于：

class Dom{
	private String id; //id属性
	private String tagName;  //标签名
	private Dom parentNode; //父元素
	private List<DOm> children; //子元素
	private String innerHTML; //起始标签和结束标签之间的内容
}

直白理解：标签对象化就是用一个类去记录一下这些相关信息

2、Document对象中的方法

document.getElementById(elementId)
通过标签的id属性查找dom对象，elementId是标签的id属性值
document.getElementByName(elementName)
通过标签的name属性查找dom对象，elementName是标签的name属性值
document.getElementByTagName(tagName)
通过标签名查找dom对象，tagname是标签名

举例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script type="text/javascript">
        /*
        * 需求：当用户点击校验按钮，要获取输入框中的内容，然后校验是否合法
        * 合法规则是：必须由数字、字母、下划线组成，且长度是5-12位
        **/
        function onclickFun(){
            //要操作一个标签，则先是获取这个标签对象
            var usernameObj = document.getElementById("username");
            //获取输入框的值，html第一章中可知是value属性，可以看到这个标签对象还有type和id属性
            var usernameText = usernameObj.value;
            //验证字符串是否符合某个规则，用正则表达式取匹配
            var patt = /^\w{5,12}$/;
            /*
            * test()方法用于测试某个字符串是不是匹配我的规则
            * 匹配返回true，不匹配返回false
            **/
            if(patt.test(usernameText)){
                alert("用户名合法");
            }else{
                alert("用户名不合法");
            }
        }
    </script>
</head>
<body>
    用户名：<input type="text" id="username"/>
    <button onclick="onclickFun();">校验</button>

</body>
</html>

运行效果：

3、正则表达式对象

正则表达式是描述字符模式的对象，用于对字符串模式匹配、检索、替换。

语法：

var patt = new RegExp(pattern,modifiers);
或者：
var patt = /pattern/modifiers;

- pattren：描述表达式的模式
- modifiers：修饰符，用于指定全局匹配、区分大小写的匹配和多行匹配

修饰符：

模式：

1）单个符号

符号	用法与含义
^	匹配输入字符串开始的位置
$	匹配输入字符串结尾的位置
.	匹配单个任意字符，如Ja.a，可以匹配Java但不能匹配Javva
中括号[]	匹配单个字符，但只能匹配括号中指定的字符，如ja[vr]a，jara合法
\| 符号	或，和中括号[]类似，匹配指定的字符,但可以不是单个，如r(a\|b\|c\|dd)n
^符号	表示否，如[^0—9]即不匹配数字

2）次数符号

以下符号是匹配其前面的子表达式出现的次数：

符号	次数
*	0次或者多次
+	1次或者多次
?	0次或者1次
{n}	刚好n次
{n,}	至少匹配n次
{n,m}	n次到m次

举个栗子：

//表示字符串必须以a结尾
var patt = /a$/; 

//表示字符串必须以a开头
var patt = /^a/;

//要求字符串包含3-5个a
var patt1 = /a{3,5}/;
//要求字符串从头到尾一共包含3-5个a
var patt2 = /^a{3,5}$/;
var str = "aaaaaaa";
alert( patt1.test(str) );//true
alert( patt2.test(str) );//false

o{2}与"Bob"中的"o"不匹配，但与"food"中的两个"o"匹配。
o{1,}等效于o+
o{0,}等效于o*
o{0,1}'等效于 o?

3）快捷字符

符号	含义
\d	匹配一个数字字符，等价于 [0-9]
\D	匹配一个非数字字符，等价于 [^0-9]
\w	匹配字母、数字、下划线，等价于[A-Za-z0-9_]
\W	等价于[^A-Za-z0-9_]
\s	空字符，只可以匹配一个空格、制表符、回车符、换页符，不可以匹配自己输入的多个空格
\S	匹配任何非空白字符

更多字符可以参考这里
举例：

......
<script type="text/javascript">
	//表示字符串中是否包含字母e
	//也可写为var patt  = /e/;
	var patt = new RegExp("e");
	//alert(patt);
	var str = "qwe123";
	alert( patt.test(str) );
</script>

运行结果：

4、两种常见的验证提示效果

常见的校验错误提示是不会用alert弹窗来提示的

效果一

在输入框后面加span标签，通过给标签对象的innerHTML属性赋值，来实现不同情况下的不同提示。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script type="text/javascript">
        function onclickFun(){
            //要操作一个标签，则先是获取这个标签对象
            var usernameObj = document.getElementById("username");
           
            var usernameText = usernameObj.value;
            
            var patt = /^\w{5,12}$/;
            
            var usernameSpanObj = document.getElementById("usernameSpan");
			//标签对象中，innerHTML属性表示起始标签和结束标签之间的内容
			//alert(usernameSpanObj.innerHTML);
			//innerHTML属性可读可写，即可直接赋值
            if(patt.test(usernameText)){
                //alert("用户名合法");
                usernameSpanObj.innerHTML = "用户名合法"
            }else{
                //alert("用户名不合法");
                usernameSpanObj.innerHTML = "用户名不合法！"
            }
        }
    </script>
</head>
<body>
    用户名：<input type="text" id="username"/>
    <span id="usernameSpan" style="color:red;"></span><br/>
    <button onclick="onclickFun();">注册</button>

</body>
</html>

运行效果：

牢记思路：要操作一个标签，则是先获取这个标签对象

效果二

校验正确时打勾，错误时打叉。提前将√和❌的图片复制到工程目录下。

思路：

和效果一操作span标签内容一样，不同的是标签中间放的不是文字，而是图片。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script type="text/javascript">
        function onclickFun(){
            //要操作一个标签，则先是获取这个标签对象
            var usernameObj = document.getElementById("username");           
            var usernameText = usernameObj.value;            
            var patt = /^\w{5,12}$/;           
            var usernameSpanObj = document.getElementById("usernameSpan");			
            if(patt.test(usernameText)){
                usernameSpanObj.innerHTML = "<img src=\"right.png\" width=\"15\" height=\"15\">";
            }else{
                usernameSpanObj.innerHTML = "<img src=\"error.png\" width=\"15\" height=\"15\">";
            }
        }
    </script>
</head>
<body>
    用户名：<input type="text" id="username"/>
    <span id="usernameSpan" style="color:red;"></span><br/>
    <button onclick="onclickFun();">注册</button>

</body>
</html>

运行效果：

5、getElementsByName方法

getElementsByName()方法是根据指定的name属性返回多个标签对象的集合（数组）。
集合中的每个元素都是dom对象，且集合中元素的顺序就是他们在html页面中从上到下的顺序。

举例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script type="text/javascript">
        function checkAll(){
            //document.getElementsByName()方法是根据指定的name属性查询返回多个标签对象的集合
            //alert(hobbies);可以看到是一个ObjectList
            var hobbies = document.getElementsByName("hobby");
            //上面这个hobbies集合的操作跟数组一样
            //集合中的每个元素都是dom对象，集合中元素的顺序就是他们在html页面中从上到下的顺序
            //checked属性表示复选框的状态，选中时为true，未选中为false，之前的checked=checked表示默认选中
            //checked属性同innerHTML，也可读可写
            //alert(hobbies[0].checked)
            for (var i=0; i<hobbies.length;i++){
                hobbies[i].checked=true;
            }

        }
        //全不选
        function checkNo(){
            var hobbies = document.getElementsByName("hobby");
            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);
            }
        }

    </script>
</head>
<body>
  兴趣爱好：<br/>
  <input type="checkbox"  name="hobby" value="python">python
  <input type="checkbox" name="hobby" value="java">java
  <input type="checkbox" name="hobby" value="javascript">javascript
  <br/>
<button onclick="checkAll();">全选</button>
<button onclick="checkNo();">全不选</button>
<button onclick="checkReverse();">反选</button>

</body>
</html>

运行效果：

小复习：

getElementById()方法是返回拥有指定id的第一个标签对象的引用。

6、getElementsByTagName方法

当标签没有提供id属性，也没有提供name属性，那么我们还可以利用标签名。

getElementsByTagName()方法是根据标签名来进行查询并返回集合
集合中的每个元素都是dom对象，且集合中元素的顺序就是他们在html页面中从上到下的顺序。

举例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script type="text/javascript">
        function checkAll(){
            var inputs = document.getElementsByTagName("input"); 
            //alert(inputs)
            for (var i=0; i<inputs.length;i++){
                inputs[i].checked=true;
            }

        }
        //全不选
        function checkNo(){
            var inputs = document.getElementsByTagName("input");
            for (var i=0; i<inputs.length;i++){
                inputs[i].checked=false;
            }
        }
        //反选
        function checkReverse(){
            var inputs = document.getElementsByTagName("input");
            for (var i=0; i<inputs.length;i++){
                inputs[i].checked=!(inputs[i].checked);
            }
        }

    </script>
</head>
<body>
  兴趣爱好：<br/>
  <input type="checkbox" value="python">python
  <input type="checkbox" value="java">java
  <input type="checkbox" value="javascript">javascript
  <br/>
<button onclick="checkAll();">全选</button>
<button onclick="checkNo();">全不选</button>
<button onclick="checkReverse();">反选</button>

</body>
</html>

document对象的三个查询方法的注意事项

如果有id属性，优先使用getElementById
没有id属性，优先使用getElementsByName方法来查询
id属性和name属性都没有，再用getElementsByTagName
以上三个方法，代码一定要在页面加载完成之后 ，页面没加载完成，即标签对象都没创建出来，此时查询标签对象一定报错null。对于单独的语句，要放进window.onload = function(){…}中

7、节点的常用属性和方法

参考文章开头的DOM模型，文字、注释、标签等等都是节点，但也可以狭义的理解成：节点就是标签对象。

方法：

getElementsByTagName()方法：通过具体的元素节点调用该方法，获取当前节点的指定标签名孩子节点。（之前的练习是用整个页面文档对象document）
appendChild(oChildrenNode)方法：添加一个子节点，oChildNode是要添加的孩子节点

属性：

childNodes属性：获取当前节点的所有子节点
firstChild属性：获取当前节点的第一个子节点
lastChild属性：获取当前节点的最后一个子节点
parentNode属性：获取当前节点的父节点
nextSibling属性：获取当前节点的下一个节点
previousSibling属性：获取当前节点的上一个节点
className属性：用于获取或设置标签的class属性值
innerHTML属性：表示获取、设置起始标签和结束标签中的内容
innerText属性：表示获取、设置起始标签和结束标签中的文本

//需求：点击查找按钮，可查找html页面中id为666的标签对象的父节点

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script type="text/javascript">
    	window.onload = function(){
    		document.getElementById("code9527").onclick = function(){
    			var spanObj = document.getElementById("666");
    			alert(spanObj.parentNode);
    		}
    	}
    </script>
</head>
<body>
<button id="code9527">查找</button>
<span id="bj"></span>
<span name="666"></span>
<span id="666"></span>
</body>
</html>

运行效果：

🍁🍁
createElement()方法和appendChild()方法的举例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script type="text/javascript">
        window.onload = function(){
            //需求：使用js代码创建html标签，并显示在页面上
            //标签内容<span>code-9527</span>
            var divObj = document.createElement("div");
            //alert(divObj);可以看到这是一个创建的div标签对象，但在内存中

            divObj.innerHTML = "code-9527";
            //此时div标签中的内容添加成功，但还只是在内存中

            //body对象.appendChild(divObj);就可以将span加入到body
            //body对象可以通过标签名拿，但document对象有一个body属性，可以用来直接访问<body>标签对象
            document.body.appendChild(divObj);
        }
    </script>
</head>
<body>

</body>
</html>

标签中的文本也可以通过createTextNode()方法，这里也可以顺便加深对元素对象的理解，即文本也是一个元素

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script type="text/javascript">
        window.onload = function(){
            var divObj = document.createElement("div");
            //创建一个文本节点对象
            var textNodeObj = document.createTextNode("code-9527");
            //文本节点对象是div元素对象的子元素
            divObj.appendChild(textNodeObj);

            document.body.appendChild(divObj);
        }
    </script>
</head>
<body>

</body>
</html>

运行效果：

js创建标签并显示在页面上的实现步骤：

document.createElement(）创建需要新增的标签对象
使用innerHTML属性或者createTextNode()方法加入标签中的内容
appendChild()方法将新的标签对象加入到html页面

其中，body对象可以通过标签名拿，但document对象有一个body属性，可以用来直接访问<body>标签对象。即document.body等价于getElementxx()方法获取的body对象

错误示范：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script type="text/javascript">
        var divObj = document.createElement("div");
        divObj.innerHTML = "code-9527";
        ocument.body.appendChild(divObj);

    </script>
</head>
<body>

</body>
</html>