Web前端学习（5）_DOM编程

最新推荐文章于 2022-07-06 23:52:07 发布

晴天小风

最新推荐文章于 2022-07-06 23:52:07 发布

阅读量375

点赞数

分类专栏： JavaWeb笔记 Web前端笔记文章标签： web前端 DOM编程正则表达式

本文链接：https://blog.csdn.net/Ag_nevergiveup/article/details/74089960

版权

JavaWeb笔记同时被 2 个专栏收录

41 篇文章 1 订阅

订阅专栏

Web前端笔记

31 篇文章 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>
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>
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>

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>

晴天小风

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
Web前端学习（5）_DOM编程

Web前端学习（5）_DOM编程这篇写关于DOM编程以及正则表达式的内容。1. DOM编程1.1 概念（javascrip对网页上每一个标签的封装，对象的层次结构体系）DOM（document Object Model）文档对象模型编程。
复制链接

扫一扫

专栏目录