概念:文档对象模型。
- 文档:html文件
- 对象:属性和方法
- 模型:(树)
文档树:浏览器在加载html文件时,会把文档、文档中的标签、属性、文本、注释转换成对象,然后按照标签的关系(父子、兄弟、祖孙)以树状结构存储到内存中。
文档树中的对象,也被称为节点对象 。
节点对象的分类:文档(document) 、元素(标签转换的对象) 、文本、属性、注释
操作页面元素
获取,注册事件,操作
语法: document.getElementById(‘id值’);
代码:
<button id="btn">按钮1button> <button id="btn">按钮2button> <script> // 根据id获取单个元素,返回一个元素 var btn = document.getElementById('btn'); // dir可以打印出对象中的属性和方法 console.dir(btn); console.log(btn); // 细节:若页面上有相同的id值的标签时,在获取时,获取的是id值第一次出现的标签。 script>
语法:document.getElementsByTagName(‘标签名’);
代码:
<button>按钮1button> <button>按钮2button> <button>按钮3button> <button>按钮4button> <script> // 需求:获取所有按钮 // 根据标签名获取一组元素,返回的是一个伪数组 var btns = document.getElementsByTagName('button'); console.log(btns); // 数组和伪数组的区别? // 相同:都有索引和长度(length) // 不同点:伪数组不能够调用真正数组中内置的方法(push、pop、sort...) script>
选择器
- 语法:document.querySelector(‘选择器’);
- 语法:document.querySelectorAll(‘选择器’);
代码:
<button class="btn">按钮1button>
<button class="btn">按钮2button>
<button class="btn">按钮3button>
<script>
// 根据选择器获取当个元素,若有多个同样选择器的标签,获取的将会是第一次出现的标签
var btn = document.querySelector('.btn');
console.log(btn);
// 根据选择器获取一组元素
var btns = document.querySelectorAll('.btn');
console.log(btns);
script>
注意:根据选择器获取元素在IE8以下有兼容性问题。
1. 根据id值获取按钮
2. 根据标签名获取一组li
3. 缩小范围获取元素
用户做的动作就是事件
用户和网页之间的交互行为(鼠标点击、鼠标进入、鼠标离开、键盘按下、键盘弹起、手指按压、手指移动等等)
语法:事件源.事件类型 = 事件处理程序;
代码:
// 获取按钮元素 var btn = document.getElementById('btn'); btn.onclick = function(){ // 函数体中的代码,就是事件发生后要执行的程序 alert('燃烧我的卡路里'); }; // 事件处理程序的本质是什么? // ① onclick本质上就是事件源这个对象中的某一个键值对而已。默认值是null,表示没有注册事件 // ② 给事件源注册onclick事件,其实本质上就是给onclick赋值函数,所以onclick是事件源的一个方法而已 // ③ 点击按钮时,浏览器自动调用了btn.onclick();
事件处理程序中的this指向事件源
// 获取按钮元素 var btn3 = document.getElementById('btn'); btn3.onclick = function(){ // 函数体中的代码,就是事件发生后要执行的程序 // 关键字:this,代表事件源 console.log(this); }
方式1:事件处理程序中最后设置return false;
<a id="link" href="https://www.baidu.com">点击a> <script> var link = document.getElementById('link'); link.onclick = function(){ alert('你好'); // 方式1:取消a点击后的默认跳转行为 return false; return false; }; script>
方式2:设置a标签的href属性值为:javascript:
<a href="javascript:">点击2a> <a href="tel:">打电话a> <a href="mailto:">打开邮件a>
1. 点击按钮弹出'你好'
2. 给一组按钮注册事件,点击弹出‘你好’
3. 给a标签注册点击事件,点击弹出'你好',并且点击a标签不跳转
获取:
- 语法:元素.属性名;
设置:
- 语法:元素.属性名= 值;
id、title、href、src、className、innerText / textContent、innerHTML
className操作类名
<div id="box" class="a">div>
<script>
var div = document.getElementById('box');
// 获取类名
console.log(div.class); // undefined
console.log(div.className); // a
// 设置类名
div.className = 'b';
script>
innerText和innerHTML的区别
<div id="box"><h2>我是div中的标题h2>div>
<script>
// 1. 获取div元素
var div = document.getElementById('box');
console.dir(div);
// 【获取】
// ① 通过innerText获取,仅仅包含文本
console.log(div.innerText);
// ② 通过innerHTML获取,若有子标签时,会包含文本和子标签
console.log(div.innerHTML);
// 【设置】
// ① 通过innerText设置,若设置中包含了子标签,该标签不会被渲染而是当做普通文本显示
// div.innerText = '我是div中的超链接';
// ② 通过innerHTML设置,若设置中包含了子标签,该标签会被渲染显示
div.innerHTML= '我是div中的超链接';
script>
innerText和textContent的兼容性问题
<div id="box"><h2>我是div中的标题h2>div> <script> // 1. 获取div元素 var div = document.getElementById('box'); console.log('innerText:' + div.innerText); console.log('textContent:' + div.textContent); // 相同点:获取的都是文本 // 不同点: // ① textContent属性在ie低版本中不支持,innerText基本没有兼容问题 // ② textContent标准属性(官宣),innerText(野路子,但是兼容性好,推荐使用) script>
onclick
onmouseenter 鼠标进入元素事件
onmouseleave 鼠标离开元素事件
onmouseover / onmouseout
代码:
<div>div> <script> var div = document.querySelector('div'); div.onmouseenter = function() { console.log('鼠标进入了div'); }; div.onmouseleave = function() { console.log('鼠标离开了div'); }; script>
元素属性:
HTML属性:获取:元素.属性名;设置:元素.属性名 = 值;
CSS属性:设置:元素.style.属性名 = ‘值’;【元素.className=值】
两种设置样式:
1.、通过style直接设置样式
2、通过修改className达到修改样式操作
语法:元素.style.样式属性名 = ‘样式属性值’;
代码:
<div>111div> <script> var div = document.querySelector('div'); div.style.width = '300px'; div.style.height = '300px'; // background-color → backgroundColor div.style.backgroundColor = 'red'; // div.style.fontSize = '50px'; div.style.font = 'bold 50px "宋体"'; // 若操作少量的样式时,适合用style属性操作 script>
语法:元素.className = ‘类名’
代码:
<style> .a { width: 300px; height: 300px; background-color: red; font:bold 50px '宋体'; } .b { width: 500px; height: 500px; background: purple; } style> <div>111div> <script> var div = document.querySelector('div'); div.className = 'b'; // 若操作多个样式属性时,用className管理比较合适 script> document.body==》body元素
标签内所能操作的属性:
获取
- 语法:元素.getAttribute(name);
- name:属性名
设置
- 语法:元素.setAttribute(name,value);
移除
- 语法:元素.removeAttribute(name,value);
代码:
<img src="small.jpg" title="图片" bigSrc="big.jpg" >
<script>
var img = document.querySelector('img');
console.log(img.src);
console.log(img.bigSrc); // undefined
// 获取
var v = img.getAttribute('bigSrc');
console.log(v);
// 设置
img.setAttribute('bigSrc','100086.jpg');
// 移除
img.removeAttribute('bigSrc');
// 注意:set/get/removeAttribute不仅可以操作自定义标签属性,还可以操作系统支持标签属性。
var v = img.getAttribute('src');
console.log(v);
script>
根据节点的关系来获取元素
节点的关系
根据子节点获取父节点
- 语法:子节点.parentNode
根据父节点获取子节点
- 语法:父节点.childNodes; 获取的子节点包含【文本】和【元素】
- 语法:父元素.children; 获取的子节点仅仅包含【元素】
- 语法:父节点.firstElementChild; 获取【第一个】子元素节点
- 语法:父节点.lastElementChild; 获取【最后一个】元素节点
节点的nodeType、nodeName、nodeValue的属性
#text
获取兄弟节点
1、京东侧边栏
// 1. 获取元素
// 1.1 获取一组li
// 1.2 获取一组类名为item的div
// 1.3 获取类名为slide的div
// 2. 循环遍历给每一个li注册onmouseenter,并且每一个li添加一个index表示索引
// 2.1 循环遍历把所有的li的类名设置为'',把所有的item的display设置为none
// 2.2 让当前的li突出显示(加类名active)
// 2.3 获取到当前的li的编号(加的索引)
// 2.4 通过编号找到对应的item项设置display为block
// 3. 给类名为slide的div鼠标离开事件onmouseleave
// 3.1 循环遍历把所有的li的类名设置为'',把所有的item的display设置为none
通过innerHTML创建元素
<button>创建libutton>
<ul>
<li>我是lili>
ul>
<script>
var btn = document.querySelector('button');
var ul = document.querySelector('ul');
btn.onclick = function() {
// 获取ul中原有的内容
var str = ul.innerHTML;
// 设置ul的内容
ul.innerHTML =str + '我是新来的 ';
};
script>
通过document.createElement创建元素
语法:document.createElement(‘标签名’); 返回一个新的元素对象
代码:
<button>创建libutton> <ul> <li>我是lili> ul> <script> var btn = document.querySelector('button'); var ul = document.querySelector('ul'); btn.onclick = function() { // 创建一个新的li元素 var newLi = document.createElement('li'); // 追加到ul中 ul.appendChild(newLi); // 设置元素的内容 newLi.innerText = '我是新来的'; }; script>
性能测试
- innerHTML在追加多个元素时执行速度慢,性能差。不推荐使用
- createElement方法执行速度快,性能高 ,在实际开发中推荐使用 。
语法:父元素.appendChild(子元素);
代码:
<button>创建libutton> <ul> <li>我是lili> ul> <script> var btn = document.querySelector('button'); var ul = document.querySelector('ul'); btn.onclick = function() { // 创建一个新的li元素 var newLi = document.createElement('li'); // 追加到ul中 ul.appendChild(newLi); // 设置元素的内容 newLi.innerText = '我是新来的'; }; script>
1、创建元素:var n = document.createElement(‘标签名’);
2、追加元素:父元素.appendChild(子元素)
3、删除元素:父元素.removeChild(子元素)
需求:给一个元素连续绑定两次点击事件,并且事件处理程序都有效。
语法:事件源.addEventListener(‘事件类型’,事件处理程序,是否捕获);
事件源 → 操作的元素
事件类型→ 在此不加on, onclick→click
事件处理程序→ 函数
是否捕获,可选参数,默认为false。 true→ 捕获,false→冒泡
代码:
var btn = document.querySelector('button'); // 事件监听注册事件 btn.addEventListener('click',function(){ console.log(1); });
语法:事件源.removeEventListener(‘事件类型’,事件处理程序的名称)
- 事件源,操作的元素
- 事件类型,不加on
- 事件处理程序的名字:函数名
- 注意:若将来要通过事件监听的方式移除事件时,之前注册事件要把事件处理程序单独抽取出来命名 。
代码:
var btn = document.querySelector('button'); // 事件监听注册事件 var fn1 = function() { console.log(1); }; var fn2 = function() { console.log(2); }; btn.addEventListener('click',fn1); btn.addEventListener('click',fn2); // 事件移除事件 btn.removeEventListener('click',fn2) btn.removeEventListener('click',fn1)
注册事件:
事件源.onclick = function () {}
事件源.addEventListener(‘事件类型不加on的’,function () {});
移除事件:
事件源.onclick = null;
事件源.removeEventListener(‘事件类型不加on的’,事件处理名称);
事件流 :事件触发后的三个阶段(捕获阶段、目标阶段、冒泡阶段)。
注意: 在事件触发后,这三个阶段始终是存在的,顺序① 先捕获,② 到达目标,③ 再冒泡。 但是在触发后,针对捕获和冒泡,仅仅启用一个。
事件对象,在事件触发后 ,在事件处理程序中 (函数体),所获取并操作的对象。
事件对象:事件发生时的相关信息对象【event】
- 语法:
事件源.事件类型 = function(e){ // 第一个形参e就是事件对象 }
- 代码:
鼠标事件类型
鼠标事件对象相关属性-获取鼠标的位置
- 事件对象.clientX / 事件对象.clientY 参照是浏览器
- 事件对象.pageX / 事件对象.pageY 参照是文档
- 事件对象.offsetX / 事件对象.offsetY 参照是当前的元素
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-lREcpT8U-1647419767815)(media/04.png)]
事件监听注册事件:事件源.addEventListener(‘事件类型’,事件处理程序,是否捕获);
移除事件:事件源.onclick = null;
事件监听移除事件;事件源.removeEventListener(‘事件类型’,事件程序名称);
事件流:事件触发后的三个阶段:捕获,目标,冒泡
事件对象:事件发生后的相关信息对象
键盘事件
- 事件类型
- onkeydown 键盘按下事件
- onkeyup 键盘弹起事件
- 注意:
- 一般情况给document绑定键盘事件。
键盘事件对象相关属性-键盘按下哪个键
- 事件对象.keyCode 获取键盘按键对应的键码值
- 事件对象.altKey 表示alt键是否按下,返回布尔值。
- 事件对象.shiftKey 表示shift键是否按下,返回布尔值。
- 事件对象.ctrlKey 表示ctrl键是否按下,返回布尔值。(true按下,false没有按下)
属性:
- 事件对象.target 获取最先触发的元素
- 和this的区别
- this在事件处理程序中始终代表的是事件源
- e.target 代表不一定是事件源,代表的是最先触发的元素【目标阶段→ document】
方法:
- 事件对象.preventDefault(); 阻止默认行为
- 事件对象.stopPropagation(); 停止冒泡传播
- 【onmouseover支持冒泡,onmouseenter不支持冒泡】
获取事件对象的兼容问题
标准:事件处理程序中的第一个形参
IE低版本:window.event
兼容处理:
document.onclick = function (e) { var _e = e || window.event; // 在js中,任何数据可以参与任何运算 // 或运算格式: 左侧数据 || 右侧数据 // 或运算结果是:左右其中一个数据 // 运算规则:或运算运算的顺序是自左向右,若左侧是false或者将来能变成false,则输出右侧数据。否则输出左侧数据。 console.log(_e); };
事件委托 (事件代理):把子孙元素的事件注册,完全交给子孙元素的上级元素代理。
注意:委托是下级元素委托上级元素。 没有上级委托下级
实现步骤
① 给子孙元素的上级注册事件
② 在事件处理程序中,通过事件对象.target 获取最先触发的元素
③ 可以通过事件对象.target的nodeName 属性检测最先触发的是否是指定元素
代码
<script> // ① 给子孙元素的上级注册事件 var ul = document.querySelector('ul'); ul.onclick = function(e) { // ② 在事件处理程序中,通过事件对象.target 获取最先触发的元素 var t = e.target; // console.dir(t); // ③ 可以通过事件对象.target的nodeName 属性检测最先触发的是否是指定元素 if(t.nodeName=='LI') { console.log(t.innerText); } }; script>
- 关键:事件对象.target; 可以获取最先触发的元素
- 原理:因为事件冒泡的存在,我们才可以获取到最先触发的元素。【目标→ document】
DOM:操作页面元素
BOM:操作浏览器的
BOM的概念:浏览器对象模型。
window对象介绍
- window对象被 称为顶级对象 或全局对象 。
- 因为全局变量和全局函数本质上都是window对象的属性或方法。
- window对象可以省略。
window中的对话框
- alert
- prompt
- confirm
定时器1: window.setTimeout(callback, time);
作用:延迟执行一段程序,仅仅执行一次 (定时炸弹),返回一个数字,表示是哪个定时器。
参数:
- callback, 函数定义,函数体中存放定义器要执行的代码。
- time, 等待的时间,数字,表示的是毫秒
清除定时器:window.clearTimeout(定时器的标识);
代码:
// 开启一个定时器 var num1 = setTimeout(function(){ // 定时器延迟时间到达后,要执行的代码 console.log('爆炸了,Duang~~~1') ; },5000); // 开启一个定时器 var num2 = setTimeout(function(){ // 定时器延迟时间到达后,要执行的代码 console.log('爆炸了,Duang~~~2') ; },5000); console.log(num1,num2);
// 获取按钮 var btn = document.querySelector('button'); btn.onclick = function() { // 清除定时器 clearTimeout(num1); clearTimeout(num2); };
定时器2:window.setInterval(callback, time);
作用:延迟执行一段程序,重复执行 (闹钟)。返回一个数字,表示是哪个定时器。
参数:
- callback, 函数定义,函数体中存放定义器要执行的代码。
- time, 等待的时间,数字,表示的是毫秒
清除定时器:window.clearInterval(定时器的标识);
代码:
// 开启一个定时器 var num = setInterval(function(){ var date = new Date(); console.log(date); },1000);
// 获取按钮 var btn = document.querySelector('button'); btn.onclick = function () { clearInterval(num); };
元素.offsetWidth / 元素.offsetHeight;
返回的是数字。 大小包含: 内容 + padding + border;
注意:该属性仅仅只能够读取 ,不能够设置
代码:
<style> div { width: 300px; height: 300px; position: absolute; left:100px; top:100px; background: pink; border: 10px solid blue; padding: 10px; } style> <div>div> <script> var div = document.querySelector('div'); // 获取元素的大小 console.log(div.offsetWidth); console.log(div.offsetHeight); // 坑!设置(不能设置,是只读的) div.offsetWidth = 1000 + 'px'; div.offsetHeight = 1000 + 'px'; script>
[offsetLeft,offsetTop]
[offsetWidth,offsetHieght]
元素.offsetLeft / 元素.offsetTop;
返回的是数字。(参照谁?看定位关系)
代码:
<div class="g"> <div class="f"> <div class="s">div> div> div> <script> var s = document.querySelector('.s'); // 获取横向位置 console.log(s.offsetLeft); // 获取纵向位置 console.log(s.offsetTop); // parentNode console.log(s.parentNode); // offsetParent console.log(s.offsetParent); script>
元素.offsetParent 和 元素.parentNode的区别
- 元素.offsetParent ,获取“父元素”, 按照定位关系。
- 元素.parentNode, 获取“父元素”, 按照标签关系。
client系列:
[clientWidth,clientHeight]
[clientLeft,clientTop]
元素.clientWidth / 元素.clientHeight
获取元素的大小,包含 【内容 + padding】
代码:
<div>div> <script> var div = document.querySelector('div'); // 获取元素的大小 console.log(div.clientWidth); console.log(div.clientHeight); // 获取边框的厚度 console.log(div.clientLeft); console.log(div.clientTop); // 坑!设置(不能设置,是只读的) div.clientWidth = 1000 + 'px'; div.clientHeight = 1000 + 'px'; script>
元素.clientLeft / 元素.clientTop
获取边框 厚度
元素.scrollWidth / 元素.scrollHeight
获取的元素的大小 ,包含 【内容+ padding + 溢出】
代码:
var div = document.querySelector('div'); console.log('scroll系列:' +div.scrollWidth);
元素.scrollLeft / 元素.scrollTop
获取的是在该元素中卷去的页面的间距。【该属性不仅可以获取,还可以设置】
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-EEF2sYlh-1647419767818)(media/06-03.png)]
移动设备上无法使用鼠标,当手指触碰屏幕时会触发 click、mousedown、mouseup 事件。
但是,touch事件要比鼠标事件执行效率高,用户体验好。
注意:以下事件必须通过事件监听注册
事件添加:
元素.onclick = function () {}
元素.addEventlistener(‘click’,function (){});
常见的属性
- 事件对象.touches :位于屏幕上的所有手指的列表;
- 事件对象.targetTouches :位于该元素上的所有手指的列表;
- 事件对象.changedTouches:被改变的手指列表。 touchstart时包含刚与触摸屏接触的触点,touchend时包含离开触摸屏的触点
手指的位置
- 手指对象.clientX/Y 手指相对于可视区域
- 手指对象.pageX/Y 手指相对于文档
注意:手指对象.clientX/Y 使用较多
谁有过渡效果,这个事件添加给谁【事件监听】
css中过渡结束后检测的行为
使用 swiper 快速实现轮播图效果
Web 插件:就是别人封装好的一个 js 代码 或 css代码,可以直接拿来用。
Swiper 就是一个轮播图的插件,由其他团队写好的,开源免费,全世界开发者都可以使用。
Swiper插件官网: https://www.swiper.com.cn/
百度按照步骤执行既可
1、下载并且引入CSS文件和JS文件
2、复制内容
3、设置大小(可以不设置)
4、复制功能代码
localSortage对象:把数据以字符串的方式保存本地
获取: localStorage.getItem()
设置: localStorage.setItem()