DOM基础学习1

begin 专注

已于 2022-04-03 22:34:27 修改

阅读量1k

点赞数

文章标签：前端 html javascript

于 2022-04-03 22:18:27 首次发布

本文链接：https://blog.csdn.net/qq_61718994/article/details/123945967

版权

学习内容：API和Web API，DOM简介，获取元素，事件基础，操作元素-修改元素内容，元素操作-修改元素属性，属性操作-修改元素表单

学习笔记：

API

API 是一些预先定义的函数，目的是提供应用程序与开发人员基于某软件或硬件得以访问一组例程的能力，或理解内部工作机制的细节。

Web API

Web API是浏览器提供的一套操作浏览器功能和页面元素的API（BOM和DOM）

总结

API是为我们程序员提供的一个接口，帮助我们实现某种功能，我们会使用就可以了，不必纠结内部如何实现

Web API主要是针对于浏览器提供的接口，主要针对于浏览器交互效果

Web API一般都有输入和输出（函数的传参和返回值），Web API 很多都是方法（函数）

DOM简介

什么是DOM

文档对象模型（Document Object Model。简称DOM），是W3C组织推荐的处理可扩展标记语言的标准编程接口。

W3C已经定义了一系列的DOM接口，通过这些接口可以改变网页的内容、结构和样式。

DOM树

文档：一个页面就是一个文档，DOM中用document表示

元素：页面中所有标签都是元素，DOM中用element表示

节点：网页中的所有内容都是节点（标签、属性、文本、注释等），DOM中用node表示

DOM把以上内容都看作是对象

获取元素

如何获取页面元素

·根据ID获取

·根据标签名获取

·通过html5新增的方式获取

·特殊元素获取

根据ID获取

使用getElementByID（）方法可以获取带有ID的元素对象。

因为我们文档页面从上往下加载，所以先得有标签，所以我们script写到标签的下面
get 获得 element 元素 by 通过驼峰命名法
参数 id是大小写敏感的字符串
返回的是一个元素对象

根据标签名获取

使用getElementsByTagName（）方法可以返回带有指定标签名的对象的集合。

该方法返回的是获取过来的元素对象的集合以伪数组的形式存储的

我们想要依次打印里面的元素对象我们可以采取遍历的方式

如果页面中只有一个li 返回的还是伪数组的形式

如果页面中没有这个元素返回的还是伪数组的形式只不过是空的伪数组

根据标签名获取还可以获取某个元素（父元素）内部所有指定标签名的子元素

element.getElementsByTagName（'标签名'）；

注意：父元素必须是单个对象（必须指明是哪一个元素对象），获取的时候不包括父元素自己

H5新增元素获取元素方式

document.getElementsByClassName('类名')；//根据类名返回元素对象集合

切记里面的选择器需要加符号

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>Document</title>
	</head>
	<body>
		<div class="box">盒子</div>
		<div class="box">盒子</div>
		<div class="nav">
			<ul>
				<li>首页</li>
				<li>产品</li>
			</ul>
		</div>
		<script>
			//getElementsByClassName根据类名获得某些元素集合
			var boxs =document.getElementsByClassName('box');
			console.log(boxs);
		</script>
	</body>
</html>

document.querySelector('选择器')； //根据指定选择器返回第一个元素对象

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>Document</title>
	</head>
	<body>
		<div class="box">盒子1</div>
		<div class="box">盒子2</div>
		<div class="nav">
			<ul>
				<li>首页</li>
				<li>产品</li>
			</ul>
		</div>
		<script>
			//getElementsByClassName根据类名获得某些元素集合
			//var boxs =document.getElementsByClassName('box');
			//console.log(boxs);
			//querySelector 返回指定选择器的第一个元素对象
			var firstBox=document.querySelector('.box');
			console.log(firstBox);
		</script>
	</body>
</html>

document.querySelectorAll('选择器')；//根据指定选择器返回

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>Document</title>
	</head>
	<body>
		<div class="box">盒子1</div>
		<div class="box">盒子2</div>
		<div class="nav">
			<ul>
				<li>首页</li>
				<li>产品</li>
			</ul>
		</div>
		<script>
			//1.getElementsByClassName根据类名获得某些元素集合
			//var boxs =document.getElementsByClassName('box');
			//console.log(boxs);
			//2.querySelector 返回指定选择器的第一个元素对象
//			var firstBox=document.querySelector('.box');
//			console.log(firstBox);
            //3.querySlectorAll 返回指定选择器的所有元素对象集合
            var allBox=document.querySelectorAll('.box');
            console.log(allBox);
		</script>
	</body>
</html>

获取特殊元素（body，heml）

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>Document</title>
	</head>
	<body>
		
		<script>
			//1.获取body元素
			var bodyEle = document.body;
			console.log(bodyEle);
			console.dir(bodyEle);
			//2.获取html元素
			var htmla=document.documentElement;
			console.log(htmla);
		</script>
	</body>
</html>

事件基础

事件概述

Javascript 使我们有能力创建动态页面，而事件是可以被Javascript侦测到的行为。

简单理解就是一种触发--响应机制

网页中的每个元素都可以产生某些可以触发Javascript的事件，例如，我们可以在用户点击某按钮时产生一个事件，然后去执行某些操作。

事件三要素

1.事件是有三部分组成事件源事件类型事件处理程序我们也称为事件三要素
（1）事件源事件被触发的对象谁按钮
（2）事件类型如何触发什么事件比如鼠标点击（onclick）还是鼠标经过还是键盘按下
（3）事件处理程序通过一个函数赋值的方式完成

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>document</title>
	</head>
	<body>
		<button id="btn">高老庄</button>
		<script>
			//点击一个按钮，弹出对话框
			//1.事件是有三部分组成 事件源 事件类型  事件处理程序 我们也称为事件三要素
			//（1）事件源  事件被触发的对象 谁 按钮
			var btn =document.getElementById('btn');
			//（2）事件类型  如何触发  什么事件 比如鼠标点击（onclick） 还是鼠标经过  还是键盘按下
			//（3）事件处理程序 通过一个函数赋值的方式 完成
			btn.onclick=function() {
				alert('背媳妇');
			}
		</script>
	</body>
</html>

执行事件的步骤

1.获取事件源

2.注册事件（绑定事件）

3.添加事件处理程序（采取函数赋值形式）

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>Document</title>
	</head>
	<body>
		<div>123</div>
		<script>
			//执行事件
			//点击div 控制台输出 我被选中了
			//1.获取事件源
			var div=document.querySelector('div');
			//2.绑定事件
			//div.onclick
			//3.添加事件处理程序
			div.onclick= function() {
				console.log('我被选中了');
			}
		</script>
	</body>
</html>

常见的鼠标事件

鼠标事件	触发条件
onclick	鼠标点击左键触发
onmouseover	鼠标经过触发
onmouseout	鼠标离开触发
onfocus	获得鼠标焦点触发
onblur	失去鼠标键点触发
onmousemove	鼠标移动触发
onmouseup	鼠标弹起触发
onmousedown	鼠标按下触发

操作元素

Javascript的DOM操作可以改变网页内容、结构和样式，我们可以利用DOM操作元素来改变元素里面的内容、属性等。

操作元素-改变元素内容

element.innerText

从其实位置到终止位置的内容，但它去除html标签，同时空格和换行也会去掉

element.innerHTML

起始位置到终止位置的全部内容，包括html标签，同时保留空格和换行

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style>
			div,
			p {
				width: 300px;
				height: 30px;
				line-height: 30px;
				background-color: pink;
			}
		</style>
	</head>
	<body>
		<button>显示当前系统时间</button>
		<div>当前时间</div>
		<p>1123</p>
		<script>
			//当我们点击了按钮， div里面的文字会发生变化
			//1.获取元素
			var btn=document.querySelector('button');
			var div=document.querySelector('div');
			//2.注册事件
			btn.onclick=function() {
				div.innerText=getDate();
			}
			function getDate() {
				var date=new Date();
				var year=date.getFullYear();
				var month=date.getMonth()+1;
				var dates=date.getDate();
				var arr=['星期日','星期一','星期二','星期三','星期四','星期五','星期六'];
				var day =date.getDay();
//				var hour=date.getHours();
//				var minute=date.getMinutes();
//				var secound=date.getSeconds();
				return '当前时间是：'+year+'年'+month+'月'+dates+'日 '+arr[day];
			}
			//元素可以不用添加事件
			var p=document.querySelector('p');
			p.innerText=getDate();
		</script>
	</body>
</html>

操作元素-修改元素属性

常用元素的属性操作

1.innerText、innerHTML 改变元素内容

2.src、href

3.id、alt、title

修改元素属性练习

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>Document</title>
	</head>
	<body>
		<button id="bd">bd</button>
		<button id="dyzh">dyzh</button> <br />
		<img src="images/bd.jpg" alt="" />
		<script>
			//修改元素属性 src
			//1.获取元素
			var bd=document.getElementById('bd');
			var dyzh=document.getElementById('dyzh');
			var img =document.querySelector('img');
			//2.注册事件 处理程序
			dyzh.onclick = function() {
				img.src='images/dyzh.jpg';
				img.title='dyzh';
			}
			bd.onclick = function() {
				img.src='images/bd.jpg';
				img.title='bd';
			}
		</script>
	</body>
</html>

操作元素-修改表单属性

表单元素的属性操作

利用DOM可以操作如下表单元素的属性：

type、value、checked、selected、disabled

修改表单元素练习

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>Document</title>
	</head>
	<body>
		<button>按钮</button>
		<input type="text" value="输入内容"/>
		<script>
			//获取元素
			var btn=document.querySelector('button');
			var input=document.querySelector('input');
			//注册事件  处理程序
			btn.onclick=function() {
				//表单里面的值 文字内容是通过value来修改的
				input.value='被点击了';
				//如果想要某个表单被禁用 就是不能再点击 disabled
				btn.disabled=true;//相当于this.disabled=true；this指向的是事件函数的调用者 btn
				
			}
		</script>
	</body>
</html>

begin 专注

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
DOM基础学习1

学习内容：API和Web API，DOM简介，获取元素，事件基础，操作元素-修改元素内容，元素操作-修改元素属性，属性操作-修改元素表单学习笔记：APIAPI 是一些预先定义的函数，目的是提供应用程序与开发人员基于某软件或硬件得以访问一组例程的能力，或理解内部工作机制的细节。Web APIWeb API是浏览器提供的一套操作浏览器功能和页面元素的API（BOM和DOM）总结API是为我们程序员提供的一个接口，帮助我们实现某种功能，我们会使用就可以了，不必纠结内部如何实现We.
复制链接

扫一扫