1.JavaScript核心BOM操作学习（界面交互功能）——JavaScript初始入门介绍，以及通过JavaScript完成简单功能的实现

最新推荐文章于 2021-07-23 15:12:02 发布

愿时间能学会宽恕

最新推荐文章于 2021-07-23 15:12:02 发布

阅读量369

点赞数

分类专栏：网页前端开发js,vue等知识文章标签： javascript js html web

尊重版权，转载需指明

本文链接：https://blog.csdn.net/getture/article/details/107893452

版权

网页前端开发js,vue等知识专栏收录该内容

24 篇文章 0 订阅

订阅专栏

注：本人少量掌握HTML CSS 以及JavaScript基础语法
也有一个自己做的网站
BOOKSAM

课程学习：bilibili上的黑马pink的课程（点击此处直接跳跃）
https://www.bilibili.com/video/BV1k4411w7sV?from=search&seid=243946891004868535

第一天

JavaScript两个阶段的关联性在这里插入图片描述
(该图片来自黑马教程)

Web APIs是JS的应用，大量使用JS基础语法做交互效果

什么是API

简单理解:API是给程序员提供的一种工具，以便能更轻松的实现想要完成的功能
官方解释：API（应用程序编程接口）是一些预先定义的函数，目的是提供应用程序与开发人员基于某软件或硬件得以访问一组例程的能力，而又无需访问源码，或理解内部工作机制的细节

什么是web API

Web API是浏览器提供的一套操作浏览器功能和页面元素的API（BOM和DOM），针对浏览器的交互效果。
比如 alert(‘hello world’) 就是浏览器的一个API

什么是DOM

文档对象模型，是W3C组织推荐的处理可扩展标记语言（HTML和XML）的标准编程接口
通过W3C已经定义的DOM接口，可以改变网页的内容、结构和样式

DOM简介

在这里插入图片描述
（图片来自黑马）
文档在DOM中使用document表示
元素在DOM中使用element表示

一.获取元素

1.根据ID获取

document.getElementById(’’)
方法获取带有ID的元素

返回的是：对象

2.根据标签名获取

document.getElementsByTagName(’’)
方法获取带有特定标签名的对象的集合

返回的是：获取过来的元素对象的集合，以伪数组形式存储·

3.根据类名获取

document.getElementsByClassName(’’)
方法根据类名返回元素对象集合

返回的是：获取过来的元素对象的集合

4.返回指定选择器的元素对象

返回第一个元素对象：document.querySelector(’’)
返回所有的元素对象：document.querySelectorAll(’’)

里面使用"."跟属性名，选择属性
使用”#“跟ID名，选择ID

（与CSS里面的选择器类似）

5.特殊：获取特殊元素——body和html

获取body：document.body
获取html：document.documentElement

二.事件

1.组成

1.事件源：事件被触发的对象（是由谁触发的）

2.事件类型：如何触发（是由鼠标点击触发还是鼠标经过触发等）

3.事件处理程序：通过一个函数赋值的方式完成

2.执行事件的步骤

1.获取事件源
2.注册事件(绑定事件)
3.添加事件处理程序（采用函数赋值形式）

<body>
 <button id="btn">
  hello world!
 </button>
 <script>
  //获取事件源
  var btn=document.getElementById('btn')
  //绑定事件 注册事件
  //btn.onclick
  //添加事件处理程序
  btn.onclick=function(){
   alert("你好世界");
  }
 </script>
</body>

3.常见的鼠标事件

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

三.操作元素

1.改变元素内容

element.innerText (不识别HTML标签)
起始位置到终止位置的全部内容，去除html标签，同时空格和换行会去掉

W3C推荐使用：element.innerHTML （识别HTML标签）
起始位置到终止位置的全部内容，包括html标签，同时保留空格和换行

<html>
<body>
	<button id="btn">
		hello world
	</button>
	<button id="btn2">
		it is a button
	</button>
	<script>
		var btn = document.querySelector('#btn');
		var btn2= document.querySelector('#btn2')
		btn.onclick = function(){
			btn.innerText='<p style="color:red">你好世界</p>';
			btn2.innerHTML='<p style="color:red">这是一个按钮</p>'
		}
	</script>
</body>
</html>

2.改变元素属性

<style>
	img{
		height:250px;
		width:200px;

	}
</style>
<body>
	<button id="leiyi" >
		雷伊
	</button>
	<button id="gaiya">
		盖亚
	</button>
	<br>
	<img src="https://iknow-pic.cdn.bcebos.com/267f9e2f07082838070912c3be99a9014d08f1e5?x-bce-process=image/resize,m_lfit,w_600,h_800,limit_1" title='雷神雷伊'>
	<script>
		var leiyi=document.getElementById('leiyi');
		var gaiya=document.getElementById('gaiya');
		var img=document.querySelector('img');
		gaiya.onclick=function(){
			img.src='http://www.07073.com/uploads/100819/11_102329_2.png'
			img.title='战神盖亚';
		}
		leiyi.onclick=function(){
			img.src='https://iknow-pic.cdn.bcebos.com/267f9e2f07082838070912c3be99a9014d08f1e5?x-bce-process=image/resize,m_lfit,w_600,h_800,limit_1'
			img.title='雷神雷伊';
		}
	</script>
</body>