本文详细介绍了JavaScript中的DOM核心概念，包括DOM事件流、元素操作、属性操作、事件处理、节点操作等方面，提供了丰富的实例和代码示例，帮助读者深入理解并掌握JavaScript操作HTML页面的方法。此外，还分享了实际开发中的常见案例，如显示隐藏密码、百度换肤、表格隔行变色、全选与反选、tab栏切换等。
目录
https://www.bilibili.com/video/BV1k4411w7sV?from=search&seid=12490460229912372127&spm_id_from=333.337.0.01.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 鼠标经过触发
最低0.47元/天 解锁文章
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
