js总结6 文档对象

最新推荐文章于 2024-07-27 13:31:57 发布

一定不能掉头发

最新推荐文章于 2024-07-27 13:31:57 发布

阅读量202

点赞数

文章标签： java 前端 html

本文链接：https://blog.csdn.net/LOOKOUTSTT/article/details/127017221

版权

一、日期对象(Date)

方法说明

日期对象包含日期和时 Date() 返回当日的日期和时间

getDate() 从 Date对象返回一个月中的某一天(1～31)

没有属性，只有获取或 getDay() 从 Date 对象返回一周中的某一天(0~6)

getMonth() 从 Date对象返回月份(0～11)

getFullYear() 从 Date对象以四位数字返回年份

getHours() 返回Date对象的小时(0～23)

getMinutes() 返回Date对象的分钟(0～59)

getSeconds() 返回Date对象的秒数(0～59)

getMilliseconds()返回Date 对象的毫秒(0～999)

getTime() 返回1970年1月1日至今的毫秒数

二、正则表达式对象

compile()方法。把正则表达式编译为内部格式，从而执行更快

使用新正则去替换旧正则，主要用于提升比较复杂和耗时的处理过程的性能，一般情况下很少使用。

exec()方法。用正则表达式在字符串中查找，并返回包含结果的一个数组。

不仅用于判断给定的字符串是否匹配，而且会返回匹配结果的详细信息。

test()方法。返回一个bool值，它指出被查找的字符串是否匹配给定的模式。

使用频繁，主要用于匹配测试。匹配成功返回true，否则返回false。

三、document获取标签的几种方式

<input type="button" name="" id="btn" value="点击" />
		<div id="div1">
			这是div1
		</div>
		<div id="div2">
			这是div2
		</div>
		<ul>
			<li>列表1</li>
			<li>列表1</li>
			<li>列表1</li>
			<li>列表1</li>
		</ul>
		<span class="sp">
			
		</span>
			姓名:<input type="radio" name="sex" value="男"/>男<input type="radio" name="sex"/>女,
			<input type="text" name="nuame" value=""/>

1.1直接获取：

var div1=document.getElementById("div1")
			 var div1=document.getElementById("div2")
			 console.log(div1)
			 console.log(div2)

1.2、如果这个标签有id属性，那么可以直接使用id的值就可以获取该标签

btn.onclick=function(){
				通过标签名来获取标签
				var divs=document.getElementsByTagName("div")
				for(var i=0;i<divs.length;i++){
					console.log(divs[i])
				}

1.3、要获取到页面中所有应用了.sp的标签

var sps=document.getElementsByClassName("sp")
				console.log(sps)

1.4、更改span标签

sps[0].innerHTML="更改后的span"

1.5、获取性别


				var sexs=document.getElementsByName("sex")
				console.log(sexs[0].value)

四、正则表达式对象

1.1中文字符:/^[u4e00-\u9fa5]+$/

1.2邮箱:/^[O-9a-zA-Z_]+@[0-9a-zA-Z_]+[]{1][0-9a-zA-Z_]+$/;

1.3电话:/^(\d{3,4}-)?\d{7,8}$/

1.4月份:/^((O?[1-9])|1[O-2])$/

1.5天数:/^((0?[1-9])]((1/2)[O-9])|30|31)$/

1.6要求数字6-10，包含字母数字下划线

用户名：<input type="text" name="" id="tx" value=""/></br>
		邮箱：<input type="text" name="" id="st" value="" /></br>
		<input type="button" name="" id="bt" value="验证" />
		<script type="text/javascript">

源代码：

document.getElementById("bt").onclick=function(){
				//密码只能是6-10为，里面必须包含数字，字母，下划线
				var a=document.getElementById("tx").value
				var st=document.getElementById("st").value
				var dh=document.getElementById("dh").value
				//编写一个用于匹配密码格式的正则表达式
				var x=/^\w{6,10}$/
				var c=/^\S+@[0-9a-zA-Z]+[\.]{1}\w+$/
				var cr=x.test(a)
				var st=c.test(st)
				console.log(cr)
				console.log(st)
			}

视图：

输入的格式要是正确就会显示true 如果格式输入的不正确显示false

五、DOM(Document Object Model):文档对象模型

(1)获取一个元素

(⑵)移除一个元素

(3)创建一个元素

(4)向页面里面添加一个元素

(5)给元袁绑定一些事件

(6)获取元素的属性

(7)给元素添加一些css样式。

DOM的核心对象就是document对象

document对象是浏览器内置对象的一个对象，里面存储着专门用来操作元素的各种方法

源代码：

<style type="text/css">
			ul{
				width: 300px;
				list-style: none;
			}
			ul li{
				border: 1px solid red;
				padding: 10px 20px;
				margin-bottom: 5px;
			}
		</style>
	</head>
	<body>
        <input type="text" name="txt" id="txt" value="" />
		<input type="button" value="添加节点" onclick="add()">&nbsp;
		<input type="button" value="删除节点" onclick="del()">&nbsp;
		<input type="button" value="修改节点" onclick="update()">
		<ul>
			<li>1</li>
			<li>2</li>
			<li>3</li>
			<li>4</li>
			<li>5</li>
		</ul>

视图：

1.1创建一个元素

源代码：

<script type="text/javascript">
			//获取ul标签
			var ul=document.getElementsByTagName("ul")[0]//获取ul标签从一开始
			function add(){
				//创建一个新节点
				var li=document.createElement("li")
				li.innerHTML=document.getElementById("txt").value
				//appendChild()
				ul.appendChild(li)
			}
		</script>

视图：

一定不能掉头发

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
js总结6 文档对象

getDate() 从 Date对象返回一个月中的某一天(1～31)getMilliseconds()返回Date 对象的毫秒(0～999)getHours() 返回Date对象的小时(0～23)getMinutes() 返回Date对象的分钟(0～59)getSeconds() 返回Date对象的秒数(0～59)没有属性，只有获取或 getDay() 从 Date 对象返回一周中的某一天(0~6)[1-9])]((1/2)[O-9])|30|31)$/
复制链接

扫一扫