目录
DOM模型,即文档对象模型,允许成需和脚本动态的访问和更新文档的内容、结构和样式。
定义了所有HTML元素的对象、属性以及访问他们的方法。
是关于如何获取、修改、添加或删除HTML元素的标准。
1.DOM节点
DOM是被视为节点树的HTML
- DOM中的所有事物都是节点
- HTML 文档中的所有内容都是节点
- 整个文档是一个文档节点
- 每个 HTML 元素是元素节点
- HTML 元素内的文本是文本节点
- 每个 HTML 属性是属性节点
- 注释是注释节点
- HTML 文档中的所有内容都是节点
- HTML DOM将HTML文档视为树结构 —— 节点树
- 节点树种的节点拥有层级关系(parent、child、sibling等)
- 顶端节点称为根
- 除了根,其余节点都有父节点
2. DOM方法和属性
-
2.1 方法
能够执行的动作(添加、修改元素)
- 常用方法
- getElementById(id) - 获取带有指定 id 的节点(元素)
- appendChild(node) - 插入新的子节点(元素)
- removeChild(node) - 删除子节点(元素)
-
2.2 属性
能够获取或设置的值
- 常用属性
- innerHTML - 节点(元素)的文本值
- parentNode - 节点(元素)的父节点
- childNodes - 节点(元素)的子节点
- attributes - 节点(元素)的属性节点
- first/lastChild - 第一个/最后一个子节点
- next/previousSibling - 下一个/上一个兄弟节点
- 2.2.1 innerHTML属性
用于获取或替换任意HTML元素的内容
-
2.2.2 nodeName属性
规定节点的名称
- 注意
- nodeName 是只读的
- 元素节点的 nodeName 与标签名相同
- 属性节点的 nodeName 与属性名相同
- 文本节点的 nodeName 始终是 #text
- 文档节点的 nodeName 始终是 #document
- 2.2.3 nodeValue属性
规定节点的值
- 注意
- 元素节点的 nodeValue 是 undefined 或 null
- 文本节点的 nodeValue 是文本本身
- 属性节点的 nodeValue 是属性值
- 2.2.4 nodeType属性
返回节点的类型,是只读的。
- 节点类型
- html标签对象:nodeType=1
- 属性:nodeType=2
- 文本(空格、换行等):nodeType=3
- html注释:nodeType=8
- 文档:nodeType=9
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<form>
<a href="#">超链接</a><!--comments--><input type="text" />
<input type="button" />
</form>
<form>
<a href="#">超链接</a><input type="button" /><br />
<input type="button" value="添加" />
</form>
</body>
<script>
var aitem=document.links[0];
alert(aitem.nodeName);
//获取父节点
var pareitem=aitem.parentNode;
alert(pareitem.nodeName);
//获取所有子节点
var childitems=pareitem.childNodes;
for(var i=0;i<childitems.length;i++){
if(childitems[i].nodeType==1){
document.write(childitems[i].nodeName+",节点类型是:"
+childitems[i].nodeType+"<br />") ;
}
}
//需求:获取第一个字节点对象
var a = aitem.firstChild ;
alert(a.nodeName) ;
//获取最后一个子节点
var input = aitem.lastChild ;
alert(input.nodeName) ;
//获取当前页面中的第二个a标签对象
var aNode = document.links[1] ;
alert(aNode.nodeName) ;
//获取他的下一个兄弟节点
var broNode=aNode.nextSibling;
alert(broNode.nodeName) ;
//通过broNode对象获取上一个兄弟节点
var pre=broNode.previousSibling;
alert(pre.nodeName) ;
</script>
</html>
3. DOM访问
即查找HTML元素,等同于访问节点。
- 访问方式
- getElementById("id属性值"):返回带有指定ID的元素(id属性值必须在同一个页面中唯一)
- getElementsByName("name属性值") :返回带有指定标签名的所有标签对象集合( name属性值可以同名)
- getElementsByClassName("class属性值") :返回带有相同类型的所有HTML元素(class属性值可以同名)
- getElementsByTagName("元素名称") :返回带有指定名称的节点列表(当一个标签没有id、name、class属性时使用)
- 通过document集合属性获取标签对象
- document.all:获取当前页面中的所有的标签对象
- document.images:获取当前页面中所有的img标签对象
- document.links:通常如果没有指定area标签,都是获取当前页面的a标签对象
- document.forms:获取当前页面中所有的form标签对象
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>document访问标签对象</title>
</head>
<body>
<a href="#">超链接</a>
<img src="img/2.jpg "/>
<form>
<input id="aid" type="text" onblur="getTextValue()" /><br />
<input class="inp" type="text" onblur="getTextValue1()" /><br />
<input name="in" type="text" onblur="getTextValue2()" /><br />
<input type="text" onblur="getTextValue3()" />
</form>
</body>
<script>
function getTextValue(){
alert(document.getElementById("aid").value);//.value 获取文本框输入的内容
}
function getTextValue1(){
alert(document.getElementsByClassName("inp")[0].value);
}
function getTextValue2(){
alert(document.getElementsByName("in")[0].value);
}
function getTextValue3(){
alert(document.getElementsByTagName("input")[3].value);
}
var itemlist=document.all;
var itemlist1=document.images;
var itemlist2=document.links;
var itemlist3=document.forms;
for(var i=0;i<itemlist.length;i++){
alert(itemlist[i].nodeName);
}
alert("document.images");
for(var i=0;i<itemlist1.length;i++){
alert(itemlist1[i].nodeName);
}
alert("document.links");
for(var i=0;i<itemlist2.length;i++){
alert(itemlist2[i].nodeName);
}
alert("document.forms");
for(var i=0;i<itemlist3.length;i++){
alert(itemlist3[i].nodeName);
}
</script>
</html>
4. DOM修改
-
使用childNodes和nodeValue属性来获取元素的内容
-
使用innerHTML属性改变HTML内容
-
通过DOM访问HTML元素的样式对象以及属性,并进行修改(setAttribute("属性名称","属性值"))
-
创建一个元素节点(createElement() )并将其追加(appendChild())到已有的元素上
-
再父元素前添加子元素( insertBefore())
-
通过remove()删除一个元素
-
替换DOM中的元素(replaceChild())
-
删除父节点对象中的最后一个子节点(removeChild())
属性更改:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>属性更改</title>
</head>
<body>
<!--使用innerHTML替换内容-->
<span id="vocu">bonjour</span><br />
<!--图片的切换-->
<img src="img/2.jpg" />
<input type="button" value="切换" onclick="change()" /><br />
<!--
图片的隐藏与复现
none 隐藏 block 显示
-->
<input type="button" value="隐藏" onclick="hide()"/><br />
<input type="button" value="复现" onclick="show()"/><br />
<!--
复选框
checked记录是否选中
true、false记录状态
-->
<input type="checkbox" value="全选" onclick="selectAll(this)" />全选<br />
<input type="checkbox" value="英语" name="language">英语<br />
<input type="checkbox" value="中文" name="language">中文<br />
<input type="checkbox" value="法语" name="language">法语<br />
</body>
<script>
var vocu=document.getElementById("vocu");
vocu.innerHTML="<h2>替换后为:amour</h2>";
var item=document.getElementsByTagName("img")[0];
function change(){
item.src="img/3.jpg"
}
function hide(){
item.style.display="none";
}
function show(){
item.style.display="block";
}
function selectAll(obj){
var statement=obj.checked;
var itemlists=document.getElementsByName("language");
for(var i=0;i<itemlists.length;i++){
itemlists[i].checked=statement;
}
}
</script>
</html>
获取并添加元素:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>获取并添加</title>
</head>
<body>
<input type="button" value="向后追加按钮" onclick="addItem()"/>
<input type="button" value="按钮前插入" onclick="insert()"/>
<input type="button" value="从后删除" onclick="delItem()" /><br />
<input type="button" id="btn" value="按钮" />
</body>
<script>
function addItem(){
var input=document.createElement("input");
input.setAttribute("type","button");
input.setAttribute("value","新按钮");
input.setAttribute("name","button")
var item=document.getElementsByTagName("body")[0];
item.appendChild(input);
}
function insert(){
var input=document.createElement("input");
input.setAttribute("type","button");
input.setAttribute("value","新按钮");
var item=document.getElementById("btn");
var bodyNode=document.getElementsByTagName("body")[0]
bodyNode.insertBefore(input,item);
}
function delItem(){
var bodyNode=document.getElementsByTagName("body")[0]
var last=bodyNode.lastChild;
bodyNode.removeChild(last);
}
</script>
</html>
5. DOM导航
- 节点列表相当于一个节点数组,可以通过下标获取特定的节点。
- length属性可以来获取节点列表中节点的数量。
- 可以使用parentNode、firstChild以及lastChild三个节点属性在文档结构中进行导航。
6. 事件
-
6.1 事件编程三要素
- 事件源:点击的按钮
- 编写事件监听器:所要执行的逻辑函数
- 注册事件监听器:将事件源与函数进行绑定
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>事件</title>
<script>
//2)编写事件监听器
function test(){
alert("触发点击事件") ;
}
</script>
</head>
<body>
<!--1)事件源-->
<input type="button" value="点我试试" onclick="test()" /><!--3)注册时间监听器-->
</body>
</html>
-
6.2 事件分类
- 点击相关的事件
- 单击完成:onclick
- 双击完成:ondbclick
- 被点击:onmousedown
- 被松开:onmouseup
- 键盘相关的事件
- 键盘抬起事件: onkeyup
- 键盘按下事件:onkeypress
- 焦点相关的事件(应用场景:表单验证)
- 获取焦点:onfocus
- 失去焦点:onblur
- 选项卡发生变化的事件
- 输入字段的验证:onchange
- 鼠标相关的事件
- 鼠标经过元素:onmouseover
- 鼠标离开元素:onmouseout
- 页面加载相关事件: (页面载入事件)
- 用户进入页面时触发:onload(会在body内容加载完毕后立即执行)
- 用户离开页面时触发:onunload
- 点击相关的事件
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>事件的分类</title>
<!--显示出div区域-->
<style>
#div{
width: 200px;
height: 100px;
border:2px solid plum;
}
</style>
<script>
function oneclick(){
alert("单击")
}
function dbclick(){
alert("双击");
}
function up(){
alert("松开鼠标");
}
function down(){
var mouse=document.getElementById("mouse");
mouse.innerHTML="被点击";
}
//获取焦点事件
function isFocus(){
var input=document.getElementById("name");
input.value="";
}
//失去焦点事件
function isBlur(){
var name=document.getElementById("name").value;
var tip=document.getElementById("tip");
if(name=="mary"){
tip.innerHTML="用户名重复,请重新输入!".fontcolor("red");
}else{
tip.innerHTML="用户名可用".fontcolor("green");
}
}
function select(){
var country=document.getElementById("country").value;
var city=document.getElementById("city");
city.innerHTML="";
if(country=="中国"){
var arr=["陕西","重庆","成都","武汉"];
for(var i=0;i<arr.length;i++){
city.innerHTML+= "<option value='"+arr[i]+"'>"+arr[i]+"</option>"
}
}
if(country=="法国"){
var arr=["里昂","蒙彼利埃","巴黎","尼斯"];
for(var i=0;i<arr.length;i++){
city.innerHTML+= "<option value='"+arr[i]+"'>"+arr[i]+"</option>"
}
}
if(country=="美国"){
var arr=["纽约","洛杉矶","费城","曼哈顿"];
for(var i=0;i<arr.length;i++){
city.innerHTML+= "<option value='"+arr[i]+"'>"+arr[i]+"</option>"
}
}
}
function mouseOver(){
alert("mouseOver");
}
function mouseOut(){
alert("mouseout");
}
function init(){
alert("页面载入");
}
</script>
</head>
<body onload="init()">
<input type="button" value="单击" onclick="oneclick()" />
<input type="button" value="点击" onmousedown="down()" onmouseup="up()" />
<span id="mouse"></span><br />
<input type="button" value="双击" ondblclick="dbclick()" /><br />
用户名:<input type="text" name="username" id="name"
onblur="isBlur()" value="请输入用户名" onfocus="isFocus()" />
<span id="tip"></span><br />
籍贯:
<select id="country" onchange="select()">
<option value="请选择">请选择</option>
<option value="中国">中国</option>
<option value="法国">法国</option>
<option value="美国">美国</option>
</select>
<select id="city"></select><br /><br /><br />
<div id="div" onmouseover="mouseOver()" onmouseout="mouseOut()">div</div>
</body>
</html>
7. 正则表达式
- 语法
- 预定义字符
- [a-zA-Z]:大小写字母
- [a-zA-Z0-9]:数字或者字母
- [0-9]:数字
- 转义字符
- \. :表示. 必须转义
- 数量词
- X+: X字符出现1次或多次
- X*:X 字符出现0次或多次
- X?:X字符出现0次或1次
- X{n}:X字符恰好出现n次
- X{n,}:X字符至少出现n次
- X{n,m}:X字符至少出现n次,但不超过m次
- 正则表达式格式:
- var reg = /正则语法/ ;
- 内置方法
- reg.test(var str) 查看用户输入的内容是否和当前规定的正则表达式匹配
- 返回true,匹配成功;否则,匹配失败
- JavaScript是一个弱类型语言,正则表达式中只要含有符合字符串中的部分内容就可以匹配成功(部分匹配)
- 若想像Java中的正则表达式精确匹配,必须定义边界匹配符号
- ^:以...开始
- $:以...结束
- 若想像Java中的正则表达式精确匹配,必须定义边界匹配符号
- 预定义字符
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>正则表达式</title>
<script>
var str="123";
var reg=/^[0-9]{3}$/
if(reg.test(str)){
alert("符合");
}else{
alert("不符合");
}
</script>
</head>
<body>
</body>
</html>
- 表单验证
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>表单验证</title>
</head>
<!--
定义正则规则:
用户名:由4~14位的数字或者字母
密码:由6~16位的数字或字母组成
确认密码:和密码内容一致
邮箱:数字或者字母@数字或者字母.(com.cn/.com/.cn...)
-->
<script>
//校验用户名
function checkUserName(){
var username=document.getElementById("username").value;
var namespan=document.getElementById("name_span");
var reg=/^[a-zA-Z0-9]{4,14}$/;
if(reg.test(username)){
namespan.innerHTML="该用户名可用".fontcolor("green");
return true;
}else{
namespan.innerHTML="该用户名不可用".fontcolor("red");
return false;
}
}
//校验密码
function checkPwd(){
var pwd=document.getElementById("pwd").value;
var pwdspan=document.getElementById("pwd_span");
var reg=/^[a-zA-Z0-9]{6,16}$/;
if(reg.test(pwd)){
pwdspan.innerHTML="密码可用".fontcolor("green");
return true;
}else{
pwdspan.innerHTML="密码不可用".fontcolor("red");
return false;
}
}
//校验确认密码
function checkRePwd(){
var pwd=document.getElementById("pwd").value;
var repwd=document.getElementById("repwd").value;
var repwdspan=document.getElementById("repwd_span");
if(pwd==repwd){
repwdspan.innerHTML="密码校验成功".fontcolor("green");
return true;
}else{
repwdspan.innerHTML="确认密码有误".fontcolor("red");
return false;
}
}
//校验邮箱
function checkEmail(){
var email=document.getElementById("email").value;
var emailspan=document.getElementById("email_span");
var reg=/^[a-zA-Z0-9]+@[a-zA-Z0-9]+(\.[a-zA-Z]{2,3}){1,2}$/;
if(reg.test(email)){
emailspan.innerHTML="邮箱格式正确".fontcolor("green");
return true;
}else{
emailspan.innerHTML="邮箱格式有误".fontcolor("red");
return false;
}
}
function checkAll(){
if(checkUserName() && checkPwd() && checkRePwd() && checkEmail()){
return true ;
}else{
return false ;
}
}
</script>
<body>
<!--onsumbit:当前表单是否提交成功,true:成功/false不成功-->
<form action="backend.html" method="post" onsubmit=" checkAll()">
用户名:<input type="text" id="username" name="username" onblur="checkUserName()" /><span id="name_span"></span><br />
密码:<input type="password" id="pwd" onblur="checkPwd()" /><span id="pwd_span"></span><br />
确认密码:<input type="password" id="repwd" onblur="checkRePwd()" /><span id="repwd_span"></span><br />
邮箱:<input type="text" id="email" onblur="checkEmail()" /><span id="email_span"></span><br />
<input type="submit" value="注册" />
</form>
</body>
</html>