DOM操作事件语法全解析（GIF动图，代码结合一看就会）

最新推荐文章于 2023-06-26 16:44:23 发布
最新推荐文章于 2023-06-26 16:44:23 发布
阅读量820 收藏 1
点赞数 5
分类专栏： JavaScript基础 文章标签： javascript 前端 jquery
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_45799465/article/details/122781779
版权

目录

一、事件绑定三要素

1.1  标签对象

1.2  事件类型

1.3  事件处理函数

1.4  事件绑定语法形式

1.4.1  语法形式一

1.4.2  语法形式二

1.4.3  on语法 和 事件监听语法的区别

1.5  事件绑定语法兼容

1.5.1  标准浏览器

1.5.2  低版本IE浏览器

二、事件的删除 

2.1  on语法绑定事件的删除

2.2  事件监听语法的删除

三、默认事件的阻止

3.1  定义

3.2  阻止默认事件

3.3  兼容性

3.3.1  标准浏览器

3.3.2  低版本IE浏览器

四、阻止事件的传播/阻止冒泡事件 

4.1  定义

4.2  阻止事件传播语法

4.3  兼容性 

4.3.1  标准浏览器

4.3.2  低版本IE浏览器

五、 常见的事件类型

5.1  window相关的事件类型

5.2  鼠标相关的事件类型

5.3  键盘的相关事件类型

5.3.1  事件类型

5.3.2  兼容性

5.3.3  注意事项

5.4  表单的相关事件类型

5.5  移动端事件

5.6  特殊事件

六、事件点击中的坐标

6.1  相对于 触发事件的标签对象 左上角的坐标

6.2  相对于 视窗窗口 左上角的坐标

6.3  相对于 HTML页面 左上角的坐标

七、事件对象 event

7.1  定义

7.2  语法

八、事件委托

8.1  定义

8.2  语法

8.3  优点

一、事件绑定三要素

1.1  标签对象

事件源 也就是绑定事件的标签对象

1.2  事件类型

也就是绑定给标签对象的事件的类型，例如“click”等

1.3  事件处理函数

也就是触发事件时执行的函数，是回调函数语法形式，可以是函数名称可以是匿名函数。例如“function(){}”。

1.4  事件绑定语法形式

1.4.1  语法形式一

事件监听标签 对象.addEventListener( 'click' , function(){})

1.4.2  语法形式二

on语法绑定 标签对象.onclick = function(){}

1.4.3  on语法 和 事件监听语法的区别

on语法 是 通过 = 等于赋值 绑定的事件处理函数

            =   等于赋值 本质上执行的是 覆盖赋值

            后赋值的数据会覆盖之前存储的数据

            也就是 on语法 一个 标签对象 相同的事件类型 

            只能 赋值绑定 一个 事件处理函数

            如果 赋值绑定 多个事件处理函数 

            后赋值 的事件处理函数 会 覆盖之间存储的事件处理函数 

            最终 执行 最后赋值个事件处理函数 

代码演示：

<body>
    <div>点击</div>
    <script>
        const oDiv = document.querySelector("div");
        // 第一种语法形式
        oDiv.addEventListener("click",function(){
            console.log("大聪明码农徐");
        })
        // 第二种语法形式
        oDiv.onclick = function(){console.log("大聪明码农徐");}
        // =   等于赋值 本质上执行的是 覆盖赋值
        // 执行 最后赋值个事件处理函数 
        oDiv.onclick = function(){console.log(666666);}
    </script>
</body>

运行结果： 

1.5  事件绑定语法兼容

1.5.1  标准浏览器

标签对象.addEventListener( 'click' , function(){})   

1.5.2  低版本IE浏览器

标签对象.attachEvent('onclick' , function(){});

二、事件的删除 

2.1  on语法绑定事件的删除

    标签对象.on事件类型 = null ;

    标签对象.on事件类型 = function(){} ;

    触发事件时 就没有调用执行的函数程序

    达到删除事件的效果

2.2  事件监听语法的删除

    需要调用专门的删除函数方法

    标签对象.removeEventListener( '事件类型' , 事件处理函数 );

    标签对象.detachEvent( 'on'事件类型 , 事件处理函数);

注意： 使用专门的函数方法 删除绑定的事件处理函数, 只能删除 绑定的函数名称 不能删除 绑定的匿名函数

代码演示：

<body>
    <div>点击</div>
    <script>
        const oDiv = document.querySelector("div");
        // 使用专门的函数方法 删除绑定的事件处理函数
        //  只能删除 绑定的函数名称 不能删除 绑定的匿名函数

        // 定义函数
       function fun(){
        console.log("大聪明码农徐");
       }
        //回调函数调用函数
        oDiv.addEventListener("click",fun);
         // 只能删除 绑定的函数名称
        oDiv.removeEventListener("click",fun);

        // 不能删除 绑定的匿名函数
        // 所以后台输出123456789仍会执行
        oDiv.addEventListener("click",function(){
            console.log(123456789);
        })
        oDiv.removeEventListener("click",function(){
            console.log(123456789);
        })

        oDiv.onclick = function(){console.log("大聪明码农徐");}
// on语法绑定事件的删除
        oDiv.onclick = null;


    </script>
</body>

运行结果：

 

三、默认事件的阻止

3.1  定义

a标签的点击跳转，form标签的点击提交，鼠标右键菜单都属于默认事件

3.2  阻止默认事件

在事件处理函数中定义一个形参 形参名称一般是 e / event

    标签对象.addEventListener('事件类型' , function( e / event ){

        // 阻止默认事件执行

        形参.preventDefault() ;

    })

代码演示：

<body>
    <script>
        // 获取标签对象
        const oBody = document.querySelector("body");
        // contextmenu 鼠标右键点击事件  
        oBody.addEventListener("contextmenu",function(e){
            // 后台输出确保事件触发了
            console.log("鼠标右键已经按下");
            // 正常网页右键点击会有菜单
            // 默认事件阻止后不会有菜单产生
            e.preventDefault() ;
        })
    </script>
</body>

运行结果： 

 

3.3  兼容性

3.3.1  标准浏览器

        e.preventDefault() ;

3.3.2  低版本IE浏览器

        e.returnValue = false;

四、阻止事件的传播/阻止冒泡事件 

4.1  定义

父级标签 和 后代标签 添加了相同类型的事件，后代标签 触发事件 父级标签 也会触发 相同类型的事件，这样的执行原理 称为 事件的传播 / 冒泡事件。

4.2  阻止事件传播语法

标签对象.addEventListener(事件类型, function(e / event){

        e.stopPropagation();

    })

代码演示：

<body>
    <div>
        <h1></h1>
    </div>
    <script>
        // 获取标签对象
        const oDiv = document.querySelector("div");
        const oH = oDiv.querySelector("h1");
        // 给div添加点击事件
        oDiv.addEventListener("click",function(){
            console.log("你点击了一下div标签");
            
        })
        // 给h1添加点击事件
        oH.addEventListener("click",function(e){
            console.log("你点击了一下h1标签");
         // 事件传播阻止
            e.stopPropagation();
        })
    </script>
</body>

 运行结果：

阻止前：点击h1 标签 ，div的点击事件也会触发.

阻止后：点击h1只会执行h1的事件。

4.3  兼容性 

4.3.1  标准浏览器

        e.stopPropagation();

4.3.2  低版本IE浏览器

        e.cancelBubble = true ;

五、 常见的事件类型

5.1  window相关的事件类型

window.addEventListener( 'resize' , function(){} )  浏览器视窗窗口大小监听事件
window.addEventListener( 'scroll' , function(){} )  页面滚动监听事件
window.addEventListener( 'load' , function(){} )    浏览器加载事件
window.open(url地址)  新窗口打开URL链接
window.open（URL地址）关闭当前窗口

document.addEventListener('visibilitychange'）

document.visibilityState     查询值为hidden/visible

窗口最小化监听事件

前五个属性在我之前的博客都有详细解释，需要请查看往期博客，这里主要演示最后一种窗口最小化监听事件。

代码演示：

<body>
    <script>
        document.addEventListener("visibilitychange",function(){
            
            console.log(document.visibilityState);
        })
    </script>
</body>

运行结果： 

 

5.2  鼠标相关的事件类型

click          鼠标左键单击

dblclick

鼠标左键双击
contextmenu  鼠标右键单击
mousedown  鼠标按键按下
mouseup  鼠标按键抬起
mouseover  鼠标移入
mouseout    鼠标移出
mouseenter  鼠标移入
mouseleave  鼠标移出

 代码演示：

<body>
    <div></div>
    <script>
        const oDiv = document.querySelector("div");
        oDiv.addEventListener("click",function(){
            console.log("鼠标左键单击");
        })
        oDiv.addEventListener("dblclick",function(){
            console.log("鼠标左键双击");
        })
        oDiv.addEventListener("contextmenu",function(){
            console.log("鼠标右键单击");
        })
        oDiv.addEventListener("mousedown",function(){
            console.log("鼠标按键按下");
        })
        oDiv.addEventListener("mouseup",function(){
            console.log("鼠标按键抬起");
        })
    </script>
</body>

运行结果：

注意： 

mouseover   鼠标移入  mouseout    鼠标移出。经过标签对象边界时触发一次，给当前事件的后代标签也会触发事件。

mouseenter  鼠标移入  mouseleave  鼠标移出。经过标签对象边界时触发一次，给当前标签添加事件后代标签不会触发事件。

代码演示：

<body>
    <div>
        <h1></h1>
    </div>
    <script>
        const oDiv = document.querySelector("div");
        oDiv.addEventListener("mouseover",function(){
            console.log("鼠标移入");
        })
        oDiv.addEventListener("mouseout",function(){
            console.log("鼠标移出");
        })
        oDiv.addEventListener("mouseenter",function(){
            console.log("鼠标移入(后代不会触发)");
        })
        oDiv.addEventListener("mouseleave",function(){
            console.log("鼠标移出(后代不会触发)");
        })

    </script>
</body>

运行结果：

5.3  键盘的相关事件类型

5.3.1  事件类型

keydown    键盘按键按下
keypress    键盘按键按下
keyup      键盘按键抬起
e.keyCode    键盘按键编号
e.altKey
e.ctrlKey
e.shiftKey                                                                                
都是 判断 有没有 按下按键
如果 按下 返回值是 true 
如果 没有按下 返回值是 false

注意：

keydown 和 keypress 的区别，所有的按键都会触发 keydown 事件 有些特殊按键不会触发 keypress 事件。例如 esc ctrl alt shift back等 都不会触发 keypress 事件 

5.3.2  兼容性

低版本的火狐浏览器 使用 
e.which 存储 按键编号 
现在所有的浏览器都是用 
e.keyCode 和 e.which 同时存储 按键编号

5.3.3  注意事项

1,  键盘事件 默认只有可以获取焦点的标签支持
    一般 只是 input标签 和 textarea
    以及 document document.documentElement document.body

2,  div等无法获取焦点的标签 可以通过 事件的抛发 绑定 键盘事件

3,  键盘按下事件 如果一直按住键盘按钮 会 一直触发事件

代码演示：

<body>
    <input type="text">
    <script>
        const oIpt = document.querySelector("input");
        oIpt.addEventListener("keydown",function(){
            console.log("键盘按下了(keydown)");
        })
        oIpt.addEventListener("keypress",function(){
            console.log("键盘按下了(keypress) esc ctrl alt shift back 等 都不会触发 keypress 事件 ");
            
        })
        oIpt.addEventListener("keyup",function(){
            console.log("键盘抬起了");
        })
    </script>
</body>

运行结果：

5.4  表单的相关事件类型

submit表单提交事件        绑定给form标签 点击提交按钮 触发提交事件时触发 提交事件
focus标签获取焦点      标签获取焦点时 触发事件
blur        标签失去焦点        标签失去焦点时 触发事件
change      标签失去焦点同时数据改变       标签失去焦点 并且数据改变时 触发事件
input      输入数据      每次输出数据时都会触发事件

代码演示：

<body>
    <form>
        <input type="text">
        <button>提交</button>
    </form>
    
    <script>
        const oForm = document.querySelector("form");
        const oIpt = document.querySelector("input");
        oIpt.addEventListener("focus",function(){
            //  标签获取焦点时 触发事件
            console.log("获取焦点");
        })
        oIpt.addEventListener("blur",function(){
            // 标签失去焦点时 触发事件
            console.log("失去焦点");
        })
        oIpt.addEventListener("change",function(){
            // 标签失去焦点同时数据改变
            console.log("标签失去焦点 并且数据改变时 触发事件");
        })
        oIpt.addEventListener("input",function(){
            // 每次输出数据时都会触发事件
            console.log("您输入数据了");
        })
    </script>
</body>

运行结果： 

5.5  移动端事件

touchstart  触摸开始
touchend    触摸结束
touchmove  触摸移动

由于博主功力尚浅，暂不能详细解释此类事件，见谅！ 

5.6  特殊事件

transitionstart    过渡开始
transitionend      过渡结束
animationstart      动画开始
animationend        动画结束

由于博主功力尚浅，暂不能详细解释此类事件，见谅！ 

六、事件点击中的坐标

6.1  相对于 触发事件的标签对象 左上角的坐标

e.offsetX

e.offsetY

 代码演示：

    <script>
        const oDiv = document.querySelector("div");
        oDiv.addEventListener("click",function(e){
            // 相对于 触发事件的标签对象 左上角的坐标
            console.log(e.offsetX);
            console.log(e.offsetY);
        })
    </script>

运行结果：

 

6.2  相对于 视窗窗口 左上角的坐标

e.clientX

e.clientY

代码演示： 

<body>
    <div></div>
    <script>
        const oDiv = document.querySelector("div");
        oDiv.addEventListener("click",function(e){
             // 相对于 视窗窗口
            console.log(e.clientX);
            console.log(e.clientY);
        })
    </script>
</body>

 运行结果：

 

 

6.3  相对于 HTML页面 左上角的坐标

e.pageX

e.pageY

代码展示： 

<body>
    <div></div>
    <script>
        const oDiv = document.querySelector("div");
        oDiv.addEventListener("click",function(e){
            // 相对于 HTML页面 左上角的坐标
            console.log(e.pageX);
            console.log(e.pageY);
        })
    </script>
</body>

 运行结果：

 

七、事件对象 event

7.1  定义

事件处理函数 中 参数 存储的数据数值是 触发事件的对象 相关数据信息

    触发事件的对象 和 绑定事件的的 不一定是同一个对象

    触发事件时 JavaScript程序 自动向 形参中 存储实参 也就是 向 事件对象 中 自动储存 触发事件的标

7.2  语法

事件源.addEventListener( 事件类型 , function( 事件对象 ){

事件对象.target 

})


八、事件委托

8.1  定义

不是直接给标签对象绑定事件，给 父级标签 绑定事件 ，通过 事件对象.target 判断 触发事件的不同的标签对象，执行 不同的函数程序。

8.2  语法

对象对象.target 就是一个 DOM标签对象

对象对象.target.tagName 是 大写英文字符的标签名称

对象对象.target 执行 DOM 操作 判断 点击的是什么标签

8.3  优点

（1）只给一个标签事件添加对象，通过判断执行不同的程序，执行效率更高

（2）更加有利于 动态渲染生成的标签 添加事件

因此 动态渲染生成的标签 使用 事件委托 ，给一直存在的父级 添加 事件 ，通过 事件委托 判断 事件对象.target 是 什么标签 触发什么程序。

<!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>
        footer{
            width: 1000px;
            height: 800px;
            background-color: blue;
            margin: auto;
        }
        div{
            width: 800px;
            height: 600px;
            margin: auto;
            background-color: blueviolet;
        }
        h1{
            width: 600px;
            height: 400px;
            margin: auto;
            background-color: red;
        }
        p{
            width: 400px;
            height: 200px;
            margin: auto;
            background-color: pink;
        }
    </style>
</head>
<body>
<footer>
    <div>
        <h1>
            <p></p>
        </h1>
    </div>
</footer>
<script>
    const oFooter = document.querySelector("footer");

    oFooter.addEventListener("click",function(e){
        // 通过事件委托判断点击的标签对象，执行对应的程序
        if(e.target.tagName === "FOOTER"){
            console.log("您点击的是footer");
        }else if(e.target.tagName === "DIV"){
            console.log("您点击的是div");
        }else if(e.target.tagName === "H1"){
            console.log("您点击的是h1");
        }else if(e.target.tagName === "P"){
            console.log("您点击的是p");
        }
    })
</script>
</body>
</html>

运行结果：

大聪明码农徐
关注
  • 5
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 3
    评论
专栏目录
（排序算法）冒泡排序、选择排序、插入排序算法动图讲解配代码
v1xiaolin的博客
10-27 155
1、冒泡排序 相邻的两个元素进行相比较，如果前一个比后一个大，则进行交换，第一遍历到最后一个值的时候，即为最大，无需进行比较 int[] arry =new int[10]; //定义一个一维数组，并随机赋值0-100以内的整数 for(int i = 0;i<arry.length;i++){ arry[i]=(int)(Math.random()*100+1); } System.out.printl
DOM——事件语法
weixin_53596260的博客
07-20 126
事件语法
JavaScript HTML DOM 事件语法和使用分类
wmeng13的博客
07-14 285
&lt;!DOCTYPE html&gt; &lt;html lang="en"&gt; &lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;Document&lt;/title&gt; &lt;style type="text/css"&gt; div{width: 1
23行代码_动图展示——快排详解（排序最快的经典算法）
weixin_43899069的博客
09-16 1012
快排 1.快排的实现逻辑： 先从数列中取出一个数作为基准数(通常取第一个数)。 分区过程，将比这个数大的数全放到它的右边，小于或等于它的数全放到它的左边。 再对左右区间重复第二步，直到各区间只有一个数。 2. 动态演示 代码实现 #include<cstdio> void Quick_sort(int a, int low, int high) { int i = low; int j = high; if(i > j) return 0; int temp = a[lo
移动端事件
pony的博客
02-02 417
//如果页面使用了原生的touch事件一定要组织浏览器的默认行为 $(document).on("touchstart touchmove touchend",function (e) { e.preventDefault(); }); //touch.js库 //touch.on(当前元素,"事件类型",函数); touch.on(box,"tap",function (
js DOM的事件常见操作实例详解
12-13
本文实例讲述了js DOM的事件常见操作。分享给大家供大家参考，具体如下： 一、JavaScript的组成 JavaScript基础分为三个部分： ECMAScript：JavaScript的语法标准。包括变量、表达式、运算符、函数、if语句、for...
全面解析DOM操作和jQuery实现选项移动操作代码分享
11-22
DOM选项移动操作</title> <style> select { width: px; height: px; } div { display: inline-block; width: px } </style> </head> <body> <select id="unsel" size="" multiple&...
JS DOM 操作实现代码
12-10
简单的表格: 代码如下: <table> <tr> ”TEST”> <input type=”submit” value=”确定”> <input type=”button” value=”取消”> </td> </tr> </table> 经测试: 代码如下: var td= document....
JavaScript Dom 绑定事件操作实例详解
12-13
本文实例讲述了JavaScript Dom 绑定事件操作JavaScript Dom 绑定事件操作。分享给大家供大家参考，具体如下： JavaScript Dom 绑定事件 // 先获取Dom对象，然后进行绑定 document.getElementById('xx').onclick ...
三行代码 三个动图 理解汉诺塔问题 递归 图解
爱学习的小强
11-26 397
三行代码和三个动图 hanoi(n - 1, a, c, b); 上面的n-1个盘子,借助c,最终放到了b上面 move(a, c); 直接把最后一个盘子从a移到c hanoi(n - 1, b, a, c); 上面的n-1个盘子,借助a,最终全部移到了c上面,移动完毕 hanoi(3, "A", "B", "C"); function hanoi(n, a, b, c) { if (n === 1) { move(a, c); } else { hanoi(n
【经典排序算法】选择排序（动图演示 + C 语言代码实现）
Sunnyside_
08-25 662
【经典排序算法】选择排序（动图演示 + C 语言实现） 文章目录【经典排序算法】选择排序（动图演示 + C 语言实现）1、动图演示2、排序思想3、时间/空间复杂度4、代码实现 (C语言) 1、动图演示 2、排序思想   每次从待排序的区间中，选择一个最小 (降序) 或最大 (升序) 的数，放在数组的最开头或最后，直到待排序序列的数为0。   具体步骤：第一次从 arr[0] ~ arr[n-1] 中选取最小值，与 arr[0] 交换；        第二次从 arr[1] ~ arr[n-1] 中选取
七大排序算法详解，动图展示 +代码实现，老奶奶看了都直呼内行
小乔不掉发的博客
04-11 2409
我是标题：1、直接插入排序：2、希尔排序：3、选择排序：4、堆排序：5、冒泡排序：6、快速排序：7、归并排序排序总结： 1、直接插入排序： 1、[ 有序区间（黄色区间），无序区间（蓝色区间） ] 每次操作： 1、抓无序区间（右侧蓝区）的第一张牌（红色牌） 2、依次和有序区间（左侧黄区）的牌比较（绿色为正在比较的牌） 3、选择适合的位置插入 代码实现： public static void insertSort(long[] array) { for (int i = 0; i &lt
【神秘海域】[动图] 数据结构与算法初探：复杂度详解分析 「附代码」
七月.cc的博客
04-14 1299
复杂度 引言 本篇文章是 数据结构与算法 正式内容的第一篇文章。 要介绍的也是数据结构与算法中最重要的概念之一：复杂度 复杂度，是贯穿整个数据结构与算法学习的一个重要概念。 它是衡量一个算法好坏的重要指标，它包括两个维度：时间、空间，被称为 时间复杂度、空间复杂度。 时间复杂度 主要衡量一个算法的运行快慢 空间复杂度 主要衡量一个算法运行所需要的额外空间 算法的复杂度，一般与需要处理的数据量挂钩，如果数据量为 N，那复杂度就有可能是：N 、 logN 、N*logN 、N^2 等等。 究竟什么是复杂度？
DOM事件处理详解
zxn200125的博客
11-25 221
事件处理中的事件注册、移除、以及常用事件对象
DOM 节点&移动端事件
最新发布
落魄校花的博客
06-26 95
指 1970年01月01日00时00分00秒 起至现在的。效果，因为时间不能直接进行计算，所以使用时间戳。即创造出一个网页元素，再添加到网页内，一般。的父节点，找不到返回为 null。，它是一种特殊的计量时间的方式。查找目标节点，可以减少。
DOM&&BOM&&移动端事件&&jQuery
fengzitaba的博客
11-14 392
DOM 文档对象模型（Document Object Model，简称DOM) DOM是W3C组织制定的一套处理 html和xml文档的规范，所有的浏览器都遵循了这套标准。 DOM树 DOM树 又称为文档树模型，把文档映射成树形结构，通过节点对象对其处理，处理的结果可以加入到当前的页面。 文档：一个页面就是一个文档，DOM中使用document表示 节点：网页中的所有内容，在文档树中都是节点（...
【DOM事件】PC与移动端DOM事件总结
weixin_30247159的博客
01-20 329
转载于:https://www.cnblogs.com/dajie-helloworld/p/6322117.html
【数据结构】经典八大排序（算法+动图+代码详解）
m0_54385790的博客
12-04 2094
前言 我们在学习数据结构或者算法的过程中不可避免地需要用到排序， 而在数据结构中主要介绍了，八种常见排序，本次就让我们一起深入学习下吧
DOM系列之触屏事件
老__L的博客
08-01 317
移动端浏览器兼容性较好，我们不需要考虑以前 JS 的兼容性问题，可以放心的使用原生 JS 书写效果，但是移动端也有自己独特的地方。比如触屏事件 touch（也称触摸事件），Android 和 IOS 都有。touch 对象代表一个触摸点。触摸点可能是一根手指，也可能是一根触摸笔。触屏事件可响应用户手指（或触控笔）对屏幕或者触控板操作。
用python代码写一个解析一个网页并打印dom树
04-05
以下是使用Python中的BeautifulSoup库解析网页并打印DOM树的代码示例： ```python import requests from bs4 import BeautifulSoup # 发送GET请求并获取网页内容 url = 'https://www.python.org/' response = requests.get(url) content = response.content # 使用BeautifulSoup解析网页内容 soup = BeautifulSoup(content, 'html.parser') # 打印DOM树 print(soup.prettify()) ``` 解释一下代码： 1. 导入requests和BeautifulSoup库。 2. 发送GET请求并获取网页内容，保存在`content`变量中。 3. 使用BeautifulSoup库中的`BeautifulSoup`类解析网页内容，生成一个DOM树。 4. 使用`prettify()`方法将DOM树格式化输出到控制台。 注意：在运行代码前需要先安装requests和BeautifulSoup库。可以使用以下命令安装： ``` pip install requests pip install beautifulsoup4 ```

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 3
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

大聪明码农徐

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值