JavaScript的DOM和浏览器BOM

最新推荐文章于 2024-07-20 16:59:43 发布

永旗狍子

最新推荐文章于 2024-07-20 16:59:43 发布

阅读量87

点赞数

分类专栏：前端文章标签： javascript html

本文链接：https://blog.csdn.net/qwq1518346864/article/details/116136977

版权

前端专栏收录该内容

14 篇文章 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输出流写入内容。

<script>
document.write("Hello world,I'm JavaScript");
</script>

改变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>

1.5DOM事件

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

1.6EvenListener

addEvenListener()方法

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

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

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

element.removeEventListener("mousemove", myFunction);

element.addEventListener(event, function, useCapture);

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

事件传递有两种方式：冒泡与捕获

在 *冒泡 *中，内部元素的事件会先被触发，然后再触发外部元素，即：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>

永旗狍子

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
JavaScript的DOM和浏览器BOM

一.JavaScript的DOM1.1概述通过 HTML DOM，可访问 JavaScript HTML 文档的所有元素。当网页被加载时，浏览器会创建页面的文档对象模型（Document Object Model）。 HTML DOM 模型被构造为对象的树：1.2查找HTML元素为了做到这件事情，您必须首先找到该元素。有三种方法来做这件事：1.通过 id 找到 HTML 元素在 DOM 中查找 HTML 元素的最简单的方法，是通过使用元素的 id。方法：docume.
复制链接

扫一扫

专栏目录