Web前端学习（5）_DOM编程

缺乏、安全感 2022-06-13 07:56 161阅读 0赞

**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>
> 
>   
> ![Center][]  
> 
> 
>   
> 
> 
> 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页面中不要出现两个同名的id  
> 
> 
>     <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>
> 
> documetn.getElementsByName("name属性值");  获取同name属性名的标签列表  
> 注意：  
> 1）使用该方法获取的标签一定要有name属性  
> document.getElementsByTagName("标签名")  获取相同标签名的标签列表
> 
>   
> 
> 
> 1.3 修改标签对象属性
> 
> 常用的需要修改的属性：  
> innerHTML属性：修改标签体内容 <span>xxxxxx</span> <div></div> <select></select>  
> innerHTML : 设置的标签内的html 
> 
> value属性： 修改value属性值。 
> 
> input type="text"
> 
> 分析：这里就是获取焦点事件，然后把text的value属性值置为空串
> 
>     <!DOCTYPE html>
>     <html>
>     	<head>
>     		<meta charset="UTF-8">
>     		<title></title>
>     	</head>
>     	<body>
>     		<input type="text" value="请输入用户名" id="username" οnfοcus="setValues()" />
>     	</body>
>     	<script type="text/javascript">
>     		function setValues(){
>     			var username = document.getElementById("username");
>     			username.value = "";
>     		}
>     	</script>
>     </html>
> 
> ![Center 1][] ![Center 2][]  
>   
> 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="改变图片" οnclick="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" οnclick="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>
> 
> ![Center 3][] ![Center 4][]  
>   
>

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>
> 
>   
>   
>

[Center]: /images/20220613/9db97a8fa44f410297a84676f7f2bbdc.png
[Center 1]: https://img-blog.csdn.net/20170703184305761?watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvQWdfbmV2ZXJnaXZldXA=/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/Center
[Center 2]: /images/20220613/884d36ae0f724f6587331923b93cbd7a.png
[Center 3]: https://img-blog.csdn.net/20170703185625368?watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvQWdfbmV2ZXJnaXZldXA=/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/Center
[Center 4]: /images/20220613/941b10033eec4ec3899f46023231da44.png