DOM：标签操作模块。这个模块里面的方法专门用来操作HTML的标签的。比如说获取HTML标签的文本、或者给HTML标签加上样式
<body>
<!--1、比如这里定义了一个div，然后你想获取div里面文本，该如何操作-->
<div id="txt">你好</div>
<script>
// 定义一个自执行函数
(function (){
// 首先得找到我们想要的div标签，div有id，我们可以通过id来获取。也可以通过其它方式来获取我们想要的标签，比如class、name都可以，这里不展示了
var tag_txt = document.getElementById('txt');
// 拿到div标签对象后，可以通过.innerText来获取标签文本
var txt = tag_txt.innerText;
// 打印获取到的值
console.log(txt);
})()
</script>
</body>
BOM：浏览器操作模块。里面方法专门用来操作浏览器的，比如说让浏览器显示一个“确认框”的效果
<body>
<script>
// 定义一个确认框， 然后用res来保存确认结果
var res = confirm("是否删除？");
console.log(res)
</script>
</body>
jQuery：这个相当于DOM和BOM的升级版， 使用jQuery可以用更简洁的代码完成DOM和BOM的功能， 建议后续使用jQuery来做前端开发
1、比如说要实现一个菜单的展开和隐藏的功能，首先用DOM看怎么实现？
<body>
<!--首先定义一个菜单模块-->
<div class="group">
<!--然后定义一个（父级菜单）-->
<div class="father_menu">父级菜单</div>
<!--然后定义模块，这个模块下定义两个（子菜单）-->
<div class="son_menu">
<a>子菜单1</a>
<a>子菜单2</a>
</div>
</div>
</body>
效果：
2、然后在给这些菜单加上一点样式
<!DOCTYPE html>
<html>
<head>
<title>初识：JavaScript</title>
<meta charset="UTF-8">
<style>
.group{
/*宽度*/
width: 300px;
/*边框的边距和颜色*/
border: 1px solid #ddd;
}
.group .father_menu{
/*背景颜色*/
background-color: gold;
/*内边距*/
padding: 8px 5px;
}
.group .son_menu a{
/*将（子菜单）变成块级标签，让它各占一行*/
display: block;
}
</style>
</head>
<body>
<!--首先定义一个菜单模块-->
<div class="group">
<!--然后定义一个（父级菜单）-->
<div class="father_menu">父级菜单</div>
<!--然后定义模块，这个模块下定义两个（子菜单）-->
<div class="son_menu">
<a>子菜单1</a>
<a>子菜单2</a>
</div>
</div>
</body>
</html>
效果：
3. 然后给a标签加上可点击的属性
效果：
4、 然后我希望点击（父级菜单）就隐藏（子菜单），再次点击（父级菜单）就展示（子菜单）
首先得给（父级菜单）这个标签绑定事件：onclick="clickMe()"
然后定义一个函数，意思是一点击（父级菜单）就执行这个函数
当点击（父级菜单）的时候， 就寻找（父级菜单）下面的（子菜单）， 那得先拿到（父级菜单）的路径才行，怎么获取呢？可以在onclick="clickMe()" 里面加上一个this
如何隐藏菜单呢？
接下就可以写函数了，逻辑步骤为：1.找到（父级菜单）标签；2.根据（父级菜单）找到（子菜单）；3.给（子菜单）加上样式hied
<!DOCTYPE html>
<html>
<head>
<title>初识：JavaScript</title>
<meta charset="UTF-8">
<style>
.group{
/*宽度*/
width: 300px;
/*边框的边距和颜色*/
border: 1px solid #ddd;
}
.group .father_menu{
/*背景颜色*/
background-color: gold;
/*内边距*/
padding: 8px 5px;
}
.group .son_menu a{
/*将（子菜单）变成块级标签，让它各占一行*/
display: block;
}
.hied{
/*给（子菜单）加上这个样式， 标签就隐藏，去掉就显示*/
display: none;
}
</style>
</head>
<body>
<!--首先定义一个菜单模块-->
<div class="group">
<!--然后定义一个（父级菜单）-->
<div class="father_menu" onclick="clickMe(this);">父级菜单</div>
<!--然后定义模块，这个模块下定义两个（子菜单）-->
<div class="son_menu">
<a href="https://www.baidu.com">子菜单1</a>
<a href="https://www.baidu.com">子菜单2</a>
</div>
</div>
<script>
function clickMe(ths){
//获取到（父级菜单）
var tag = ths.nextElementSibling;
console.log(tag.className)
// tag.className获取（父级菜单）的类名，因为点击（父级菜单）时， 类名会发生变化,可以通过F12查看
if (tag.className == "son_menu"){
// classList意思操作样式，add添加
tag.classList.add("hied")
} else {
// classList意思操作样式，remove删除
tag.classList.remove("hied")
}
}
</script>
</body>
</html>
效果：
标签：jQuery,菜单,group,父级,python,标签,DOM,tag From： https://www.cnblogs.com/FBGG/p/17912638.html