Web前端学习（5）_DOM编程
Web前端学习（5）_DOM编程
这篇写关于DOM编程以及正则表达式的内容。
1. DOM编程
1.1 概念（javascrip对网页上每一个标签的封装，对象的层次结构体系）
DOM（document Object Model）文档对象模型编程。
1.2 查询标签对象
通过document对象获取，document代表一个html页面
作用： 获取多个或者同类的标签对象
A.#通过document对象的集合
all: 获取所有标签对象
forms： 获取form标签对象
images: 获取img标签对象
links: 获取a标签对象
例如：
var nodeList = document.all; //返回标签对象数组
<script type="text/javascript"> var nodeList = document.all; alert(nodeList.length); </script>
B.#通过关系查找标签对象
父节点： parentNode属性
子节点： childNodes属性
第一个子节点： firstChild属性
最后一个子节点： lastChild属性
下一个兄弟节点： nextSibling属性
上一个兄弟节点： previousSibling属性
<script type="text/javascript"> //获取a标签 var aNode = document.links[0]; alert(aNode.nodeName); //父节点： parentNode属性 var pNode = aNode.parentNode; alert(pNode.nodeName); //子节点： childNodes属性 var childs = pNode.childNodes; /*for(var i=0;i<childs.length;i++){ alert(childs[i].nodeName); }*/ //第一个子节点： firstChild属性 var fChild = pNode.firstChild; alert(fChild.nodeName); //最后一个子节点： lastChild属性 var lChild = pNode.lastChild; alert(lChild.nodeName); //下一个兄弟节点： nextSibling属性 var nextNode = aNode.nextSibling; alert(nextNode.nodeName); //上一个兄弟节点： previousSibling属性 var lastNode = nextNode.previousSibling; alert(lastNode.nodeName); </script>
C.#通过document方法查询标签对象
document.getElementById("id属性值"); 最常用
注意：
1）使用该方法获取的标签一定要有id属性
2）在同一个html页面中不要出现两个同名的iddocumetn.getElementsByName("name属性值"); 获取同name属性名的标签列表<script type="text/javascript"> //通过document中的方法获取标签对象 //通过id var a1 = document.getElementById("a1"); alert(a1.nodeName); //通过name var aList = document.getElementsByName("a2"); alert(aList.length); //通过标签 var aList2 = document.getElementsByTagName("a"); alert(aList2.length); </script>
注意：
1）使用该方法获取的标签一定要有name属性
document.getElementsByTagName("标签名") 获取相同标签名的标签列表
1.3 修改标签对象属性
常用的需要修改的属性：
innerHTML属性：修改标签体内容 <span>xxxxxx</span> <div></div> <select></select>
innerHTML : 设置的标签内的htmlvalue属性： 修改value属性值。
input type="text"
分析：这里就是获取焦点事件，然后把text的value属性值置为空串
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> </head> <body> <input type="text" value="请输入用户名" id="username" onfocus="setValues()" /> </body> <script type="text/javascript"> function setValues(){ var username = document.getElementById("username"); username.value = ""; } </script> </html>
src属性： 修改图片的src属性。<img src=""/> 点击按钮更换图片
分析：button的点击事件，改变img的src属性
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> </head> <body> <img src="../img/mm.jpg" width="300px" height="350px" id="i1" /> <input type="button" value="改变图片" onclick="change()" /> </body> <script> function change(){ var img = document.getElementById("i1"); img.src = "../img/4.jpg"; } </script> </html>分析：利用定时器，实现图片的轮播
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> </head> <body> <img src="../img/4.jpg" id="img1" width="400px" height="400px" /> </body> <script type="text/javascript"> var time = 10000000; function setImg(){ var img = document.getElementById("img1"); if(time%2==0){ img.src = "../img/4.jpg"; }else{ img.src = "../img/mm.jpg"; } time--; } window.setInterval("setImg()",2000); </script> </html>
checked属性：修改单选或多项的默认值。<input type="radio/checked" checked=""/> 爱好全选
分析：利用checked的属性值控制多选的选择
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> </head> <body> 爱好全选:<input type="checkbox" id="all" onclick="checkAll()"/><br /> 足球:<input type="checkbox" name="hobby" /><br /> 篮球:<input type="checkbox" name="hobby" /><br /> 乒乓:<input type="checkbox" name="hobby"/><br /> </body> <script> function checkAll(){ var all = document.getElementById("all"); var inputList = document.getElementsByName("hobby"); for(var i=0;i<inputList.length;i++){ inputList[i].checked = all.checked; } } </script> </html>
2. 正则表达式
2.1 正则表达式的书写规则
创建正则表达式： var 变量 = /正则规则/;
[a-z]: 表示匹配字母
* : 0或多个元素
+: 1个或多个元素
? : 0或1个元素
{n,m} 大于n,小于m的个数
2.2 正则方法：
test（）： 用于匹配指定的字符串. true：表示匹配成功 ； false; 表示匹配失败
注意：
在js的正则表达式中，如果遇到了符合规则的内容，就代表匹配成功！
如果需要和java一样完全匹配，需要添加边界符号
开始标记： ^
结束标记： $
分析：完全匹配的正则表达式，以^开头，以$结尾
<script> var reg = /^[0-9]+$/; if(reg.test("112sa3141412")){ alert("匹配成功！"); }else{ alert("匹配不成功！"); } </script>