文章目录

1.API和WebAPIs
- 1.1 Web APIs和JS基础关联性
- 1.2 API和Web API
- 1.3 API和WebAPI总结
2.DOM
- 2.1 DOM简介
- - 2.1.1 什么是DOM
  - 2.1.2 DOM 树
- 2.2 获取元素
- - 2.2.1 根据ID获取
  - 2.2.2 根据标签名获取
  - 2.2.3 通过HTML5新增的方法获取
  - 2.2.4 获取特殊元素(body，html)
- 2.3 事件基础
- 2.4 操作元素
- - 2.4.1 改变元素内容
  - 2.4.2 常用元素的属性操作
  - 2.4.3 表单元素的属性操作
  - 2.4.4 元素样式属性操作
  - 2.4.5 排他元素

1.API和WebAPIs

1.1 Web APIs和JS基础关联性

JS的组成

ECMAScript是学的JavaScript基础
DOM和BOM是学Web APIs

JS基础阶段和Web APIs阶段

Web ApIs是W3C组织的标准
Web ApIs我们主要学习DOM和BOM
Web ApIs是JS独有的部分
主要学习页面交互功能
需要使用JS基础的课程内容做基础

1.2 API和Web API

API

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

Web API

WebAPI是浏览器提供的一台操作浏览器功能和页面元素的API(BOM和DOM)。
MDN详细API：http://developer.mozilla.org/zh-CN/docs/Web/API
因为WebApI很多，所以将这个阶段称为WebAPIs

1.3 API和WebAPI总结

API是为我们程序员提供的一个接口，帮助我们实现某种功能，我们会使用就可以了，不必纠结内部如何实现
WebAPI主要是针对浏览器提供的接口，主要针对于浏览器做交互效果
Web API一般都有输入和输出(函数的传递和返回值)，web API很多都是方法(函数)
学习Web API可以结合前面学习内置对象方法的思路学习

2.DOM

2.1 DOM简介

2.1.1 什么是DOM

文档对象模型(Document Object Model)，是W3C组织推荐的处理可扩展标记语言(HTML或者XML)的标准编程接口
W3C已经定义了一系列的DOM接口，通过这些DOM接口可以改变王爷的内容、结构和样式

2.1.2 DOM 树

文档：一个页面就是一个文档，DOM中使用document表示
元素：页面中的所有标签都是元素，DOM中使用element表示
节点：网页中的所有内容都是节点(标签、属性、文本、注释等)，DOM中使用node表示
DOM把以上内容都看作是对象

2.2 获取元素

获取页面中的元素可以使用以下几种方式：

根据ID获取
根据标签名获取
通过HTML5获取
特殊元素获取

2.2.1 根据ID获取

<div id="time">2022-7-25</div><script>//1.因为文档页面从上往下加载，所以先得有标签，所以我们script写到标签的下面//2.get获得element元素，by通过驼峰命名法//3.参数Id是大小写敏感的字符串//4.返回的是一个元素对象var timer = document.getElementById('time');console.log(timer);console.log(typeof timer);//5.console.dir打印我们返回的元素对象，更好的查看里面的属性和方法console.dir(timer);</script>

2.2.2 根据标签名获取

使用getElementByTagName()方法可以返回带有指定标签名的对象的集合

document.getElementsByTagName(‘标签名’);

因为得到的是一个对象的集合，所以我们想要操作里面的元素就需要遍历；
得到的元素对象是动态的

还可以获取某个元素(父元素)内部所有指定标签名的子元素

element.getElementByTagName(‘标签名’);
注意：父元素必须指明是哪一个元素对象，获取的时候不包括父元素自己

 <ul><li>知否知否</li><li>知否知否</li><li>知否知否</li><li>知否知否</li><li>知否知否</li></ul><ol id="ol"><li>111</li><li>111111</li><li>111</li><li>111</li><li>111</li></ol><script>//返回的是获取过来元素对象的集合，以伪数组的形式存储的var lis= document.getElementsByTagName('li');console.log(lis);console.log(lis[0]);//想要依次打印里面的元素对象可以采取遍历的方式for(var i = 0; i < lis.length; i++){console.log(lis[i]);}//如果页面中只有一个li，返回的还是伪数组的形式//如果页面中没有这个元素返回为空的伪数组形式//element.getElementByTagName('标签名');var ol = document.getElementById('ol');console.log(ol.getElementsByTagName('li'));</script>

2.2.3 通过HTML5新增的方法获取

document.getElementByClassName(‘类名’);//根据类名返回某些元素对象集合

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

document.querySelectorAll(‘选择器’);//根据指定选择器返回

<div class="box">box</div><div class="box">box</div><div id="nav"><ul><li>产品</li><li>产品1</li></ul></div><script>//1.getElementVyiClassName根据类名获得某些元素集合var boxs = document.getElementsByClassName('box');console.log(boxs);//querySelector 返回指定选择器的第一个元素对象var firstBox = document.querySelector('.box');console.log(firstBox);var nav = document.querySelector('#nav');console.log(nav);var li = document.querySelector('li');console.log(li);//querySelectorAll 返回指定选择器的所有元素对象的集合var allBox = document.querySelectorAll('.box');console.log(allBox);</script>

2.2.4 获取特殊元素(body，html)

获取body元素

document.body;//返回body元素对象

获取html元素

document.documentElement;//返回html元素对象

2.3 事件基础

JavaScript使我们有能力创建动态页面，而事件是可以被JavaScript侦测到的行为
简单理解：触发—响应机制
网页中的每个元素可以产生某些可以触发JavaScript的事件，，例如，他们可以在用户点击某按钮时产生一个事件
事件三要素
- 事件源：事件被触发的对象，谁，按钮
- 事件类型：如何触发，什么事件，比如鼠标点击(onclick)，还是鼠标经过，键盘按下
- 事件处理程序：通过一个函数赋值的方式完成

<button id="btn">唐伯虎</button><script>//点击一个按钮，弹出对话框//1.事件是由三部分组成：事件源、事件类型、事件处理程序，即事件三要素//（1）事件源：事件被触发的对象 ，谁，按钮var btn = document.getElementById('btn');//(2)事件类型：如何触发，什么事件，比如鼠标点击(onclick)，还是鼠标经过，键盘按下//(3)事件处理程序：通过一个函数赋值的方式完成btn.onclick = function(){alert('点秋香');}</script>

执行事件的步骤
- 获取事件源
- 注册事件(绑定事件)
- 添加事件处理程序(采取函数赋值程形式)
常见的鼠标事件

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

2.4 操作元素

JavaScript的DOM操作可以改变网页内容、结构和样式，我们可以利用DOM操作元素来改变元素里面的内容、属性等，注意一下都是属性

2.4.1 改变元素内容

element.innerText
从起始位置到终止位置的内容，但他去除html标签，同时空格和换行也会去掉

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

<div></div><p>我是文字<span>123</span></p><script>//innerText和innerHTML的区别//1.innerText：不识别html标签.非标准,去除空格和换行var div = document.querySelector('div');// div.innerText = '<strong>今年是</strong>2022';//2.innerHTML：识别html标签，W3C标准div.innerHTML = '<strong>今天是：</strong>2022';//这两个属性是可读写的，可以获取元素里面的内容,保留空格和换行var p = document.querySelector('p');console.log(p.innerText);console.log(p.innerHTML);</script>

2.4.2 常用元素的属性操作

innerText、innerHTML改变元素内容
src、href
id、alt、title

<button id="ldh">刘德华</button><button id="zxy">张学友</button><img src="ldh.jpg" alt="" title="刘德华"><script>//1.修改元素属性var ldh = document.getElementById('ldh');var zxy = document.getElementById('zxy');var img = document.querySelector('img');//2.注册事件zxy.onclick = function(){img.src = '../img/7.jpg';//点击按钮即可改变图片img.title = '张学友思密达';}ldh.onclick = function(){img.src = 'ldh.jpg';//点击按钮即可改变图片img.title = '刘德华'}</script>

案例：分时显示不同图片，显示不同问候语

根据系统不同时间来判断，所以需要用到日期内置对象
利用多分支语句来设置不同图片
需要一个图片
并根据事件修改图片，就需要用到操作元素src属性
需要一个div显示不同的问候语，修改元素内容即可

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>img {width: 300px;}</style>
</head>
<body><img src="../img/4.jpeg" alt=""><div>上午好</div><script>//1.获取元素var img = document.querySelector('img');var div = document.querySelector('div');//2。得到当前的小时数var date = new Date();var h = date.getHours();//3.判断小时数改变文字和图片信息if(h < 12){img.src = '../img/5.jpeg';div.innerHTML = '上午好';}else if(h < 18){img.src = '../img/7.jpg';div.innerHTML = '下午好';}else{img.src = 'ldh.jpg';div.innerHTML = '晚上好';}</script>
</body>
</html>

2.4.3 表单元素的属性操作

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

type、value、checked、selected、disabled

案例：仿京东显示密码

点击按钮将密码框切换为文本框，并可以查看密钥明文
核心思路：点击眼睛按钮，把密码框类型改为文本框就可以看见里面的密码
一个按钮两个状态，点击一次，切换为文本框，继续点击一次切换为密码框
算法：利用一个flag变量，来判断flag的值，如果是1就切换为文本框，flag设置为0，如果是0就切换为密码框，flag设置为1

代码如下：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>仿京东密码</title><style>.box {position: relative;width: 400px;border-bottom: 1px solid #ccc;margin: 100px auto;}.box input {width: 370px;height: 30px;border: 0;outline: none;}.box img {position: absolute;top: 4px;right: 10px;width: 27px;}</style>
</head>
<body><div class="box"><label for=""><img src="close.png" alt="" id="eye"></label><input type="password" name="" id="pwd"></div><script>//1.获取元素var eye = document.getElementById('eye');var pwd = document.getElementById('pwd');//2.注册事件，处理程序var flag = 0;eye.onclick = function(){//点击一次之后flag一定要变化if (flag == 0) {pwd.type = 'text';eye.src = 'open.png';flag = 1;}else{pwd.type = 'password';eye.src = 'close.png';flag = 0;}}</script>
</body>
</html>

2.4.4 元素样式属性操作

我们可以通过JS修改元素的大小、颜色、位置等样式

element.style 行内样式操作
element.className 类名样式操作

注意：JS里面的样式采取驼峰命名法，比如fontSize、backgroundColor；JS修改style样式操作，产生的是行内样式，CSS权重比较高

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>div {width: 200px;height: 200px;background-color: pink;}</style>
</head>
<body><div></div><script>//1.获取元素var div = document.querySelector('div');//2.注册事件  ，处理程序div.onclick = function(){//div.style里面的属性采取驼峰命名法this.style.backgroundColor = 'purple';this.style.width = '250px';}</script>
</body>
</html>

案例：关闭二维码

核心思路：利用样式的显示和隐藏完成，display:none隐藏元素，display:block显示元素
点击按钮：就让这个二维码盒子隐藏起来即可

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>.box {position: relative;width: 74px;height: 88px;border: 1px solid #ccc;margin: 100px auto;font-size: 12px;text-align: center;color: #f40;display: block;}.box img {width: 60px;margin-top: 5px;}.close-btn {position: absolute;top: -1px;left: -16px;width: 14px;height: 14px;border: 1px solid #ccc;line-height: 14px;font-family: serif;cursor: pointer;}</style>
</head>
<body><div class="box">淘宝二维码<img src="OR.png" alt=""><i class="close-btn">x</i></div><script>//1.获取元素var btn = document.querySelector('.close-btn');var box = document.querySelector('.box');//2.注册事件btn.onclick = function(){box.style.display = 'none';}</script>
</body>
</html>

案例：显示隐藏文本框内容

当鼠标点击文本时，里面的默认文字隐藏，当鼠标离开文本时，里面的文字显示

首先表单需要2个新事件，获得焦点onfocus失去焦点onblur
如果获得焦点，判断表单里面内容是否为默认文字，如果是默认文字，就清空表单内容
如果失去焦点，判断表单内容是否为空，如果为空，则表单内容返回默认文字

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>input {color: #999;border: 1px solid #ccc;}</style>
</head>
<body><input type="text" value="手机"><script>var text = document.querySelector('input');//获得焦点事件text.onfocus = function(){// console.log('得到了焦点');if (this.value === '手机'){this.value = '';}//获得焦点需要把文本框里面的文字变黑this.style.color = '#333';}//失去焦点事件text.onblur = function(){// console.log('失去了焦点');if (this.value === ''){this.value = '手机';//获得焦点需要把文本框里面的文字变黑this.style.color = '#999';}}</script>
</body>
</html>

通过className修改属性

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>div {width: 200px;height: 200px;background-color: pink;}.change {width: 250px;height: 250px;background-color: purple;font-size: 25px;margin-top: 100px;}</style>
</head>
<body><div>文本</div><script>var test = document.querySelector('div');test.onclick = function(){//通修改元素的className更改元素的样式，适合于样式较多或者功能复杂的情况//如果想要保留原先的类名，可以用多类名选择器this.className = 'change';//让当前元素的类名改为了change}</script>
</body>
</html>

案例：密码框格式提示错误信息

用户如果离开密码框，里面输入个数不是6~16，则提示错误信息，否则提示输入正确信息
首先判断事件是表单失去焦点
如果输入正确则提示正确的信息颜色为绿色小图标变化
如果输入不是6~16位，则提示错误信息颜色为红色小图标变化
因为里面变化样式较多，我们采取className修改样式

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>div {width: 600px;margin: 100px auto;}.message {display: inline-block;font-size: 12px;color: #999;background: url(mese.png) no-repeat left center;padding-left: 20px;}.wrong {color: red;background: url(wrong.png) no-repeat left center;}.right {color: green;background: url(mese.png) no-repeat left center;}</style>
</head>
<body><div class="register"><input type="password" class="ipt"><p class="message">请输入6~16位密码</p></div><script>var ipt = document.querySelector('.ipt');var message = document.querySelector('.message');ipt.onblur = function(){//根据表单里面值的长度if(this.value.length < 6 || this.value.length > 16){// console.log('错误');message.className = 'meassge wrong';message.innerHTML = '你输入的位数不对';}else{message.className = 'message right';message.innerHTML = '您输入正确'}}</script>
</body>
</html>

操作元素总结

案例：点击按钮更换屏幕背景颜色

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head>
<body><button>开关灯</button><script>var btn = document.querySelector('button');var flag = 0;btn.onclick = function(){if(flag === 0){document.bgColor = 'black';flag = 1;}else{document.bgColor = '#fff';flag = 0;}}</script>
</body>
</html>

2.4.5 排他元素

如果有同一组元素，我们想要某一个元素实现某种样式，需要用到循环的排他思想算法。
所有元素全部清除样式
给当前元素设置样式
顺序不能颠倒

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head>
<body><button>按钮1</button><button>按钮2</button><button>按钮3</button><button>按钮4</button><button>按钮5</button><script>var btns = document.getElementsByTagName('button');//btns得到的是伪数组for(var i = 0; i < btns.length; i++){btns[i].onclick = function(){//先把所有的按钮背景颜色去掉for(var i = 0; i < btns.length; i++){btns[i].style.backgroundColor = '';}//然后才让当前的元素背景颜色为pinkthis.style.backgroundColor = 'pink';}}</script>
</body>
</html>

案例：百度换肤

给一组元素注册事件
给4个小图片利用循环注册点击事件
当我们点击了这个图片，让页面背景更换为当前图片
核心算法：把当前图片的src路径取过来，给body作为背景即可

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>* {padding: 0;margin: 0;}body {background: url(../img/1.webp) no-repeat center top;}li {list-style: none;}.baidu {overflow: hidden;margin: 100px auto;background-color: #fff;width: 410px;padding-top: 3px;}.baidu li{float: left;margin: 0 1px;cursor: pointer;}.baidu img{width: 100px;}</style>
</head>
<body><ul class="baidu"><li><img src="../img/1.webp" alt=""></li><li><img src="../img/2.jpeg" alt=""></li><li><img src="../img/3.jpeg" alt=""></li><li><img src="../img/3.png" alt=""></li></ul><script>var imgs = document.querySelector('.baidu').querySelectorAll('img');// console.log(imgs);for(var i = 0; i < imgs.length; i++){imgs[i].onclick = function(){// this.src;点击图片的路径,把这个路径给bodydocument.body.style.backgroundImage = 'url('+ this.src +')'}}</script>
</body>
</html>

案例：表格隔行变色

用到新的鼠标事件，鼠标经过onmouseover，鼠标离开onmouseout
核心思路：鼠标经过tr行，当前的行变背景颜色，鼠标离开去掉当前的背景颜色
第一行不需要换色

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>.bg {background-color: pink;}</style>
</head>
<body><table><thead></thead><tbody><tr><td>1</td><td>2</td><td>3</td><td>4</td></tr><tr><td>1</td><td>2</td><td>3</td><td>4</td></tr><tr><td>1</td><td>2</td><td>3</td><td>4</td></tr><tr><td>1</td><td>2</td><td>3</td><td>4</td></tr><tr><td>1</td><td>2</td><td>3</td><td>4</td></tr><tr><td>1</td><td>2</td><td>3</td><td>4</td></tr></tbody></table><script>//获取的是tbody里面的行var trs = document.querySelector('tbody').querySelectorAll('tr');//2.利用循环绑定注册事件for(var i = 0; i <trs.length; i++){//3.鼠标经过事件onmouseovertrs[i].onmouseover = function(){// console.log(11);this.className = 'bg';}//4.鼠标离开onmouseouttrs[i].onmouseout = function(){this.className = '';}}</script>
</body>
</html>

案例：全选反选

全选和取消全选做法：让下面所有复选框的checked属性(选中状态)跟随全选按钮即可

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>.wrap{margin: 0px auto;}</style>
</head>
<body><div class="wrap"><table><thead><tr><th><input type="checkbox" id="j_cbA11" /></th><th>商品</th><th>价格</th></tr></thead><tbody id="j_tb"><tr><td><input type="checkbox" /></td><td>iPhone8</td><td>8000</td></tr><tr><td><input type="checkbox" /></td><td>iPad Pro</td><td>5000</td></tr><tr><td><input type="checkbox" /></td><td>APPle 13</td><td>8000</td></tr></tbody></table></div><script>var j_cbA11 = document.getElementById('j_cbA11');var j_tbs = document.getElementById('j_tb').getElementsByTagName('input');//下面所有的复选框//注册事件j_cbA11.onclick = function(){//this.checked可以得到当前复选框的选中状态，如果是true就是选中，如果是false就是未选中console.log(this.checked);for(var i = 0; i < j_tbs.length; i++){j_tbs[i].checked = this.checked;}}//下面复选框全部选中上面才能全部选中for(var i = 0; i < j_tbs.length; i++){j_tbs[i].onclick = function(){//控制全选按钮是否选中var flag = true;//每次点击下面的复选框都要循环检查是否全被选中for(var i = 0; i < j_tbs.length; i++){if(!j_tbs[i].checked){flag = false;break;//退出for循环}}j_cbA11.checked = flag;}}</script>
</body>
</html>

JavaScript中BOM和DOM(持续更新)相关推荐

JavaScript中BOM及DOM的学习
JavaScript中BOM及DOM的学习文章目录 JavaScript中BOM及DOM的学习 1 BOM编程 1.1 BOM编程概述 1.1.1 BOM编程的概念 1.1.2 BOM编程的作用 1 ...
JavaScript中开发常用方法-总结-持续更新
数组的常用方法 length length 是一个可读可写的属性,用来表示数组的长度(即数组元素个数).通过访问 length 属性,可以获取数组长度:而通过修改 length 的值,可以增加或减少数 ...
JavaScript中BOM操作
Web前端基础修炼 HTML基本标签详解与运行截图 CSS基本操作详解及截图演示 JavaScript基础(ECMAScript) JavaScript中DOM操作 JavaScript中BOM操作 ...
JavaScript之BOM和DOM入门
JavaScript之BOM和DOM入门 JavaScript的组成包含三大部分,分别为ECMAScript.DOM和BOM.JavaScript组成,如下图所示: ECMAScript是JavaSc ...
JavaScript中HTML的DOM
JavaScript中HTML的DOM 1.1DOM简介 1.2获得元素 document.getElementById() document.getElementByTagName() docume ...
有限元分析中的常识（持续更新）
有限元分析中的常识(持续更新) 介绍一些学过有限元的人都不得不超级熟练掌握的基本常识. 文章目录有限元分析中的常识(持续更新) 通用符号基本不等式 Cauchy-Schwarz 不等式 Hölde ...
Javascript之BOM与DOM讲解
一.Javascript组成 JavaScript的实现包括以下3个部分: ECMAScript(核心) 描述了JS的语法和基本对象. 文档对象模型 (DOM) 处理网页内容的方法和接口浏览器对象模 ...
javascript 学习 —— BOM和DOM编程学习
这是我的第一个博客,用来记录自己的学习历程.之前的学习会在项目下写备注,再次翻看也有些不方便.从今天开始就用博客记录吧. 一.BOM ( browser object model ) 与DOM 1.在 ...
JavaScript中BOM简介及其对象、js执行机制
目录 BOM简介什么是BOM DOM和BOM的区别 BOM的构成 Window对象的常见事件窗口加载事件调整窗口大小事件定时器函数 setTimeout( )定时器停止setTimeout( ...

JavaScript中BOM和DOM(持续更新)