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

最新推荐文章于 2022-08-24 15:25:05 发布

一JJL

最新推荐文章于 2022-08-24 15:25:05 发布

阅读量664

点赞数 1

分类专栏：前端文章标签： js基本语法 Document对象 Element对象样式 table切换表单验证正则表达式

本文链接：https://blog.csdn.net/tcbdbd/article/details/97951816

版权

本文详细介绍了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