javascript DOM编程_dom链式编程-优快云博客

本文链接：https://blog.youkuaiyun.com/weixin_38132536/article/details/74779731

本文介绍如何利用DOM操作获取和修改HTML元素，并通过示例演示了如何使用JavaScript进行DOM操作实现页面交互。此外，还讲解了正则表达式的应用，包括基本规则和常见方法，提供了表单验证的具体实例。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1.DOM(document object model)文档对象模型编程

2.通过document对象的集合获取标签对象，作用：获取多个或者同类的标签对象。

all：获取所有标签对象

forms：获取form标签对象

images：获取imagei标签对象

links：获取a标签对象

3.通过关系查找标签对象

                父节点： parentNode属性
                 子节点： childNodes属性
      第一个子节点： firstChild属性
  最后一个子节点： lastChild属性
  下一个兄弟节点： nextSibling属性
  上一个兄弟节点： previousSibling属性

4.同通过document方法查询标签对象

document.getElementById("id属性值")；

注：使用该方法获取的标签要有id属性，同一个html标签中不能有两个标签id相同。

documetn.getElementsByName("name属性值")；获取name属性名的标签列表。

document.getElementsByTagName("标签名")；获取相同标签名的标签列表。

5.修改标签对象的属性

innerHTML属性：修改标签体内的内容

value属性：修改value属性值

src属性：修改图片的src属性

checked属性：修改单选或多项的默认值

exp：

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>点击按钮切换图片</title>
</head>
<body>
<input type="button"  value="切换" onclick="swtch()"/>
<img id="p1" src="2b/60534605_p0.jpg" />
</body>
<script type="text/javascript">
function swtch(){
	var pic=document.getElementById("p1");//通过id获取对象
	pic.src="2b/60666956_p0.jpg";//修改对象的src属性
	}
</script>
</html>

exp：

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
</head>

<body>
<input type="checkbox"  name="chos" value="156"/>dark soulIII <br/>
<input type="checkbox"  name="chos" value="124"/>watch dog2<br/>
<input type="checkbox"  name="chos" value="108"/>assassin's creed unity<br/>
<input type="checkbox"  name="chos" value="9"/>protal all<br/>
<input type="checkbox"  name="chos" value="64"/>tomb rider<br/>
<input type="checkbox"  id="all" onchange="switchall()"/>全选
<input type="button" value="结算" onclick="price()" />

</body>
<script type="text/javascript">
function switchall(){
	var All = document.getElementById("all");//通过id获取对象
	var choose = document.getElementsByName("chos");//通过name属性获取对象
	if(All.checked){                   //进行条件判断，checked属性为是否勾选
		for(var i=0;i<choose.length;i++){
			if(choose[i].checked){
				
				}else{
					choose[i].checked=true;
					}
			}
		}else{
			for(var i=0;i<choose.length;i++){
			if(choose[i].checked){
				choose[i].checked=false;
				}else{
					
					}
			}
		}
	}
function price(){
	var sum=0;//定义变量总价格
	var game=document.getElementsByName("chos");
	for(var i=0;i<game.length;i++){//循环获取每个元素
		if(game[i].checked){       //如果勾选，进行加法运算
			var kin=game[i].value; //获取价格value属性进行计算
			kin=parseInt(kin);     //将获取到的value转为number类型
			sum=sum+kin;
			}
		}
	document.write("总价为"+sum);
	}
</script>
</html>

6.正则表达式：var 变量=/正则规则/；
   [a-z]: 表示匹配字母
    * : 0或多个元素
    +:   1个或多个元素
    ? :   0或1个元素
    {n,m} 大于n,小于m的个数

正则方法：test()：用于匹配指定的字符串，true表示匹配成功，false表示匹配失败

注：在js中，遇到了符合规则的内容，就代表匹配成功，如果要和java一样完全匹配，需要添加边界符号

开始标记： ^
结束标记： $

exp:

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>正则表达式表单提交</title>
</head>

<body>
<form  action="2b/61646629_p0.png" onsubmit="checkAll()">
用户名：<input type="text" id="username" onblur="testuser()" /><span id="tipuser"></span><br/>
密码：<input type="password" id="passward"/><br/>
再次输入密码：<input type="password" id="repass" onblur="testpass()" /><span id="tiprepa"></span><br/>
<input type="submit" value="确定提交" />
</form>
</body>
<script type="text/javascript">
function testuser(){//定义方法检测用户名是否合法
	var reg=/^[a-zA-Z0-9]{5,15}$/;//定义正则表达式：10到15位字母或数字
	var username=document.getElementById("username");
	var tipuser=document.getElementById("tipuser");
	if(reg.test("username")){//用正则表达式进行匹配
		tipuser.innerHTML="用户名可用";
		return true;
		}else{
			tipuser.innerHTML="用户名不可用";
			return false;
			}
	}
function testpass(){//检测两次密码是否相同
	var passward=document.getElementById("passward").value;
	var repass=document.getElementById("repass").value;
	var hit=document.getElementById("tiprepa");
	if(passward==repass){
		return true;
		}else{
			hit.innerHTML="两次输入密码不一致";
			return false;
			}
	}
function checkAll(){//若上述两项皆合法，返回真，即可以提交
	if(teseuser()&&testpass()){
		return true;
		}else{
			return false;
			}
	}
</script>
</html>