JavaScript-DOM

DOM

DOM:Document、Object、Model

DOM把一份文档表示为一棵树

例如:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
<!DOCTYPE html>
<html>
<head>
<title>demo1</title>
<meta charset="utf-8">
</head>
<body>
<h1>What to buy</h1>
<p title="a gentle reminder">Don't forget to buy this stuff.</p>
<ul id="purchases">
<li>A tin of beans</li>
<li class="sale">Cheese</li>
<li class="sale important">Milk</li>
</ul>
</body>
</html>

Custom Organizational Chart.png

节点

在DOM中有不同类型的节点,像元素节点、文本节点和属性节点等

元素节点

DOM的原子是元素节点,说白了就是各个标签

文本节点

标签当中的文本内容就是文本节点

属性节点

标签里的属性就是属性节点

DOM方法

image.png

getElementsById

1
2
3
<script type="text/javascript">
alert(typeof document.getElementById("purchases"));
</script>

弹出:object

说明:文档中的每一个元素都是一个对象

getElementByTagName

1
2
3
<script type="text/javascript">
alert(document.getElementsByTagName("li").length);
</script>

弹出:3

说明:获取li标签的个数

getElementsByClassName

1
2
3
<script type="text/javascript">
alert(document.getElementsByClassName("sale").length);
</script>

弹出:2

getAttribute

1
2
3
4
<script type="text/javascript">
var paras = document.getElementsByTagName("p");
alert(paras[0].getAttribute("title"));
</script>

弹出:a gentle reminder

setAttribute

1
2
3
4
5
6
<script type="text/javascript">
var shopping = document.getElementById("purchases");
alert(shopping.getAttribute("title"));
shopping.setAttribute("title","a lists of good!");
alert(shopping.getAttribute("title"));
</script>

弹出:

null

a lists of good!

JavaScript注册验证

在此没有进行前端的设计,模板来自网站:模板之家

登录界面

image.png

注册界面:

image.png

HTML代码:

1
2
3
4
<!--登录-->
<input id="email" type="text" class="form-control" name="email" value="" autofocus>
<input id="password" type="password" class="form-control" name="password" data-eye>
<button type="submit" class="btn btn-primary btn-block" onclick="loginVerify();">

JS代码:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
function loginVerify(){
var email = document.getElementById("email").value;
var pwd = document.getElementById("password").value;
var regex = /^([0-9A-Za-z\-_\.]+)@([0-9a-z]+\.[a-z]{2,3}(\.[a-z]{2})?)$/g;

if(!regex.test(email)){
alert("请输入正确的邮件地址!")
}
else{
if(!pwd){
alert("请输入正确的密码!");
}
}
}
分享到:

评论完整模式加载中...如果长时间无法加载,请针对 disq.us | disquscdn.com | disqus.com 启用代理