python入门教程之二十七html——Dom

最新推荐文章于 2023-03-31 10:29:24 发布
最新推荐文章于 2023-03-31 10:29:24 发布
阅读量273 收藏
点赞数
分类专栏： python 文章标签： python
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_42832272/article/details/95990190
版权

在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

模态对话框：

<!DOCTYPE html>

<html lang="en" xmlns="http://www.w5.org/1999/xhtml">
<head>
    <meta charset="utf-8" />
    <title>title</title>  
    <style>
        .hide {
        display:none;
        }
        .c1 {
            position:fixed;
            left:0;
            top:0;
            right:0;
            bottom:0;
            background-color:black;
            opacity:0.6;
            z-index:9;
        }
        .c2 {
            width:500px;
            height:400px;
            background-color:white;
            position:fixed;
            left:50%;
            top:50%;
            margin-left:-250px;
            margin-top:-200px;
            z-index:10;
        }
    </style>
</head>
<body style="margin:0;">
    <div>
        <input type="button" value ="添加" onclick="ShowModel();"/>
        <table>
            <thead>
                <tr>
                    <th>主机名</th>
                    <th>端口</th>

                </tr>
            </thead>
            <tbody>
                <tr>
                    <td>1.1.1.1</td>
                    <td>190</td>
                </tr>
                <tr>
                    <td>1.1.1.2</td>
                    <td>192</td>
                </tr>
                <tr>
                    <td>1.1.1.3</td>
                    <td>193</td>
                </tr>
            </tbody>
        </table>
    </div>
    <!--遮罩层开始-->
    <div id="i1" class="c1 hide"></div>
    <!--遮罩层结束-->

    <!--弹出框开始-->
    <div id="i2" class="c2 hide">
        <p><input type="text" /></p>
        <p><input type="text" /></p>
        <p>
            <input type="button" value="取消" onclick="HideModel();"/>
            <input type="button" value="确定" />
        </p>
    </div>
    <!--弹出框结束-->
    <script>
        function ShowModel() {
            document.getElementById('i1').classList.remove('hide');
            document.getElementById('i2').classList.remove('hide');

        }
        function HideModel() {
            document.getElementById('i1').classList.add('hide');
            document.getElementById('i2').classList.add('hide');

        }
    </script>
</body>
</html>

在这里插入图片描述
在这里插入图片描述

菜单选项展开和合并

<!DOCTYPE html>

<html lang="en" xmlns="http://www.w5.org/1999/xhtml">
<head>
    <meta charset="utf-8" />
    <title>title</title>  
    <style>
        .hide {
        display:none;
        }
        .c1 {
            position:fixed;
            left:0;
            top:0;
            right:0;
            bottom:0;
            background-color:black;
            opacity:0.6;
            z-index:9;
        }
        .c2 {
            width:500px;
            height:400px;
            background-color:white;
            position:fixed;
            left:50%;
            top:50%;
            margin-left:-250px;
            margin-top:-200px;
            z-index:10;
        }
    </style>
</head>
<body style="margin:0;">
    <div>
        <input type="button" value="添加" onclick="ShowModel();" />
        <input type="button" value="全选" onclick="ChooseAll();" />
        <input type="button" value="取消" onclick="CancleAll();" />
        <input type="button" value="反选" onclick="ReverseAll();" />

        <table>
            <thead>
                <tr>
                    <th>主机名</th>
                    <th>端口</th>

                </tr>
            </thead>
            <tbody id="tb">
                <tr>
                    <td><input type="checkbox" /></td>
                    <td>1.1.1.1</td>
                    <td>190</td>
                </tr>
                <tr>
                    <td><input type="checkbox" /></td>

                    <td>1.1.1.2</td>
                    <td>192</td>
                </tr>
                <tr>
                    <td><input type="checkbox" /></td>
                    <td>1.1.1.3</td>
                    <td>193</td>
                </tr>
            </tbody>
        </table>
    </div>
    <!--遮罩层开始-->
    <div id="i1" class="c1 hide"></div>
    <!--遮罩层结束-->

    <!--弹出框开始-->
    <div id="i2" class="c2 hide">
        <p><input type="text" /></p>
        <p><input type="text" /></p>
        <p>
            <input type="button" value="取消" onclick="HideModel();"/>
            <input type="button" value="确定" />
        </p>
    </div>
    <!--弹出框结束-->
    <script>
        function ShowModel() {
            document.getElementById('i1').classList.remove('hide');
            document.getElementById('i2').classList.remove('hide');

        }
        function HideModel() {
            document.getElementById('i1').classList.add('hide');
            document.getElementById('i2').classList.add('hide');

        }
        function ChooseAll() {
            var tbody = document.getElementById('tb');
            //获取所有的tr
            var tr_list = tbody.children;
            for (var i = 0; i < tr_list.length; i++) {
                var current_tr = tr_list[i];
                var checkbox = current_tr.children[0].children[0];
                checkbox.checked = true;
            }
        }
        function CancleAll() {
            var tbody = document.getElementById('tb');
            //获取所有的tr
            var tr_list = tbody.children;
            for (var i = 0; i < tr_list.length; i++) {
                var current_tr = tr_list[i];
                var checkbox = current_tr.children[0].children[0];
                checkbox.checked = false;
            }
        }
        function ReverseAll() {
            var tbody = document.getElementById('tb');
            //获取所有的tr
            var tr_list = tbody.children;
            for (var i = 0; i < tr_list.length; i++) {
                var current_tr = tr_list[i];
                var checkbox = current_tr.children[0].children[0];
                if (checkbox.checked) {
                    checkbox.checked = false;
                } else {
                    checkbox.checked = true;
                }
               
            }
        }
    </script>
</body>
</html>

<!DOCTYPE html>

<html lang="en" xmlns="http://www.w5.org/1999/xhtml">
<head>
    <meta charset="utf-8" />
    <title>title</title>  
    <style>
        .hide {
            display:none;
        }
        .item .header {
            height:35px;
            background-color:#2459a2;
            color:white;
            line-height:35px;
        }
    </style>
</head>
<body>
    <div style="height:48px"></div>
    <div style="width:300px">
        <div class="item">
            <div id="i1"class="header" onclick="ChangeMenu('i1');">菜单1</div>
            <div class="content">
                <div>内容1</div>
                <div>内容1</div>
                <div>内容1</div>
            </div>
        </div>
        <div class="item">
            <div id="i2"class="header" onclick="ChangeMenu('i2');">菜单2</div>
            <div class="content hide">
                <div>内容2</div>
                <div>内容2</div>
                <div>内容2</div>
            </div>
        </div>
        <div class="item">
            <div id="i3"class="header" onclick="ChangeMenu('i3');">菜单3</div>
            <div class="content hide">
                <div>内容3</div>
                <div>内容3</div>
                <div>内容3</div>
            </div>
        </div>
        <div class="item">
            <div id="i4" class="header" onclick="ChangeMenu('i4');">菜单4</div>
            <div class="content hide">
                <div>内容4</div>
                <div>内容4</div>
                <div>内容4</div>
            </div>
        </div>

    </div>
    
    <script>
        function ChangeMenu(nid) {
            var current_header = document.getElementById(nid);
            
            var item_list = current_header.parentElement.parentElement.children;
            for (var i = 0; i < item_list.length; i++) {
                var current_item = item_list[i];
                current_item.children[1].classList.add('hide');
            }
            current_header.nextElementSibling.classList.remove('hide');
        }

    </script>
</body>
</html >

在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

123梦野
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
PythonWeb从入门到实战教程之2CSS、JavaScript、HTML.zip
11-01
在本教程中，我们将深入探讨三个关键的前端技术——CSS（Cascading Style Sheets）、JavaScript以及HTML（HyperText Markup Language），这些都是构建动态和交互式Web页面的基础。这是一份针对Python Web开发者的...
python dom操作
weixin_30687811的博客
02-15 853
1.DOM介绍 (1)什么是DOM DOM：文档对象模型。DOM 为文档提供了结构化表示，并定义了如何通过脚本来访问文档结构。目的其实就是为了能让js操作html元素而制定的一个规范。 DOM就是由节点组成的。 (2)解析过程 HTML加载完毕，渲染引擎会在内存中把HTML文档，生成一个DOM树，getElementById是获取内中DOM上的元素节点。然后操作的时候修改的是...
Python更新DOM的5种方式：BeautifulSoup、lxml、Scrapy、pyquery、requests-html
最新发布
小龙在线
03-31 794
在Python中，我们通常使用BeautifulSoup库来解析和修改HTML文档（DOM）。然后，你可以使用BeautifulSoup来解析HTML字符串并更新DOM。在这个例子中，我们首先解析HTML字符串，然后找到。
python大佬_python大佬养成计划----HTML DOM
weixin_35453718的博客
03-02 136
什么是DOM？DOM (Document Object Model) 译为文档对象模型，是 HTML 和 XML 文档的编程接口。HTML DOM 定义了访问和操作 HTML 文档的标准方法。DOM 以树结构表达 HTML 文档。HTML DOM 定义了所有 HTML 元素的对象和属性，以及访问它们的方法。换言之，HTML DOM 是关于如何获取、修改、添加或删除 HTML 元素的标准。根据HTM...
python读取html内容 dom获取_python学习笔记十三 JS，Dom（进阶篇）
weixin_39636696的博客
12-08 909
JS介绍JavaScript 是属于网络的脚本语言！JavaScript 被数百万计的网页用来改进设计、验证表单、检测浏览器、创建cookies，以及更多的应用；JavaScript 是因特网上最流行的脚本语言。JavaScript 与 Java 是两种完全不同的语言，无论在概念还是设计上。Java(由 Sun 发明)是更复杂的编程语言。ECMA-262 是 JavaScript 标准的官方名称。...
Python全栈：HTML入门
超级大洋葱的博客
01-30 316
文章目录1 HTML简介2 HTML 常用标签2.1 字体标签2.2 段落标签和注释2.3 标题标签2.4 图片标签2.5 超级链接标签2.6 锚点2.7 列表3 HTML 表格3.1 基本操作3.2 合并行列3.3 属性标签caption、 tbody、 tfoot、 thead3.4 其它标签4 HTML 表单界面优化表单其他控件 1 HTML简介 什么是HTML 大名：Hyper Text Markup Language 寓意：超文本标记语言 文件结构 <html> <h
Python编程入门经典
10-27
第Ⅰ部分 初步了解Python 第1章 编程基础和字符串 3 1.1 编程与使用计算机的区别 3 1.1.1 编程的一致性 3 1.1.2 编程的可控性 4 1.1.3 程序要应对变化 4 1.1.4 小结 4 1.2 准备工作 4 1.2.1 在非Windows系统上安装 ...
project1：CS50-使用python和JavaScript编程-project1
02-20
在“project1：CS50-使用python和JavaScript编程-project1”中，我们可以探索两个主要的编程语言——Python和JavaScript在网络编程中的应用。这个项目可能是CS50（哈佛大学计算机科学入门课程）的一个组成部分，旨在...
cs50w2020:CS50的使用Python和JavaScript进行Web编程（2020）
03-16
【标题】"CS50w2020:CS50的使用Python和JavaScript进行Web编程（2020）" 提供了一个深入学习Web开发的课程，它结合了两种主流的编程语言——Python和JavaScript，帮助学生掌握构建现代Web应用的基础技能。...
Hello-World:学习编程
05-04
本文将围绕“Hello-World: 学习编程”这一主题，深入探讨HTML、CSS以及Python和JavaScript的基础知识，为你的技术企业家之路铺平道路。 首先，我们从网页开发的基础——HTML（HyperText Markup Language）开始。...
SemEval 2014数据集预处理：Python xml.etree.cElementTree解析XML文件
杂文集
06-23 4347
在做Aspect-level情感分类时一般会用到SemEval 2014数据集。官网给的数据集都是XML格式，我们要对其进行解析。 首先看一下数据结构。 一个XML文件里包含多个sentence，我们要提取出来的信息是text节点内容以及aspectCategories节点的category和polarity属性。 下面是代码。 首先，导入库。 import xml.etree.cElementTree as ET Python标准库中，提供了ElementTree的两种实现。一个是纯Python实现的
python读取html内容 dom_在Python中浏览HTML DOM
weixin_39976081的博客
12-08 727
I'm looking to write a Python script (using 3.4.3) that grabs a HTML page from a URL and can go through the DOM to try to find a specific element.I currently have this:#!/usr/bin/env pythonimport urll...
python大佬养成计划----HTML DOM
weixin_34402408的博客
10-11 304
什么是DOM？ DOM (Document Object Model) 译为文档对象模型，是 HTML 和 XML 文档的编程接口。HTML DOM 定义了访问和操作 HTML 文档的标准方法。DOM 以树结构表达 HTML 文档。HTML DOM 定义了所有 HTML 元素的对象和属性，以及访问它们的方法。换言之，HTML DOM 是关...
python开发html教程_前端开发（ DOM操作）|python教程|python入门|python教程
weixin_39712821的博客
12-09 179
https://www.xin3721.com/eschool/pythonxin3721/11.47 DOM操作查找节点：11.471 直接查找document.getElementById //根据ID获取唯一一个标签document.getElementsByClassName //根据class属性获取一系列标签document.getElementsByTagNa...
python解析html获取节点的内容（python小白笔记六）
热门推荐
渴望飞的鱼的博客
11-06 1万+
在爬取网页的时候，爬下的数据需要解析html。如下代码。 使用python3.x from bs4 import BeautifulSoup as bs html='''&lt;html&gt; &lt;head&gt; &lt;title class='ceshi'&gt;super 哈哈 star&lt;/title&gt; &lt;/head&gt; &lt;body&gt;...
HTML DOM
C_755028787的博客
12-29 133
文档对象模型(Document Object Model，简称DOM)，是W3C组织推荐的处理可扩展标志语言的标准编程接口。在网页上，组织页面(或文档)的对象被组织在一个树形结构中，用来表示文档中对象的标准模型就称为DOM。 DOM 是遵循 W3C(万维网联盟)的标准。 DOM 定义了访问 HTML 和 XML 文档的标准: “W3C 文档对象模型 (DOM) 是中立于平台和语言的接口，它允许程序...
JavaScript HTML DOM 对象（上）
人生就是一场修行
11-17 1492
Dom：document。相当于把所有的html文件，转换成了文档对象。之前说过：html-裸体的人；css-穿上衣服；js-让人动起来。 让人动起来，就得先找到他，再修改它内容或属性。 找到标签 操作标签 一、查找元素1、直接查找document.getElementById('i1') 根据ID获取一个元素 document.getElementsByTagName('di
python读取html内容 dom获取_获取特定html源码 富文本编辑器 爬虫生成 dom
weixin_39713763的博客
12-08 428
python beautifulsoup获取特定html源码 - 吴悟无 - 博客园 https://www.cnblogs.com/vickey-wu/p/6843411.htmlPyQuery库的使用 - CSDN博客 https://blog.csdn.net/qw_xingzhe/article/details/75175256Python爬虫：PyQuery库的介绍与使用 - 简书 ht...
Javascript----HTML DOM 事件
iteye_6125的博客
06-18 487
HTML DOM 事件允许Javascript在HTML文档元素中注册不同事件处理程序。 事件通常与函数结合使用，函数不会在事件发生前被执行！ [b]注：DOM： 指明使用的 DOM 属性级别。[/b] [b]1.鼠标事件[/b] 属性 描述 DOM [u]onclick ...
Python教程(原文).pdf
03-24
"Python教程(原文).pdf" 这篇Python教程详细介绍了Python编程语言的基础知识和核心概念，适合初学者和有经验的程序员。Python以其简洁易学的语法、高效的高级数据结构以及面向对象编程特性而备受青睐。教程指出，...

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值