DOM和BOM笔记

DOM的简单学习

DOM的简单学习:为了满足案例需求
*功能:控制html文档的内容
*代码:获取页面标签(元素)对象Element

document.getElementById("id值")//通过元素的id获取元素对象

*操作Element对象:

1.修改属性值:
	a.明确获取的对象是哪一个
	b.查看API文档,找其中有哪些属性可以设置
2.修改标签体内容:
	*属性:innerHTML//设置标签体的内容

简单事件
*功能:某些组件被执行了某些操作后,触发某些代码的执行。
*如何绑定事件

1.直接在html标签上,指定事件的属性(操作),属性值就是js代码 
	onclick--单击事件
2.通过js获取元素对象,指定事件属性,设置一个函数
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>change</title><!--点击交换图片案例-->
</head>
<body>
    <img id="Id" src="pic/1.jpg">
    <script>
        var s=document.getElementById("Id");
        flag=true;
        s.onclick=function () {
            if(flag){Id.src="pic/2.jpg";
                flag=false;
            }
            else{
                Id.src="pic/1.jpg";
                flag=true;
            }

        }
    </script>
</body>
</html>

BOM的简单学习

BOM的简单学习
*概念:浏览器对象模型。将浏览器的各个组成部分封装为对象、 在这里插入图片描述Window:窗口对象

1.创建
2.方法
	a.与弹出框有关的方法
		alert();弹出警告框
		confirm();确认取消对话框
		prompt();用户输入框
	b.与打开关闭有关的方法
		close();关闭浏览器窗口
		open();打开新浏览器窗口
			*返回一个新的Window对象
	c.与定时器有关的方法
		setTimeout();在指定的毫秒数后执行代码
			*参数
			1.js代码或者方法对象
			2.等待执行毫秒值
			例如:var id=setTimeout("alert("等待时 间过长")",2000);
					clearTimeout(id);//不会弹出警示框
		clearTimeout();取消setTimeout方法设置的timeout
		
		setInterval();按照指定的周期来调用代码
		clearInterval()取消由setInterval设置的timeout
3.属性
	a.获取其他BOM对象
		history
		location
		navigator
		screen
	b.获取DOM对象
		document
4.特点
	*Window对象不需要创建可以直接使用 window使用 window.方法名();
	*window引用可以省略 方法名();

Navigator:浏览器对象
Screen:显示器屏幕对象
History:历史记录对象

 1.创建(获取):
 	window.history/history
 2.方法:
 	back() 加载history列表中的前一个URL
 	forward() 加载history列表中的下一个URL
 	go(参数) 加载history列表中的某个具体页面
 		*参数为正数,前进几个历史记录
 		  参数为负数,后退几个历史记录
 3.属性:
 	length 返回当前窗口历史列表中的URL数量

Location:地址栏对象

1.创建(获取)
	window.location/location
2.方法
	reload();重新加载文档,刷新
3.属性
	href 设置或返回完整的URL
  • 2
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 3
    评论
评论 3
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值