JavaScript学习笔记 BOM --2020-04-12

最新推荐文章于 2022-06-09 16:41:53 发布

兜里ヌ有糖

最新推荐文章于 2022-06-09 16:41:53 发布

阅读量100

点赞数

分类专栏：笔记

本文链接：https://blog.csdn.net/qq_43980232/article/details/105593909

版权

笔记专栏收录该内容

60 篇文章 0 订阅

订阅专栏

常用弹窗
alter("aaa")确认弹窗(无返回值)
confirm("aaa") 确认和取消弹窗(有返回值 true false)
prompt("aaa","bbb")带输入框的确认弹框("aaa"为提示语,bbb为输入框默认信息)

延时函数
setTimeOut("fun1()",1000)延时1000毫秒执行fun1()函数

时间间隔函数
setInterval("fun2",2000) 间隔2000毫秒执行fun2()函数

document对象

forms 所有form表单对象组成的数组，可以通过过forms[n]调用不同的表单对象

anchors 获得所有的锚点（a标签必须有name属性）
可以返回数组
数组中包含了文档中所有的锚点
只能返回包含了name属性的 a标签创建的锚点
不能反悔只包含id属性的a标签
links 获得所有的链接(href属性)
可以返回数组
数组中包含了文档中所有的链接
可以返回只包含id属性的a标签但是必须包含 href属性

<body>
	<script language="JavaScript">
		function getFormName(){
			var form_1 = document.forms[1];	
			console.log(document.forms);
			console.log("document.forms[0].name="+form_1.name);
			console.log("document.forms[0].btn_1.value="+form_1.btn_1.value);
			console.log(document.anchors);//获得所有的锚点（a标签必须有name属性）
			console.log(document.links);//获得所有的链接(href属性)
		}
		function changeImage(){
			var image_1 = document.images["dog_1"];	
			var image_2 = document.images["dog_2"];	
			if(image_1.src == image_2.src){
				image_1.src = "dog_1.jpg";
			}else{
				image_1.src = image_2.src;
			}
		}
	</script>
	<form name="form_data">
		<input type="button" name="btn_1" onclick="getFormName()" value="表单名称">
		<input type="button" name="btn_2" onclick="changeImage()" value="更换图片">
		<hr/>
		<img src="dog_1.jpg" name="dog_1"/>
		<hr/>
		<img src="dog_2.jpg" name="dog_2"/>
		<a href="https://www.baidu.com" target="_blank">百度一下</a>
	</form>
	<form name="form_data2">
		<input type="button" name="btn_1" onclick="getFormName()" value="表单名称">
		<input type="button" name="btn_2" onclick="changeImage()" value="更换图片">
		<hr/>
		<img src="dog_1.jpg" name="dog_1"/>
		<hr/>
		<img src="dog_2.jpg" name="dog_2"/>
	</form>
	</body>

运行结果：
在这里插入图片描述
对象方法
getElementById :根据ID获取对象
getElementsByName:根据Name获取对象的集合
getElementsByTagName:根据标签名获取对象的集合
innerHTML向页面中加标签（相当于添加了一行代码）
innerText向页面添加文本(以字符串格式添加进去)
js中innerHTML与innerText的用法与区别—百度问答

history对象

window.history.back()：返回上一页（往后(右）跳）
window.history.forward()：进入下一页（往后(左）跳）
window.history.go()：跳转到指定页（参数为正数往后(右）跳，参数为负往前（左）跳）

location对象

<a href="location.html#bbb" >页面跳转bbb</a>


function do_assign(){
		location.assign("location.html#bbb");
	}

function do_href(){
		location.href = "location.html#bbb";
	}

调用do_href()或do_assign()函数与a标签效果相同，实现跳转到页面内name属性为‘bbb’的位置

兜里ヌ有糖

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
JavaScript学习笔记 BOM --2020-04-12

forms 所有form表单对象组成的数组，可以通过过forms[n]调用不同的表单对象anchors 获得所有的锚点（a标签必须有name属性）可以返回数组数组中包含了文档中所有的锚点只能返回包含了name属性的 a标签创建的锚点不能反悔只包含id属性的a标签links 获得所有的链接可以返回数组数组中包含了文档中所有的链接可以返回只包含id属性的a标签但是必须包含 hr...
复制链接

扫一扫