js基本语法(二)——Document对象 Element对象 样式 table切换 表单验证 正则表达式

本文详细介绍了JavaScript中的DOM操作,包括Document对象的getElementById、getElementsByName等方法,Element对象的getAttribute、setAttribute等属性,以及如何通过innerHTML和innerText操作元素内容。还讲解了样式控制,如style和className属性,并提供了实例展示,如图片轮播、全选按钮和协议注册。此外,文章还涉及了表格操作和表单验证,以及正则表达式在表单验证中的应用。
摘要由CSDN通过智能技术生成

DOM对象
文档对象模型,它把网页中所有的标签都当做一个dom对象,通过这个对象,我们可以精准地获取网页中的某一个标签,同时可以动态地修改标签的属性、内容和外观,实现动态的效果。

Document对象

每个载入浏览器的 HTML 文档都会成为 Document 对象

getElementById() 返回对拥有指定 id 的第一个对象的引用。
getElementsByName() 返回带有指定名称的对象集合。
getElementsByTagName() 返回带有指定标签名的对象集合
getElementsByClassName() 根据类名获取对象集合

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>	
	</head>
	<body>
        <div id="mydiv">
        	<p>*********************</p>
        	<p>*********************</p>
        </div>
        <p name="abc">
        	段落1
        </p>
        
        <p name="abc">       	
        	段落2
        </p>
        
        <ul>
        	<li>AAAAAAAAAAAA</li>
        	<li>AAAAAAAAAAAA</li>
        	<li>AAAAAAAAAAAA</li>
        	<li>AAAAAAAAAAAA</li>
        	<li>AAAAAAAAAAAA</li>
        </ul>
        
        <div class="redtext">
        	aaaaaaa
        </div>
        
        <div class="redtext">
        	aaaaaaa
        </div>
        <script type="text/javascript">
			var divobj=document.getElementById("mydiv");
			var parr=divobj.getElementsByTagName("p");
			for(var i in parr){
				parr[i].innerHTML="@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@";
			}
			
			var arr=document.getElementsByName("abc");
			for(var i in arr){
				arr[i].innerHTML="okokok";
			}
			
			var liarr=document.getElementsByTagName("li");
			for(var i in liarr){
				liarr[i].innerHTML=parseInt(i)+1+"lilili";
			}
			
			var divarr=document.getElementsByClassName("redtext");
			for(var i in divarr){
				divarr[i].innerHTML="bbbbbbbbbbbbbbbbbbbbbbb";
			}	
		</script>
	</body>
</html>

innerHTML用来获取一个标签内部的内容,即可以赋值,又可以取值
innerText也可以赋值取值,都用在非表单元素上面。
它们的区别在于:
在赋值时,如果赋的值是标签,innerText会全部当文本解析,而innerHTML可以对标签进行解析;在取值时,innerText会忽略标签进行取值,而innerHTML获取到的是开始标签到结束便签之间的全部内容,包括标签。
对于自关闭标签,一般是表单标签,如 <input /><select></select><textarea></textarea><button></button>如果想获取这些便签里面的数据,只能用value,赋值和取值都用value。

对于<select></select>,设置value有默认选中效果

<select id="selcity">
			<option value="zhengzhou">郑州</option>
			<option value="xuchang">许昌</option>
			<option value="zhumadian">驻马店</option>
			<option value="nanyang">南阳</option>
		</select>
		<script type="text/javascript">
              var sel=document.getElementById("selcity");
              sel.value="zhumadian";
		</script>

对于<input /><textarea></textarea>,使用value将会直接显示在控件上

实例1:
使用表单元素写一个计算器,实现加减乘除运算

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<body>
		<input type="text" name="num1" />
		<select name="selop">
			<option>+</option>
			<option>-</option>
			<option>*</option>
			<option>/</option>
		</select>
		<input type="text" name="num2" />
		<input type="button" name="equals" value="=" onclick="calc()"/>
		<input type="text" name="result" />
		
		
		<script type="text/javascript">
			function calc(){
				var result=document.getElementsByName("result")[0];
				var num1=document.getElementsByName("num1")[0].value;
				var num2=document.getElementsByName("num2")[0].value;
				var op=document.getElementsByName("selop")[0].value;
				result.value=eval(num1+op+num2);
			}
		</script>
	</body>
</html>

运行结果:
在这里插入图片描述
实例2:省市联动

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<script type="text/javascript">
			var arr=new Array();
			arr["河南"]=["郑州","许昌","洛阳","南阳","驻马店"];
			arr["河北"]=["保定","邯郸","石家庄","秦皇岛","衡水"];
			arr["湖北"]=["武汉","十堰","黄冈","黄石","黄梅"];
			function loadprov(){
				var selprov=document.getElementById("prov
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值