DOM和BOM笔记

最新推荐文章于 2024-07-28 20:27:10 发布

Div.143

最新推荐文章于 2024-07-28 20:27:10 发布

阅读量66

点赞数 2

文章标签： javascript

本文链接：https://blog.csdn.net/kanbujianwolue/article/details/118270388

版权

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

Div.143

关注

2
点赞
踩
0

收藏

觉得还不错? 一键收藏
3
评论
DOM和BOM笔记

DOM的简单学习：为了满足案例需求*功能：控制html文档的内容*代码：获取页面标签（元素）对象Elementdocument.getElementById("id值")//通过元素的id获取元素对象*操作Element对象：1.修改属性值： a.明确获取的对象是哪一个 b.查看API文档，找其中有哪些属性可以设置2.修改标签体内容： *属性：innerHTML//设置标签体的内容简单事件*功能：某些组件被执行了某些操作后，触发某些代码的执行。*如何绑定事件1.直接在html标
复制链接

扫一扫