E005Web学习笔记-JavaScript（三）：BOM

àì夳堔傛蜴生んèń 2024-04-17 18:49 79阅读 0赞

# 一、简单学习DOM #

## 1、控制（增删改查）HTML文档的内容； ##

## 2、代码：获取页面的标签（元素）对象Element； ##

document.getElementById();//通过元素的ID获取元素

##  ##

## 3、操作Element对象： ##

### 修改属性值步骤： ###

第一步：明确获取的对象是哪一个；

第二步：查看API文档，找其中有哪些属性可以设置；

### 修改标签内容： ###

第一步：获取元素对象；

第二部：使用innerHTML属性修改标签的内容；

**代码示例：**

<!DOCTYPE html>
    <html>
    	<head>
    		<meta charset="utf-8">
    		<title>对象演示</title>
    	
    	</head>
    	<body>
    		<h1 id="hehe" style="color: #FF0000;">
    			呵呵呵！
    		</h1>
    		<script type="text/javascript">
    			var hehe = document.getElementById("hehe");
    			//修改属性
    			hehe.style = "color: #00EEFF;";
    			//修改内容
    			hehe.innerHTML = "哈哈哈哈";
    		</script>
    	</body>
    </html>

# 二、简单学习事件 #

## 1、功能 ##

某些组件被执行某些操作后出发某些代码；

## 2、如何绑定事件 ##

### 方法一：直接在HTML标签上，指定事件的属性，属性就是js代码； ###

//点击事件
    onClick();

**代码演示：**

<!DOCTYPE html>
    <html>
    	<head>
    		<meta charset="utf-8">
    		<title>事件演示</title>
    		<script type="text/javascript">
    			function c(){
    				alert("调取js方法-我被点了");
    			}
    		</script>
    	</head>
    	<body>
    		
    		<h1 id="lala" onclick="alert('直接写-我被点了');">
    			啦啦!
    		</h1>
    		
    		<h1 id="lala" onclick="c()">
    			啦啦!
    		</h1>
    	</body>
    </html>

### 方法二：通过JS获取元素对象，指定事件属性，然后设置事件所要执行的代码 ###

<!DOCTYPE html>
    <html>
    	<head>
    		<meta charset="utf-8">
    		<title>事件演示</title>
    	
    	</head>
    	<body>
    		</h1>
    		
    		<h1 id="lala">
    			啦啦!
    		</h1>
    		<script type="text/javascript">
    			function c(){
    				alert("调取js方法-我被点了");
    			}
    			var a = document.getElementById("lala");
    			a.onclick = c;//别加括号,否则会直接执行,点击无效
    		</script>
    	</body>
    </html>

**点击改变文字内容，再点击再改回来，如此循环，案例代码：**

<!DOCTYPE html>
    <html>
    	<head>
    		<meta charset="utf-8">
    		<title>事件演示</title>
    	
    	</head>
    	<body>
    		</h1>
    		
    		<h1 id="lala">
    			啦啦!
    		</h1>
    		<script type="text/javascript">
    			var b = 0;
    			function c(){
    				if(b==0){
    					a.innerHTML = "啦啦！";
    					b = 1;
    				}else{
    					a.innerHTML = "哈哈！";
    					b = 0;
    				}
    			}
    			var a = document.getElementById("lala");
    			a.onclick = c;//别加括号,否则会直接执行,点击无效
    		</script>
    	</body>
    </html>

# 三、BOM #

## 1、概述 ##

Browser Object Model 浏览器对象模型；

## 2、常用的BOM对象 ##

1、window对象 ，是JS的最顶层对象，其他的BOM对象都是window对象的属性；
    
    2、document对象，（DOM）文档对象；
    
    3、location对象，浏览器当前URL信息；
    
    4、navigator对象，浏览器本身信息；
    
    5、screen对象，客户端屏幕信息；
    
    6、history对象，浏览器访问历史信息；

## 3、window对象 ##

### （1）创建： ###

window不需要创建，可以直接使用；

### （2）方法： ###

**①与弹出框有关的方法；**

alert()显示带有一段消息和一个确认按钮的警告框；
    confirm()显示带有一段消息以及确认按钮和取消按钮的对话框；
        -- 如果用户点击确定按钮，则返回ture；
        -- 如果用户点击取消按钮。则返回false；
    prompt()显示可提示用户输入的对话框；
        -- 返回输入框内用户输入的内容；

**代码演示：**

<!DOCTYPE html>
    <html>
    	<head>
    		<meta charset="utf-8">
    		<title>window对象</title>
    		<script type="text/javascript">
    			alert("警告框");
    			var flag = confirm("确定吗？");
    			if(flag){
    				document.write("您点击了确定");
    			}else{
    				document.write("您点击了取消");
    			}
    			var text = prompt("您可以在这里输入一些内容哦");
    			document.write(text);
    		</script>
    	</head>
    	<body>
    	</body>
    </html>

②与打开关闭有关的方法

open()打开一个新的浏览器窗口或查找一个已命名的窗口；
    close()关闭浏览器窗口；

**代码演示：**

<!DOCTYPE html>
    <html>
    	<head>
    		<meta charset="utf-8">
    		<title>window对象</title>
    	</head>
    	<body>
    		<input id="btn" type="button" value="打开百度" /><br />
    		<input id="btn_close" type="button" value="关闭窗口" />
    		<script type="text/javascript">
    			function f(){
    				open("http://www.baidu.com/");
    			}
    			function f1(){
    				close();
    			}
    			var a = document.getElementById("btn");
    			a.onclick = f;
    			var b = document.getElementById("btn_close");
    			b.onclick = f1;
    		</script>
    	</body>
    </html>

**③与定时器有关的方法**

setTimeout()在指定的毫秒数后调用函数或计算表达式；
    clearTimeout()取消由 setTimeout() 方法设置的 timeout；
    setInterval()按照指定的周期（以毫秒计）来调用函数或计算表达式；
    clearInterval()取消由 setInterval() 设置的 timeout；

**代码演示：**

<!DOCTYPE html>
    <html>
    	<head>
    		<meta charset="utf-8">
    		<title>window对象</title>
    	</head>
    	<body>
    		<h1 id="a1">
    			3秒后改变字体颜色……
    		</h1>
    		<h1 id="a2">
    			0
    		</h1>
    		<script type="text/javascript">
    			//一次性定时器
    			var h1 = document.getElementById("a1");
    			function f1(){
    				h1.style = "color:#ff0000;";
    			}
    			var t = setTimeout(f1,3000);
    			//取消一次性定时器
    			function f2(){
    				clearTimeout(t)
    			}
    			h1.onclick = f2;
    			//循环计时器
    			var num = 0;
    			var h2 = document.getElementById("a2");
    			function f3(){
    				num++;
    				h2.innerHTML = num;
    				if(num==10){
    					//取消循环计时器
    					clearInterval(i);
    				}
    			}
    			var i = setInterval(f3,1000);
    			
    		</script>
    	</body>
    </html>

### （3）属性： ###

### 获取其他BOM对象： ###

history
    location
    navigator
    screen

### 获取DOM对象： ###

document

### （4）特点： ###

①window不需要创建，可以直接使用，window.方法名()；

②可以省略window，即直接使用方法名()；

## 4、Location对象 ##

### （1）创建 ###

无需创建，可直接获取，location；

### （2）方法 ###

reload()重新载入当前文档；

### （3）属性 ###

href	返回完整的URL

### 代码示例： ###

<!DOCTYPE html>
    <html>
    	<head>
    		<meta charset="utf-8">
    		<title>Location对象</title>
    	</head>
    	<body>
    		<input id="btn" type="button" value="去百度"/>
    		<script type="text/javascript">
    			var btn = document.getElementById("btn");
    			btn.onclick = function(){
    				//location.reload();//刷新
    				//alert(location.href);//获取地址
    				//设置地址
    				location.href = "http://www.baidu.com/";
    			}
    		</script>
    	</body>
    </html>

## 5、History对象 ##

### （1）创建： ###

History 对象包含用户（在浏览器窗口中）访问过的 URL。

History 对象是 window 对象的一部分，可通过 window.history 属性对其进行访问。

### （2）方法 ###

back()加载 history 列表中的前一个 URL；
    forward()加载 history 列表中的下一个 URL；
    go(参数)加载 history 列表中的某个具体页面；
    -- 参数：
        正数：前进几个历史记录；
        负数：后退几个历史记录；

### （3）属性 ###

length返回当前窗口历史列表中的网址数；

### 代码示例： ###

<!DOCTYPE html>
    <html>
    	<head>
    		<meta charset="utf-8">
    		<title>Location对象</title>
    	</head>
    	<body>
    		<input id="btn" type="button" value="去百度"/>
    		<input id="btn_forward" type="button" value="前进"/>
    		<input id="btn_back" type="button" value="后退"/>
    		<input id="btn_go" type="button" value="走"/>
    		<script type="text/javascript">
    			var btn = document.getElementById("btn");
    			btn.onclick = function(){
    				location.href = "http://www.baidu.com/";
    			}
    			var btn_forward = document.getElementById("btn_forward");
    			var btn_back = document.getElementById("btn_back");
    			var btn_go = document.getElementById("btn_go");
    			btn_forward.onclick = function(){
    				history.forward();
    			}
    			btn_back.onclick = function(){
    				history.back();
    			}
    			btn_go.onclick = function(){
    				history.go(1);
    			}
    		</script>
    	</body>
    </html>