1.DOM重点核心

2.DOM事件流

3.DOM知识点总结

4.常见案例

视频资料，pink老师讲的超级详细，JavaScript的DOM操作：黑马程序员JavaScript核心教程，前端基础教程，JS必会的DOM BOM操作_哔哩哔哩_bilibili黑马程序员JavaScript核心教程，前端基础教程，JS必会的DOM BOM操作共计167条视频，包括：01-Web APIs简介导读、02-js基础和Web APIs两个阶段的关联性、03-API 和 Web API、04-DOM导读、05-DOM简介、06-getElementById获取元素、07-getElementsByTagName获取某类标签元素、08-H5新增获取元素方式、09-获取body和html元素、10-事件三要素、11-执行事件过程、12-操作元素-修改元素内容、13-innerText和innerHTML的区别、14-操作元素-修改元素属性、15-分时问候案例、16-操作元素-修改表单属性、17-仿京东显示隐藏密码明文案例（上）、18-仿京东显示隐藏密码明文案例（下）、19-操作元素-修改样式属性、20-仿淘宝关闭二维码案例、21-循环精灵图、22-显示隐藏文本框内容、23-使用className修改样式属性、24-密码框验证信息、25-操作元素总结以及作业、01-排他思想（算法）、02-百度换肤效果、03-表格隔行变色效果、04-表单全选取消全选（上）、05-表单全选取消全选（下）、06-获取自定义属性值、07-设置移除自定义属性、08-tab栏切换布局分析（重要）、09-tab栏切换制作（上）、10-tab栏切换制作（下）、11-H5自定义属性、12-为什么学习节点操作以及节点简介、13-节点操作之父节点、14-节点操作之子节点、15-节点操作之第一个子元素和最后一个子元素、16-新浪下拉菜单、17-节点操作之兄弟节点、18-节点操作之创建和添加节点、19-简单版发布留言案例、01-节点操作-删除节点、02-删除留言案例、03-节点操作-复制节点、04-动态生成表格-创建学生数据、05-动态生成表格-创建行、06-动态生成表格-创建单元格、07-动态生成表格-单元格填充数据、08-动态生成表格-创建删除单元格、09-动态生成表格-添加删除操作、10-document.write创建元素（了解）、11-innerHTML和createElement效率对比、12-DOM重点核心、13-事件高级导读、14-注册事件两种方式、15-attachEvent注册事件、16-删除事件、17-DOM事件流理论、18-DOM事件流代码验证、19-什么是事件对象、20-e.target和this区别、21-阻止默认行为、22-阻止事件冒泡、23-事件委托、24-禁止选中文字和禁止右键菜单、25-获得鼠标在页面中的坐标、26-跟随鼠标的天使、01-常用的键盘事件、02-keyCode判断用户按下哪个键、03-模拟京东按键输入内容案例、04-模拟京东快递单号查询（上）、05-模拟京东快递单号查询（下）、06-BOM导读、07-BOM概述、09-页面加载事件、10-调整窗口大小事件、11-定时器之setTimeout、12-回调函数以及5秒之后自动关闭的广告、13-清除定时器clearTimeout、14-定时器之setInterval、15-倒计时效果、16-清除定时器clearInterval、17-发送短信案例、18-this指向问题、19-js 同步和异步、20-同步任务和异步任务执行过程、21-js执行机制、22-location对象常见属性、23-5秒钟之后跳转页面、24-获取URL参数、25-location常见方法、26-navigator对象、27-history对象、01-PC端网页特效异读、02-offsetLeft和offsetTop获取元素偏移、03-offsetWidth和offsetHeight获取元素大小、04-offset与style区别、05-获取鼠标在盒子内的坐标、06-拖动模态框（上）、07-拖动模态框（中）、08-拖动模态框（下）、09-仿京东放大镜效果页面结构搭建、10-仿京东放大镜效果显示隐藏遮挡层和大盒子、11-仿京东放大镜效果遮挡层跟随鼠标、12-仿京东放大镜效果限制遮挡层移动范围、13-仿京东放大镜效果大图片移动、14-client系列、15-立即执行函数、16-淘宝flexibleJS源码分析之核心原理、17-淘宝flexibleJS源码分析之pageshow事件、18-scroll系列、19-仿淘宝固定侧边栏（上）、20-仿淘宝固定侧边栏（下）、21-三大系列总结、22-mouseover和mouseenter区别、23-动画原理、24-简单动画函数封装、25-动画函数-给不同元素记录不同定时器、01-缓动动画原理、02-缓动动画基本代码实现、03-缓动动画多个目标值之间移动、04-缓动动画添加回调函数、05-动画函数的使用、06-网页轮播图-结构搭建、07-网页轮播图-鼠标经过显示隐藏左右按钮、08-网页轮播图-动态生成小圆圈、09-网页轮播图-小圆圈排他思想、10-网页轮播图-点击小圆圈滚动图片、11-网页轮播图-右侧按钮无缝滚动、12-网页轮播图-克隆第一张图片、13-网页轮播图小圆圈跟随右侧按钮一起变化、14-网页轮播图-两个小bug解决方案、15-网页轮播图-左侧按钮功能制作、16-网页轮播图-自动播放功能、17-节流阀以及逻辑中断应用、18-带有动画的返回顶部、19-筋斗云案例、20-移动端网页特效导读、21-移动端touch触摸事件、22-移动端TouchEvent触摸事件对象、23-移动端拖动元素、01-移动端轮播图-结构搭建、02-移动端轮播图-布局分析、03-移动端轮播图-滚动图片、04-移动端轮播图-无缝滚动、05-classList类名操作、06-移动端轮播图-小圆点跟随变化、07-移动端轮播图-手指拖动轮播图、08-移动端轮播图-手指滑动播放上一张下一张图片、09-移动端轮播图-回弹效果、10-返回顶部模块制作、11-移动端click事件300ms延时问题解决方案、12-fastclick插件使用、13-swiper插件使用-引入相关文件、14-移动端轮播图-按照语法规范使用、15-swiper插件使用-参数更改、16-移动端其他插件以及使用总结、17-视频插件zy.media.js的使用、18-bootstrap轮播图、19-阿里百秀轮播图制作、20-本地存储导读、21-本地存储之sessionStorage、22-本地存储之localStorage、23-记住用户名案例等，UP主更多精彩视频，请关注UP账号。https://www.bilibili.com/video/BV1k4411w7sV?from=search&seid=12490460229912372127&spm_id_from=333.337.0.0

1.DOM重点核心

1.1概念：文档对象模型（Document Object Model,简称DOM），是W3C组织推荐的处理可扩展标记语言（HTML或者XML）的标准编程接口。W3C已经定义了一系列的DOM接口，通过这些DOM接口可以改变网页的内容、结构和样式。

1.2对于JavaScript，为了能够是JavaScript操作HTML，JavaScript就有了一套自己的dom编程接口。

1.3对于HTML，dom使得html形成一颗dom树，包含文档、元素、节点(获取的节点全部都是对象)。

1.4关于dom操作，我们主要针对于元素的操作。主要有创建、增、删、改、查、属性操作、事件操作。

1.5创建：1）document.write() ；2)element.innerHTML() ；3)createElement().

1.6增加： 1)element.appendChild() ；2)element.insertBefore(property,index).

1.7删除：element.removeChild();

1.8修改： 1）修改元素属性：src,href,title等； 2）修改普通元素内容：innerHTML,innerText ；3)修改表单元素：value,type,disable等；4)修改元素样式:style,className。

1.9查找： 1)DOM提供的API方法:getElementById、getElemnetsByTagName 古老用法不太推荐；2）H5提供的新方法：querySelector/querySelectorAll 提倡；3)利用节点操作获取元素：父（parentNode)、子（children)、兄(previousElemnetSibling、nextElementSibling)提倡。

1.10属性操作：主要针对于自定义属性。 1）setAttribute:设置dom的属性值；2)getAttribute:得到dom的属性值；3）removeAttribute移除属性。

1.11实践操作：给元素注册事件，采取事件源.事件类型 = 事件处理程序

例如：onclickon，mouseover，onmouseout，onfocus，onblur，onmousemove，

onmouseup，onmousedown等等。

2.DOM事件流

2.1概念：事件发生时会在元素节点之间按照特定的顺序传播，这个传播过程即DOM事件流。

例如：浏览器加载HTML文件时，会采取从上到下的顺序阅读，当script写在button按钮下方时，会先获取到按钮，然后获取script，这时，点击按钮就会弹出“您好吗？”

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>DOM事件流</title>
</head>
<body>
<button>点击弹出弹窗</button>
<script>var btn = document.querySelector('button');btn.addEventListener('click',function () {alert('您好吗？')})
</script>
</body>
</html>

反之，如果script写在了button的上面，页面加载时会先执行script后执行button，在执行script时，由于页面中还没有button按钮，所以没有获取到button，点击事件自然也不成立，当我们点击按钮时自然也不会弹出“您好吗？”。

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title>
</head>
<body>
<script>var btn = document.querySelector('button');btn.addEventListener('click',function () {alert('您好吗？')})
</script>
<button>点击弹出弹窗</button>
</body>
</html>

3.DOM知识点总结

3.1元素的获取

（1）根据ID获取：document.getElementById() 。这个方法是根据元素的id值来获取元素，返回的是一个对象。

例如：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>获取元素getElementById()</title>
</head>
<body>
<button id="btn">点击弹出弹窗</button>
<script>var btn = document.getElementById('btn');btn.addEventListener('click',function () {alert('您好吗？')})
</script>
</body>
</html>

（2）根据标签名获取：document.getElementByTagName(),这个方法返回带有指定标签名的对象的集合，注意是一个集合，以伪数组的形式储存的。

例如：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>获取元素getElementByTagName()</title>
</head>
<body>
<ul><li>1</li><li>2</li><li>3</li>
</ul>
<script>var lis = document.getElementsByTagName('li');console.log(lis);
</script>
</body>
</html>

（3）通过H5新增的方法获取：

document.getElementByClassName('类名') 这个方法是根据类名返回元素对象合集。

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>获取元素getElementByClassName()</title>
</head>
<body>
<ul><li class="example">1</li><li class="example">2</li><li class="example">3</li>
</ul>
<script>var lis = document.getElementsByClassName('example');console.log(lis);
</script>
</body>
</html>

document.querySelector('选择器')，其中的选择器可以是类名，可以是id，也可以是标签名，这个方法返回的是单个对象，如果是多个对象，那么querySelector()就返回第一个对象；还有document .querySelectorAll('选择器')这个方法跟querySelector()一样根据选择器返回对象，不同的是querySelectorAll()返回的是所有相同选择器的对象，所以它返回的是一个对象集合。

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>获取元素querySelector()和querySelectorAll()</title>
</head>
<body>
<ul><li class="example">1</li><li class="example">2</li><li class="example">3</li>
</ul>
<div class="first"></div>
<div id="second"></div>
<script>//querySelecor()根据类名和id来获取var div1 = document.querySelector('.first');//类名var div2 = document.querySelector('#second');//id//querySelectorAll()根据标签获取对象集合var lis = document.querySelectorAll('li');console.log(div1);console.log(div2);console.log(lis);
</script>
</body>
</html>

(4)获取body元素 document.body和获取html元素document.documentElement.

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>获取body元素和html元素</title>
</head>
<body>
<script>console.log(document.body);console.log(document.documentElement);
</script>
</body>
</html>

3.2 事件基础

一个完整的时间包括三要素：事件源，事件类型，事件处理程序。

例如：

3.3 常见的鼠标事件

onclick 鼠标点击左键触发 onfocus 获得鼠标焦点触发

onmouseover 鼠标经过触发 onblur 失去鼠标焦点触发

onmouseout 鼠标离开触发 onmousemover 鼠标移动触发

onmouseup 鼠标弹起触发 onmousedown 鼠标按下触发

3.4 改变元素内容 innerText 和 innerHTML

innerText,赋值时不识别html标签，获取时自动去除了空格和换行；

innerHTML,赋值时识别html标签，获取时保留了空格和换行。

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title>
</head>
<body>
<div></div>
<div></div>
<script>var example = document.querySelectorAll('div');example[0].innerText = '<strong>这是innerText</strong>';example[1].innerHTML = '<strong>这是innerHTML</strong>';
</script>
</body>
</html>

3.5 修改元素属性

可以修改一些元素的属性，比如图片的src、title等。

例如： img.src = '' 更换图片路径 img.title = '' 更换图片字等等。

3.6 表单元素的操作

（1）表单里面的值、文字内容是通过value来修改的。

element.value = '';

(2) 如果想要某个表单被禁用，不能再点击，设置它的disabled为true。

element.disabled = true;

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>button的禁用</title>
</head>
<body>
<button value="可以点击">可以点击</button>
<button value="禁止点击">禁止点击</button>
<script>var btn = document.querySelectorAll('button');btn[0].disabled = false;btn[1].disabled = true;
</script>
</body>
</html>

(3) 密码框明文

input.type = 'text' 设置输入框的type为text，则输入框里面的内容可见；

input.type = 'password' 设置输入框的type为password，则输入框里面的内容

不可见。

3.7 修改样式属性

格式为element.style.属性 = '';(修改的样式为行内样式)

例如：

element.style.backgroundColor = '' 修改/设置元素的背景颜色

element.style.display = 'none' 修改/设置元素隐藏（block显示）

3.8 通过className更改元素样式

如果元素修改的样式过多，我们可以将修改后的样式写在一个类名中，然后设置element.className = ' 修改后的类名' 来修改元素的样式。如果元素本来就有类名，则设置类名时也要写上；例如：原来的元素类名为A，它需要修改的样式很多，我们把修改后的样式写在一个类名B中，这是设置element.className = 'A B'即可，A和B中间用空格隔开。

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title><style type="text/css">.A {width: 100px;height: 100px;background-color: pink;}.B {width: 200px;height: 200px;background-color: #00cc33;}</style>
</head>
<body>
<div class="A"></div>
<script>var example = document.querySelector('div');example.onclick = function () {example.className = 'B'}
</script>
</body>
</html>

3.9 排他思想（重要）

在开发中，我们会经常用到排他思想来解题。比如，有5个按钮，当你点击哪个按钮时。哪个按钮的背景颜色就变为粉色；点击其他按钮时，其他按钮变为粉色，而第一次点击的按钮又变回普通颜色，5个按钮点击事件是互斥的，排他的。

解题思路：1）每个按钮都有点击事件，给每个按钮设置点击事件我们用循环来做。

2）按钮点击之后，先将每个按钮的背景颜色都设置为空，使每个按钮的背景颜色都为初始状态。3) 设置点击按钮的背景颜色为粉色。

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>排他思想</title>
</head>
<body><button>按钮1</button><button>按钮2</button><button>按钮3</button><button>按钮4</button><button>按钮5</button><script>var btns = document.querySelectorAll('button');for(var i = 0;i<btns.length;i++){btns[i].onclick = function () {for(var j = 0;j<btns.length;j++){btns[j].style.backgroundColor='';}this.style.backgroundColor='pink'}}</script>
</body>
</html>

3.10 属性操作

属性分为两种：1种是内置属性，1种是自定义属性。

element.属性 = '' 这是内置属性，元素本身自带的属性，例如：elemennt.style

element.setAttribute('属性名','属性值') 这个可以是程序员自己添加的属性，这个方法是用哪个来设置元素的属性。

element.getAttribute('属性名') 这个方法是得到属性值。

element.removeAttribute(''属性名) 这个方法是用来移出属性。

3.11 H5自定义属性

1）一般为‘data + 自定义名' 例如：data-index。

2）获取/设置 element.dataset.属性例如上面的data-index,在获取或者改变时可以这样写：element.dataset.index = ''，用dataset来获取，就不用写index前面的data了，但是dataset只能用来获取以'data-'开头的自定式属性；如果自定义属性本身就有-，例如：data-list-name，这时获取就必须采取驼峰命名法，element.dataset.listName = ''。

3）用element.getAttribute('属性名')来获取。

3.12 节点操作

1)为什么要学节点操作

获取元素的时候更简单一点，例如获取父节点、子节点、兄弟节点时会非常方便。

2）节点操作之父节点

element.parentNode 可获取元素最近的一个父元素，找不到返回空。

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>元素操作之父节点</title>
</head>
<body>
<div class="demo"><div class="box"><div class="erweima">x</div></div>
</div>
<script>var erweima = document.querySelector('.erweima');//得到的是离元素最近的父级节点，找不到返回空console.log(erweima.parentNode);
</script>
</body>
</html>

3）元素操作之子节点

得到元素的子节点有两个方法：一个是element.childNodes,这个将返回所有的子元素，包括元素节点和文本节点（换行）；一个是element.children,这个方法返回所有的子元素，不包括文本节点（换行），这个相对于childNode更加常用。

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>节点操作之子节点</title>
</head>
<body>
<ul><li></li><li></li><li></li><li></li>
</ul>
<script>var ul = document.querySelector('ul');//包含所有的子节点，包含元素节点、文本节点（换行）console.log(ul.childNodes);console.log(ul.children);
</script>
</body>
</html>

4）节点操作之第一个子节点和最后一个子节点

element.firstChild 这个是得到第一个子元素，element.lastChild 这个是得到最后一个子节点，这两个方法包含文本节点和元素节点，换行也会得到；element.firstElementChild 这个是返回第一个子元素，element.lastElementChild 这个是返回最后一个子元素，这两个方法直接返回元素，不包含文本节点，不包含空格。还可以通过element.children[索引号]来获取任意位置的子元素。

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>节点操作之第一个子节点和最后一个子节点</title>
</head>
<body>
<ol><li>1</li><li>2</li><li>3</li><li>4</li>
</ol>
<script>var ol = document.querySelector('ol');//获取第一个节点，不管是文本节点还是元素节点console.log(ol.firstChild);//获取最后一个节点，不管是文本节点还是元素节点console.log(ol.lastChild);//返回第一个元素节点,IE9以上才支持console.log(ol.firstElementChild);//返回最后一个元素节点,IE9以上才支持console.log(ol.lastElementChild);//实际开发中，既没有兼容性问题，又返回第一个元素console.log(ol.children[0]);
</script>
</body>
</html>

5）节点操作之兄弟节点

element.nextSibling 下一个兄弟节点，element.previousSibling 前一个兄弟节点，这两个方法包括元素节点和文本节点，换行也算；element.nextElementSibling 下一个兄弟元素节点，element.previousElementSibling 前一个兄弟元素节点，这两个方法直接返回兄弟元素，不包含文本节点，不包含换行。

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>节点操作之兄弟节点</title>
</head>
<body>
<div></div>
<span></span>
<script>var div = document.querySelector('div');var span = document.querySelector('span');//1.nextsibling下一个兄弟节点 包含元素节点或者 文本节点等等console.log(div.nextSibling);console.log(div.previousSibling);//2.nextElementSibling 得到下一个兄弟元素节点 IE9以上console.log(div.nextElementSibling);console.log(span.previousElementSibling);
</script>
</body>
</html>

6）节点操作之创建和添加节点

document.createElement('') 创建节点；添加节点有两种方法：一种是element.appendChild() ,这个是添加到子元素的尾部，一种是element.insertBefore(添加的节点，添加节点的位置),这个可以添加在元素的子元素中任意位置。

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>节点操作之创建和添加节点</title>
</head>
<body>
<ul><li>这是第一个</li>
</ul>
<script>//1.创建节点元素节点var li = document.createElement('li');var ul = document.querySelector('ul');//2.添加节点 node.appendChild(child) node父级，child子级 追加到尾部li.innerText = '这是第二个';ul.appendChild(li);//3.添加节点 node.insertBefore(child,指定元素)ul.insertBefore(li,ul.children[0]);//4.我们想要页面添加一个新的元素：1.创建元素2.添加元素
</script>
</body>
</html>

7）节点操作之删除节点

element.remove() 删除元素节点。

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>节点操作之删除节点</title>
</head>
<body>
<button>删除</button>
<ul><li>熊大</li><li>熊二</li><li>光头强</li>
</ul>
<script>var ul = document.querySelector('ul');var btn = document.querySelector('button');btn.onclick = function () {if(ul.children.length === 0){this.disabled = true}else {ul.removeChild(ul.children[0]);}}
</script>
</body>
</html>

8）节点操作之克隆节点

element.cloneNode()为浅克隆，只克隆标签不克隆内容，如果括号内为true，即element.cloneNode(true),则为深克隆，既克隆标签，也克隆内容。

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>节点操作之克隆节点</title>
</head>
<body>
<ul><li>1</li><li>2</li><li>3</li>
</ul>
<script>//1.node.cloneNode();括号为空或者里面是false 浅拷贝 只复制标签不复制内容//2.node.cloneNode(true); 括号为true 深拷贝 复制标签复制标签里面的内容var ul = document.querySelector('ul');var lili1 = ul.children[0].cloneNode();var lili = ul.children[0].cloneNode(true);ul.appendChild(lili); //添加深拷贝ul.appendChild(lili1);//添加浅拷贝
</script>
</body>
</html>

3.13 三种创建元素方式的区别

1）.document.write是直接将内容写入页面的内容流，但是文档流执行完毕，则会导致页面全部重绘；

2）.innerHTML是将内容写入某个DOM节点，不会导致页面全部重绘；

3）.innerHTML创建多个元素效率更高（不要拼接字符串，采取数组形式拼接），结构稍微复杂；

4）.createElement()创建多个元素效率稍微低一点点，但是结构更清晰

总结：不同浏览器下，innerHTML效率要比createElement高。

3.14 事件操作

1）注册事件（绑定事件）

注册事件有两种方法：一种是传统方法 element.onclick = function(){}，这个方法具有唯一性，后一次的onclick会覆盖前一次的事件；一种是方法监听注册方式 element.addEventListener('事件类型',function(){}),这个方法是W3C标准，推荐使用，它不具有唯一性。

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>注册事件（绑定事件）</title>
</head>
<body><!-- 1.给元素添加事件，称为注册事件或者绑定事件。2.注册事件有两种方式：传统方式和方法监听注册方式3.传统注册方式：特点：注册事件的唯一性4.方法监听注册方式w3c标准 推荐方法addEventListener()它是一个方法IE9之前的IE不支持此方法，可用attachEvent()代替-->
<button>传统注册事件</button>
<button>方法监听注册事件</button>
<script>var btns = document.querySelectorAll('button');//1.传统方式注册事件,唯一性btns[0].onclick = function () {alert('1111')};btns[0].onclick = function () {alert('2222')};//2.事件监听注册事件，同一个事件可以添加多个侦听器btns[1].addEventListener('click',function () {alert('事件监听注册事件1')});btns[1].addEventListener('click',function () {alert('事件监听注册事件2')})
</script>
</body>
</html>

点击“传统注册事件”

点击“方法监听注册事件”

2）删除事件（解绑事件）

解绑事件有两种方法：一种是传统方法 element.onclick = null，一种方法是element.removeElementListener('事件类型'，事件函数).

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>删除事件（解绑事件）</title><style type="text/css">div {width: 100px;height: 100px;background-color: pink;border: 1px solid black;text-align: center;line-height: 100px;}</style>
</head>
<body>
<div>1</div>
<div>2</div>
<div>3</div>
<script>var divs = document.querySelectorAll('div');divs[0].onclick = function () {alert(11);//1.传统解绑事件divs[0].onclick = null;};divs[1].addEventListener('click',fn);function fn(){alert(22);divs[1].removeEventListener('click',fn);}
</script>
</body>
</html>

3)事件对象

                1）.event就是一个时间对象 写到我们侦听函数的小括号里面 当形参来看 2）.时间对象只有有了事件才会存在，它是系统给我们自动创建的，不需要我们传递参数                 3）.事件对象是我们事件的一系列数据的集合 跟事件相关的 比如鼠标点击里面就包含了 鼠标的相关信息，鼠标坐标啊，如果是键盘事件里面就包含的键盘事件的信息，比如判断用户按下了哪个键                 4）.这个事件对象我们可以自己命名 比如event，evt，e 5）.事件对象也有兼容性问题IE6,7,8通过window.event

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>事件对象</title><style type="text/css">div {width: 100px;height: 100px;background-color: #ff85d3;text-align: center;line-height: 100px;}</style>
</head>
<body>
<div>123</div>
<script>//事件对象var div = document.querySelector('div');div.onclick = function (event) {console.log(event);}
</script>
</body>
</html>

4）target和this的区别

e.target 返回的是触发事件的对象（元素） this返回的是绑定事件的对象（元素)；

区别：e.target点击了哪个元素，就返回哪个元素； this 哪个元素绑定了这个点击事件，那么就返回谁。

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title><style type="text/css">div {width: 100px;height: 100px;background-color: #ff85d3;text-align: center;line-height: 100px;}</style>
</head>
<body>
<div>123</div>
<ul><li>1</li><li>2</li><li>3</li>
</ul>
<script>//1.e.target 返回的是触发事件的对象（元素） this返回的是绑定事件的对象（元素）//区别：e.target点击了哪个元素，就返回哪个元素 this哪个元素绑定了这个点击事件，那么久返回谁var div = document.querySelector('div');div.addEventListener('click',function (e) {console.log(e.target);console.log(this);});var ul = document.querySelector('ul');ul.addEventListener('click',function (e) {console.log(this);console.log(e.target);})
</script>
</body>
</html>

当点击ul的第二个li时，this返回ul，而e.target返回第二个li.

5) 阻止默认行为

e.preventDefault() 这个方法用来阻止事件的默认行为，例如a标签点击就会跳转，如果设置a标签的点击事件对象 e.preventDefault()，那么点击a时就不会跳转了。

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>阻止默认行为</title><style type="text/css">div {width: 100px;height: 100px;background-color: #ff85d3;text-align: center;line-height: 100px;}</style>
</head>
<body>
<div>123</div>
<a href="www.baidu.com">跳转到百度</a>
<script>//1.返回事件类型var div = document.querySelector('div');div.addEventListener('click',fn);div.addEventListener('mouseover',fn);div.addEventListener('mouseout',fn);function fn(e) {console.log(e.type)}//2.阻止默认行为（事件） 让链接不跳转 或者让提交按钮不提交var a =document.querySelector('a');a.addEventListener('click',function (e) {e.preventDefault();//dom标准写法});//3.传统的注册方式a.onclick = function (e) {//普通浏览器 e.preventDefault();e.preventDefault();}
</script>
</body>
</html>

6）阻止事件冒泡

例如，当父元素和子元素都有点击事件时，点击子元素时，会先执行子元素的点击函数，再执行父元素的点击事件，会从低级向上一级执行，这个就叫冒泡，如果ducoment还有事件，就会继续向上冒泡，执行document的事件。那么有时我们并不想实现冒泡，那么e.stopPropagation()这个方法就会阻止事件的冒泡行为。

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title><style type="text/css">.father {position: relative;width: 200px;height: 200px;background-color: pink;margin: 0 auto;}.son {position: absolute;top:50px;left:50px;width: 100px;height: 100px;background-color: green;text-align: center;line-height: 100px;vertical-align: center;}</style>
</head>
<body>
<div class="father"><div class="son">son</div>
</div>
<script>var father = document.querySelector('.father');var son = document.querySelector('.son');son.addEventListener('click',function (e) {alert('son');e.stopPropagation();e.cancelBubble = true;//ie9以下});father.addEventListener('click',function () {alert('father');})
</script>
</body>
</html>

设置子元素e.stopPropagation()，当点击son时，father就不会弹出弹窗了。

7) 事件委托（代理、委派）

事件的冒泡虽然有点麻烦，但是有时会非常好用，就是事件委托。例如，当ul中有非常多的li时，我们想给每个li添加事件，就得给每个li都写，但是如果用到了事件委托，就可以只给父盒子设置事件，然后用e.target来获取点击的li，非常好用。

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>事件委托</title>
</head>
<body>
<ul><li>第1行</li><li>第2行</li><li>第3行</li><li>第4行</li><li>第5行</li>
</ul>
<script>//事件委托的原理：不是给每个子节点单独设置事件监听器，而是事件监听器设置在其父节点上，然后利用//冒泡原理影响设置每个子节点//事件委托的核心原理，给父节点添加侦听器，利用事件冒泡影响每一个子节点var ul = document.querySelector('ul');ul.addEventListener('click',function (e) {// alert('知否知否，点我应有弹窗在手！');e.target.style.backgroundColor = 'pink';})
</script>
</body>
</html>

当点击第二个li时

3.15 禁止选中文字和禁止使用鼠标右键

如果我们想要一段文字禁止被选中，我们可以用事件类型selectstart，然后组织默认行为e.stopPropagation()来实现；如果我们想要禁用鼠标右键,我们可以用事件类型contextmenu，然后阻止默认行为e.stopPaopagation()来实现，但是这种选中文字Ctrl + C还是可以复制。不管是禁止选中还是禁止右键，我们都可以用来禁止复制，但是作为学习前端的，应该知道F12键开发者工具模式选中Elements标签就可以得到html元素，来复制我们的文字。

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>禁止选中文字和禁止使用鼠标右键</title>
</head>
<body>
我是一段不愿意分享的文字
<script>//1.contextmenu我们可以禁用右键菜单，但是 选中ctrl+c还是可以复制document.addEventListener('contextmenu',function (e) {e.preventDefault();});//2.禁止选中文字document.addEventListener('selectstart',function (e) {e.preventDefault();})
</script>
</body>
</html>

3.16 获得鼠标在页面中的坐标

获得我们鼠标的坐标，有三种不同的方法；

1）通过client来获取，这个是相对于浏览器窗口可视区的鼠标坐标

e.clientX 相对于可视区的横坐标 ; e.clientY 相对于可视区的纵坐标。

2) 通过page来获取，这个是相对于文档页面的鼠标坐标

e.pageX 相对于文档页面的横坐标；e.pageY 相对于文档页面的纵坐标。

3) 通过screen来获取，这个是相对于我们电脑屏幕的鼠标坐标

e.screenX 相对于电脑屏幕的横坐标；e.screenY 相对于电脑屏幕的纵坐标。

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>获得鼠标在页面中的坐标</title><style type="text/css">body {height: 3000px;}</style>
</head>
<body>
<script>//鼠标事件对象 MouseEventdocument.addEventListener('click',function (e) {//1.client 相对于浏览器窗口可视区的坐标console.log(e.clientX);console.log(e.clientY);console.log('-------------');//2.page    相对于文档页面的坐标 IE9以上console.log(e.pageX);console.log(e.pageY);console.log('-------------');//3.screen 鼠标在电脑屏幕的x和y坐标console.log(e.screenX);console.log(e.screenY);});
</script>
</body>
</html>

3.17 常用的键盘事件

1）keyup 按键弹起时触发

2）keydown按键按下的时候触发，能识别功能键

3）keypress按键按下的时候触发，不能识别功能键如Ctrl、shift 、左右箭头等等。

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>常用的键盘事件</title>
</head>
<body>
<script>// 常用的键盘事件// 1.keyup 按键弹起的时候触发document.onkeyup = function () {console.log('按键弹起了');};//2.keydown按下的时候触发,能识别功能键document.addEventListener('keydown',function () {console.log('按键按下了');});//3.keypress按下的时候触发，不能识别功能键比如ctrl shift 左右箭头啊document.addEventListener('keypress',function () {console.log('按键按下了');});//4.三个事件的执行顺序是：keydown-keypress-keyup
</script>
</body>
</html>

4）键盘事件对象之keycode属性

键盘事件对象有很多属性，这里总结keycode属性。

键盘事件对象中的keyCode属性可以得到相应键的ASCII码值

1.我们的keyup 和keydown事件不区分字母大小写比如a和A得到的都是65

2.我们的keypress 事件区分字母大小写 a和A得到的不同

4.常见案例

4.1 显示隐藏密码明文案例

在很多页面中会有密码框，密码框的最右边会有一个眼睛，眼睛打开表示明文，可以看见密码，点击眼睛，眼睛关闭表示暗文，看不见密码。这个其实就是通过点击眼睛触发的事件，点击眼睛，眼睛的图标会发生变化，然后密码框的type值会发生变化，text可见而password不可见。

这里我导入的是阿里巴巴的字体图标。

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title><style type="text/css">.box{position: relative;margin: 0 auto;border: 2px solid red;width: 200px;height: 50px;}input {width: 150px;height: 95%;border: 0;outline: none;font-size: 20px;}.icon {position: absolute;right: 10px;top: 10px;font-family: 'iconfont';font-size: 30px;}</style><link rel="stylesheet" href="../font/iconfont.css">
</head>
<body>
<div class="box"><input type="password"><i class="icon"></i>
</div>
<script>var icon = document.querySelector('i');var inp = document.querySelector('input');icon.onclick = function () {if(inp.type === 'password'){icon.innerHTML = '';inp.type = "text"}else {icon.innerHTML = '';inp.type = "password"}}
</script>
</body>
</html>

眼睛关闭，则看不见；眼睛打开则可以看见。

4.2 百度换肤案例

有一个小图片列表，点击某张图片时，网页的背景就会变成这张图片。

我们只需要把几张图片排在一行，设置他们的width和height都为10%或者其他数值，让他们都显示为小图片，然后给每张图片设置点击事件，一点击，就让其他图片的边框为空，设置点击的图片边框，然后让document.body.style.backgroundImage = 'url(' + this.src + ')'即可。

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title><style type="text/css">img {width: 10%;height: 10%;}</style>
</head>
<body>
<img src="../img/背景1.jpg">
<img src="../img/背景2.jpg">
<script>var imgs = document.querySelectorAll('img');for(var i=0;i<imgs.length;i++){imgs[i].onclick = function () {for(var j=0;j<imgs.length;j++){imgs[j].style.border = 0;}this.style.border = '2px solid red';document.body.style.backgroundImage ='url('+this.src+')'}}
</script>
</body>
</html>

点击之前

点击第一张

点击第二张

4.3 表格隔行变色

在一个表格中，鼠标经过哪一行，哪一行的背景颜色就发生变化。

我们可以得到每一行的对象，当鼠标经过时，设置这一行的背景颜色为一个颜色，然后当鼠标离开时，又设置这一行的背景颜色为空即可。

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>表格隔行变色</title><style type="text/css">table {border: 1px solid black;}</style>
</head>
<body>
<table border="1"><thead>学生信息表格</thead><tbody><tr><td>序号：</td><td>姓名：</td><td>年龄：</td><td>性别：</td></tr><tr><td>1</td><td>光头强</td><td>22</td><td>男</td></tr><tr><td>2</td><td>熊大</td><td>22</td><td>女</td></tr><tr><td>3</td><td>熊二</td><td>21</td><td>男</td></tr></tbody>
</table>
<script>var trs = document.querySelectorAll('tr');for(var i=0;i<trs.length;i++){trs[i].onmouseover = function () {this.style.backgroundColor = 'pink';};trs[i].onmouseout = function () {this.style.backgroundColor = '';}}
</script>
</body>
</html>

4.4 全选和反选

有的表格表头会有复选框，然后每一行的数据前面也会有复选框，勾上全选，所有数据会被勾中，不勾中一行数据，那么全选就不会被勾上。

首先给全选复选框设置点击事件，让每一行的复选框checked属性跟全选复选框的一致即可；

然后给每一行的复选框添加点击事件,声明一个变量flag=true，当某一行的复选框点击时，循环遍历每一行的复选框，如果有一个没选中，就让flag=false然后将flag赋值给全选复选框。

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title><style type="text/css">table {border: 1px solid black;}</style>
</head>
<body>
<table border="1"><thead>学生信息表格</thead><tbody><tr><td><input type="checkbox" class="cbAll"></td><td>姓名：</td><td>年龄：</td><td>性别：</td></tr><tr><td><input type="checkbox" class="cb"></td><td>光头强</td><td>22</td><td>男</td></tr><tr><td><input type="checkbox" class="cb"></td><td>熊大</td><td>22</td><td>女</td></tr><tr><td><input type="checkbox" class="cb"></td><td>熊二</td><td>21</td><td>男</td></tr></tbody>
</table>
<script>var trs = document.querySelectorAll('tr');var cbs = document.getElementsByClassName('cb');var cbAll = document.querySelector('input');for(var i=0;i<trs.length;i++){trs[i].onmouseover = function () {this.style.backgroundColor = 'pink';};trs[i].onmouseout = function () {this.style.backgroundColor = '';}}cbAll.onclick = function () {for(var k=0;k<cbs.length;k++){cbs[k].checked = this.checked;}};for(var l=0;l<cbs.length;l++){cbs[l].onclick = function () {flag = true;for(var m=0;m<cbs.length;m++){if(!cbs[m].checked){flag = false;}}cbAll.checked = flag;}}
</script>
</body>
</html>

4.5 tab栏切换（重点）

在实际中有许多的tab栏，点击不同的选项，会有不同的内容显示出来。

有几个选项就有几个div，点击一个选项，就会显示相应的div，所以要保持选项与div的索引号相同，就要给每个选项设置自定义属性，然后赋值给div。

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title><style type="text/css">* {padding: 0;margin: 0;}.tab {width: 1200px;height: 50px;margin: 10px auto;background-color: #F4EFF5;}.tab-con {float: left;width: 1200px;margin: 0 auto;}li {float: left;list-style: none;text-align: center;line-height: 50px;padding: 0 20px;cursor: pointer;}.current {background-color: #C41524;color: white;}.item {display: none;}</style>
</head>
<body>
<div class="tab"><ul><li>商品介绍</li><li>规格与包装</li><li>售后保障</li><li>商品评价</li><li>手机社区</li></ul><div class="tab-con"><div class="item">这是商品介绍模块</div><div class="item">这是规格与包装模块</div><div class="item">这是售后保障模块</div><div class="item">这是商品评价模块</div><div class="item">这是手机社区模块</div></div>
</div>
<script>var lis = document.getElementsByTagName('li');var items = document.querySelectorAll('.item');for(var i=0;i<lis.length;i++){lis[i].setAttribute('data-index',i);lis[i].onclick = function () {for(var i=0;i<lis.length;i++){lis[i].className = '';}this.className = 'current';var index = this.getAttribute('data-index');for(var j=0;j<items.length;j++){items[j].style.display = 'none';}items[index].style.display = 'block';}}
</script>
</body>
</html>

点击’商品模块‘

点击'规格与包装'

4.6 下拉菜单

在实际中，有很多下拉菜单，当鼠标移上去的时候就会显示下拉的菜单。

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>下拉菜单</title><link rel="stylesheet" href="../font/iconfont.css"><style type="text/css">* {margin: 0;padding: 0;}.box {width: 500px;height: 500px;margin: 0 auto;}li {list-style: none;}.tab-list {float: left;}.tab-list a {display: inline-block;width: 100px;height: 30px;text-decoration: none;color: #000;background-color: #ccc;text-align: center;line-height: 30px;border-right: 1px solid #fff;}.tab-con {display: none;}.tab-con li a{width: 100px;height: 30px;text-decoration: none;color: #000;background-color: #ccc;text-align: center;line-height: 30px;border-right: 1px solid #fff;}.tab-con li a:hover{color: #fff;background-color: orange;}</style>
</head>
<body>
<ul class="box"><li class="tab-list"><a href="#">微博<i class="iconfont"></i></a><ul class="tab-con"><li><a href="#">私信</a></li><li><a href="#">评论</a></li><li><a href="#">@我</a></li></ul></li><li class="tab-list"><a href="#">微博<i class="iconfont"></i></a><ul class="tab-con"><li><a href="#">私信</a></li><li><a href="#">评论</a></li><li><a href="#">@我</a></li></ul></li><li class="tab-list"><a href="#">微博<i class="iconfont"></i></a><ul class="tab-con"><li><a href="#">私信</a></li><li><a href="#">评论</a></li><li><a href="#">@我</a></li></ul></li><li class="tab-list"><a href="#">微博<i class="iconfont"></i></a><ul class="tab-con"><li><a href="#">私信</a></li><li><a href="#">评论</a></li><li><a href="#">@我</a></li></ul></li>
</ul>
<script>var box = document.querySelector('.box');var lis = box.children;console.log(lis);for (var i=0;i<lis.length;i++){lis[i].onmouseover = function () {this.children[1].style.display = 'block';};lis[i].onmouseout = function () {this.children[1].style.display = 'none';}}
</script>
</body>
</html>

4.7 简单版发布留言案例

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title><style>ul {border: 1px solid #ccc;width: 200px;height: 200px;}ul li a {float: right;}</style>
</head>
<body>
<textarea name="" id="" cols="30" rows="10"></textarea>
<button>发布</button>
<ul></ul>
<script>var text = document.querySelector('textarea');var btn = document.querySelector('button');var ul = document.querySelector('ul');btn.onclick = function () {if(text.value === ''){alert('您没有输入内容');return false}else {var li = document.createElement('li');li.innerHTML = text.value +"<a href='javascript:;'>删除</a>";ul.insertBefore(li,ul.children[0]);var as = document.querySelectorAll('a');console.log(as);for(var i =0;i<as.length;i++){as[i].onclick = function () {ul.removeChild(this.parentNode);}}}};</script>
</body>
</html>

4.8 动态生成表格

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>动态生成表格</title><style type="text/css">thead th {width: 100px;height: 50px;background-color: #ccc;text-align: center;line-height: 50px;}td {width: 100px;height: 50px;background-color: #ccc;text-align: center;line-height: 50px;}table {border-spacing: 0;}</style>
</head>
<body>
<table border="1"><thead><tr><th>姓名</th><th>科目</th><th>分数</th><th>操作</th></tr></thead><tbody></tbody>
</table>
<script>//1.先去准备好学生的数据var datas = [{name:'熊大',subject:'JavaScript',score:98},{name:'熊二',subject:'JavaScript',score:98},{name:'光头强',subject:'JavaScript',score:98},{name:'吉吉国王',subject:'JavaScript',score:98}];//2.往tbody里面创建行：有几个人（通过数组的长度）我们就创建几行var tbody = document.querySelector('tbody');for(var i =0;i<datas.length;i++){//1.创建tr行var tr = document.createElement('tr');tbody.appendChild(tr);//2.行里面创建单元格 td 单元格的数量取决于每个对象里面的属性个数 for循环遍历对象for(var k in datas[i]){//里面的for循环管列tdvar td = document.createElement('td');//把对象里面的属性值给tdtd.innerHTML = datas[i][k];tr.appendChild(td);}//3.创建有删除两个字的单元格var td = document.createElement('td');td.innerHTML = '<a href="javascript:;">删除</a>';tr.appendChild(td);}//4.实现删除效果var as = document.querySelectorAll('a');for(var j=0;j<as.length;j++){as[j].onclick = function () {tbody.removeChild(this.parentNode.parentNode)}}
</script>
</body>
</html>

4.9 跟随鼠标移动的天使

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title><style type="text/css">img {position: absolute;}</style>
</head>
<body>
<img src="../img/小天使.jpg" alt="">
<script>var pic = document.querySelector('img');document.addEventListener('mousemove',function (e) {//1.mousemove只要我们鼠标移动1px就会触发这个事件var x = e.pageX;var y = e.pageY;pic.style.top = y-30+'px';pic.style.left = x -40 + 'px';})
</script>
</body>
</html>

4.10 仿京东快递单号查询

5<html lang="en">
<head><meta charset="UTF-8"><title>Title</title><style type="text/css">.con {display: none;position: absolute;top: -40px;width: 171px;border: 1px solid rgba(0,0,0,.2);box-shadow: 0 2px 4px rgba(0,0,0,.2);padding: 2px 0;font-size: 18px;line-height: 20px;color: #333;}.con::before {content: '';width: 0;height: 0;position: absolute;top: 24px;left: 18px;border: 8px solid #000;border-style: solid dashed dashed;border-color: #fff transparent transparent;}.search {position: relative;width: 178px;margin: 100px;}</style>
</head>
<body>
<div class="search"><div class="con"></div><input type="text" placeholder="请输入您的快递单号">
</div>
</body>
<script>
var con = document.querySelector('.con');
var inp = document.querySelector('input');
inp.addEventListener('keyup',function () {if(inp.value === ''){con.style.display = 'none';}else {con.style.display = 'block';con.innerHTML = inp.value;}});
inp.addEventListener('blur',function () {con.style.display = 'none';
});
inp.addEventListener('focus',function () {if(inp.value !== ''){con.style.display = 'block';}
})
</script>
</html>

感谢观看~

JavaScript的DOM知识点总结相关推荐

Javascript + Dom知识点总结
Javascript + Dom知识点总结 1．用Javascript声明数组和字典的方式 // 数组声明 var arr = new Array(); arr["0"] = &q ...
JavaScript/Ajax/JQuery知识点(BOM/DOM/ScriptEngine/JS引擎)，JSCore
捋顺JavaScript底层知识,重点讲解如原型.作用域.执行上下文.变量对象.this.闭包.按值传递.call.apply.bind.new.继承等难点概念?? JS中的继承?JS的原型模式, ...
深入理解JavaScript系列（23）：JavaScript与DOM（上）——也适用于新手
文档对象模型Document Object Model DOM(Document Object Model,文档对象模型)是一个通过和JavaScript进行内容交互的API. Javascript和 ...
JavaScript HTML DOM EventListener
JavaScript HTML DOM EventListener 是一个非常重要的概念,在前端开发中被广泛使用.它是用来监听 HTML DOM 上的事件,并执行特定的代码块. EventListen ...
达内java晨讲案例_郑州达内的一天之晨讲主题：javascript的DOM
在郑州达内的每一天都是充实的,在郑州达内的每一天都是开心的,在郑州达内每一天都是知足的,因为我们在达内提升的不仅仅是技能,更多的是收获了众多的小伙伴.下面就来看看郑州达内的晨讲吧,学习知识提升口才两不 ...
普歌：DOM知识点大盘点（一）
DOM知识点大盘点(一) DOM 事件基础 DOM 事件基础 1.概述: JavaScript是目前web开发中不可缺少的脚本语言,js不需要编译即可运行,运行在客户端,需要通过浏览器来解析执行Jav ...
前端入门之——javascript day8 DOM对象(DHTML)
DOM对象(DHTML) 7.1 什么是 DOM? DOM 是 W3C(万维网联盟)的标准.DOM 定义了访问 HTML 和 XML 文档的标准: "W3C 文档对象模型(DOM)是中立于平 ...
JavaScript学习笔记(2)——JavaScript和DOM的关系
文档对象模型(Document Object Model,简称DOM),是W3C组织推荐的处理可扩展标志语言的标准编程接口.DOM实际上是以面向对象方式描述的文档模型.DOM定义了表示和修改文档所需的 ...
Javascript中DOM技术的的简单学习
第十四课 DOM技术概述 1:DOM概述文档对象模型DOM(Document Object Model)定义访问和处理HTML文档的标准方法.DOM 将HTML文档呈现为带有元素.属性和文本的树结构 ...

JavaScript的DOM知识点总结

1.DOM重点核心

2.DOM事件流

3.DOM知识点总结

4.常见案例

JavaScript的DOM知识点总结相关推荐

最新文章

热门文章