JavaScript的DOM和浏览器BOM

布满荆棘的人生 2023-01-16 11:24 139阅读 0赞

# 一.JavaScript的DOM #

## 1.1概述 ##

>  *  通过 HTML DOM，可访问 JavaScript HTML 文档的所有元素。
>  *  当网页被加载时，浏览器会创建页面的文档对象模型（Document Object Model）。
>  *  **HTML DOM** 模型被构造为**对象**的树：

##  1.2查找HTML元素 ##

为了做到这件事情，您必须首先找到该元素。有三种方法来做这件事：

> **1.通过 id 找到 HTML 元素**
> 
>  *  在 DOM 中查找 HTML 元素的最简单的方法，是通过使用元素的 id。
>  *  方法：**document.getElementById("id属性值")**;
>  *  如果找到该元素，则该方法将以对象（在 x 中）的形式返回该元素。
>  *  如果未找到该元素，则 x 将包含 null。

> **2.通过标签名找到 HTML 元素**
> 
>  *  方法：**getElementsByTagName("合法的元素名")**;

> **3.通过类名找到HTML 元素**
> 
>  *  方法：**getElementsByClassName("class属性的值")**

<!DOCTYPE html>
    <html>
    	<head>
    		<meta charset="UTF-8">
    		<title></title>
    		<style type="text/css">
    			#d1 {
    				width: 100px;
    				height: 100px;
    				background-color: red;
    			}
    		</style>
    	</head>
    	<body>
    		<div id="d1">
    		</div>
    		<ul>
    			<li>java</li>
    			<li>html5</li>
    			<li>css3</li>
    		</ul>
    		<script type="text/javascript">
    			var d1 = document.getElementById("d1");
    			d1.onclick = function() {
    				alert("被点击了");
    			}
    			d1.onmousemove = function() {
    				d1.style.background = "green";
    			}
    			d1.onmouseout = function() {
    				d1.style.backgroundColor = "red";
    			}
    						
    			var arrLi= document.getElementsByTagName("li");
    			
    			for (var i = 0; i < arrLi.length; i++) {
    				arrLi[i].onclick=function(){
    					//this 被点击的标签对象
    					alert(this.innerText);
    				}
    			}			
    		</script>
    	</body>
    </html>

## 1.3改变HTML ##

> 改变HTML输出流：document.write()可用于直接向HTML输出流写入内容。

> 改变HTML内容：使用innerHTML属性

<p id="p1">Hello world!</p>
    <script>
    document.getElementById("p1").innerHTML="abcd";
    </script>

>  *  改变HTML属性：document.getElementById(*id*).attribute=新属性值
>  *  将attribute替换成真实的属性名

<!DOCTYPE html>
    <html>
    <body>
    <img id="image" src="1.gif">
    <script>
    document.getElementById("image").src="2.jpg";
    </script>
    </body>
    </html>

## 1.4CSS变化 ##

>  *  对象.style.property=新样式
>  *  将property替换成真实的css属性名

<!DOCTYPE html>
    <html>
    <head>
    <meta charset="utf-8">
    </head>
    <body>
     
    <p id="p1">Hello World!</p>
    <p id="p2">Hello World!</p>
    <script>
    document.getElementById("p2").style.color="blue";
    document.getElementById("p2").style.fontFamily="Arial";
    document.getElementById("p2").style.fontSize="larger";
    </script>
    <p>以上段落通过脚本修改。</p>
     
    </body>
    </html>

![20210425202951560.png][]

## 1.5DOM事件 ##

>  *  元素被点击。
>  *  页面加载完成。
>  *  输入框被修改。

## 1.6EvenListener ##

addEvenListener()方法

>  *  在用户点击按钮时触发监听事件
>  *  addEventListener() 方法用于向指定元素添加事件句柄。

document.getElementById("myBtn").addEventListener("click", displayDate);

使用 removeEventListener() 方法来移除事件的监听。

element.removeEventListener("mousemove", myFunction);

element.addEventListener(event, function, useCapture);

<table> 
 <thead> 
  <tr> 
   <th>参数名</th> 
   <th>描述</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>event</td> 
   <td>事件的类型 (如 "click" 或 "mousedown")</td> 
  </tr> 
  <tr> 
   <td>function</td> 
   <td>事件触发后调用的函数</td> 
  </tr> 
  <tr> 
   <td>useCapture</td> 
   <td>用于描述事件是冒泡还是捕获。该参数是可选的</td> 
  </tr> 
 </tbody> 
</table>

> 事件传递有两种方式：冒泡与捕获
> 
>  *  在 \*冒泡 \*中，内部元素的事件会先被触发，然后再触发外部元素，即：p 元素的点击事件先触发，然后会触发 div 元素的点击事件。（从里面开始）
>  *  在 \*捕获 \*中，外部元素的事件会先被触发，然后才会触发内部元素的事件，即：div 元素的点击事件先触发 ，然后再触发 p元素的点击事件。（从外面开始）
> 
> 默认值为 false, 即冒泡传递，当值为 true 时, 事件使用捕获传递。

##  1.7操作元素 ##

如需向 HTML DOM 添加新元素，您必须首先创建该元素（元素节点），然后向一个已存在的元素追加该元素。

*  创建元素：document.createElement()
 *  追加元素：appendChild()

<div id="div1">
    <p id="p1">这是一个段落。</p>
    <p id="p2">这是另一个段落。</p>
    </div>
    
    <script>
    var para=document.createElement("p");
    var node=document.createTextNode("这是一个新段落。");
    para.appendChild(node);
    
    var element=document.getElementById("div1");
    element.appendChild(para);
    </script>

*  删除已有的 HTML 元素
 *  使用方法：removeChild()

<div id="div1">
    <p id="p1">这是一个段落。</p>
    <p id="p2">这是另一个段落。</p>
    </div>
    
    <script>
    var parent=document.getElementById("div1");
    var child=document.getElementById("p1");
    parent.removeChild(child);
    </script>

# 二.浏览器BOM #

## 4.1window ##

### 4.1.1window Location ###

window.location 对象用于获得当前页面的地址 (URL)，并把浏览器重定向到新的页面。

>  *  location.href 属性返回当前页面的 URL
>  *  location.assign() 方法加载新的文档

<html>
    <head>
    <script>
    function newDoc()
      {
      window.location.assign("http://www.baidu.com/")
      }
    </script>
    </head>
    <body>
    <input type="button" value="Load new document" onclick="newDoc()">
    </body>
    </html>

### 4.1.2window History ###

>  *  window.history 对象包含浏览器的历史。
>  *  window.history 对象在编写时可不使用 window 这个前缀。
>     
>      *  history.back()
>      *  history.forward()
> 
>

## 4.2JavaScript定时器 ##

>  *  定义定时器：
>     
>      *  setInterval('调用函数',毫秒时间)：每间隔固定毫秒值就执行一次函数
>      *  setTimeout('调用函数',毫秒时间)：在固定时间之后执行一次调用函数
>  *  关闭定时器：
>     
>      *  clearInterval(定时器名称)
>      *  clearTimeout(定时器名称)

案例：轮播图

<!DOCTYPE html>
    <html>
    <head lang="en">
    	<meta charset="UTF-8">
    <title>图片轮换</title>
    	<link rel="stylesheet" href="css/scroll.css">
    
    </head>
    
    <body>
    <div class="scroll" onmouseover="stop()" onmouseout="start()">
    	<div id="num">
    		<a href="#" >1</a>
    		<a href="#" >2</a>
    		<a href="#" >3</a>
    		<a href="#" >4</a>
    		<a href="#" >5</a>
    	</div>
    	<img src="img/1.gif" alt="图片" id="photo"/>
    	
    </div>
    <script type="text/javascript">
    		var imgs=["1.gif","2.gif","3.jpg","4.jpg","5.gif"];
    		var aList=document.getElementsByTagName("a");
    		
    		var index=0;
    		for (var i = 0; i < aList.length; i++) {
    			aList[i].onclick=function() {
    				index=this.innerText-1;
    				document.getElementById("photo").setAttribute("src","img/"+imgs[index]);
    			}
    		}	
    		function autoChange () {
    			index++;
    			if(index>=aList.length){
    				index=0;
    			}
    			var photo=document.getElementById("photo");
    			photo.setAttribute("src","img/"+imgs[index]);		
    		}		
    		var a;
    		function start () {
    			a=window.setInterval("autoChange()",1500);
    		}
    		function stop () {
    			window.clearInterval(a);
    		}
    		start();			
    	</script>
    </body>
    </html>

[20210425202951560.png]: /images/20221022/59263aadee3c4c8d8a7af4e39114102d.png