python之路17：DOM

概述

文档对象模型（Document Object Model，DOM）是一种用于HTML和XML文档的编程接口。它给文档提供了一种结构化的表示方法，可以改变文档的内容和呈现方式。

 查找元素

1、找到标签
获取单个元素 document.getElementById(‘i1‘)
获取多个元素（列表）document.getElementsByTagName(‘div‘)
获取多个元素（列表）document.getElementsByClassName(‘c1‘)
a. 直接找
document.getElementById 根据ID获取一个标签
document.getElementsByName 根据name属性获取标签集合
document.getElementsByClassName 根据class属性获取标签集合
document.getElementsByTagName 根据标签名获取标签集合

b. 间接找
tag = document.getElementById(‘i1‘)
parentElement // 父节点标签元素
children // 所有子标签
firstElementChild // 第一个子标签元素
lastElementChild // 最后一个子标签元素
nextElementtSibling // 下一个兄弟标签元素
previousElementSibling // 上一个兄弟标签元素

parentNode          // 父节点

childNodes          // 所有子节点

firstChild          // 第一个子节点

lastChild           // 最后一个子节点

nextSibling         // 下一个兄弟节点

previousSibling     // 上一个兄弟节点

操作标签

a. innerText
获取标签中的文本内容
标签.innerText

对标签内部文本进行重新复制
标签.innerText = ""

b. className
tag.className =》 直接整体做操作
tag.classList.add(‘样式名‘) 添加指定样式
tag.classList.remove(‘样式名‘) 删除指定样式

c. checkbox
获取值
checkbox对象.checked
设置值
checkbox对象.checked = true

其它操作

console.log                　　　　输出框

alert                      　　弹出框

confirm                    　　确认框

 

// URL和刷新

location.href              　　获取URL

location.href = "url"       　　　　　　重定向

location.reload()           重新加载

 

// 定时器

setInterval                 多次定时器

clearInterval               清除多次定时器

setTimeout                  单次定时器

clearTimeout                清除单次定时器

注册事件

事件：比如有一个“按钮”，当你点击的时候发生什么，双击的时候发生什么，这个就叫做事件！

注册：首先这个按钮，当你点击的时候发生的动作，上面的事件要使他出现我们想要的效果，首先得把事件和函数进行绑定，然后把他们注册到指定标签上。

对于事件需要注意的要点：

  • this
  • event
  • 事件链以及跳出

this标签当前正在操作的标签，event封装了当前事件的内容。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>shuaige_js_file</title>
    <!--导入javascript脚本方法-->
    <!--<script type="text/javascript" src="t1.js "></script>-->
    <style>
        .color_red {
            background-color: red;
        }
    </style>
</head>
<body>
<div id="id_1">
</div>

<!--下面的input标签:onclick是个事件他等于一个函数,就是事件和函数进行绑定,应用到标签中就是注册到标签中-->
<input type="button" onclick="edit();" value="修改"/>
<input type="button" onclick="rollback();" value="回滚"/>

<script type="text/javascript">
    function edit() {
        var i = document.getElementById(‘id_1‘);
        i.className = ‘color_red‘;
    }

    function rollback() {
        var i = document.getElementById(‘id_1‘);
        i.className = ‘‘; //这里只要给他设置为空即可
    }
</script>

</body>
</html>

修改、回滚

 1 <!DOCTYPE html>
 2 <html>
 3 <head lang="en">
 4     <meta charset="UTF-8">
 5     <title></title>
 6 </head>
 7 <body>
 8 <input type="button" value="全选" onclick="CheckAll();"/>
 9 <input type="button" value="取消" onclick="CancelAll();"/>
10 <input type="button" value="反选" onclick="ReverseCheck();"/>
11
12 <table border="1">
13     <thead>
14
15     </thead>
16     <tbody id="tb">
17     <tr>
18         <td><input type="checkbox"/></td>
19         <td>111</td>
20         <td>222</td>
21     </tr>
22     <tr>
23         <td><input type="checkbox"/></td>
24         <td>111</td>
25         <td>222</td>
26     </tr>
27     <tr>
28         <td><input type="checkbox"/></td>
29         <td>111</td>
30         <td>222</td>
31     </tr>
32     <tr>
33         <td><input type="checkbox"/></td>
34         <td>111</td>
35         <td>222</td>
36     </tr>
37     </tbody>
38 </table>
39 <script>
40     function CheckAll(ths) {
41         var tb = document.getElementById(‘tb‘);
42         var trs = tb.childNodes;
43         for (var i = 0; i < trs.length; i++) {
44
45             var current_tr = trs[i];
46             if (current_tr.nodeType == 1) {
47                 var inp = current_tr.firstElementChild.getElementsByTagName(‘input‘)[0];
48                 inp.checked = true;
49             }
50         }
51     }
52
53     function CancelAll(ths) {
54         var tb = document.getElementById(‘tb‘);
55         var trs = tb.childNodes;
56         for (var i = 0; i < trs.length; i++) {
57
58             var current_tr = trs[i];
59             if (current_tr.nodeType == 1) {
60                 var inp = current_tr.firstElementChild.getElementsByTagName(‘input‘)[0];
61                 inp.checked = false;
62             }
63         }
64     }
65
66     function ReverseCheck(ths) {
67         var tb = document.getElementById(‘tb‘);
68         var trs = tb.childNodes;
69         for (var i = 0; i < trs.length; i++) {
70             var current_tr = trs[i];
71             if (current_tr.nodeType == 1) {
72                 var inp = current_tr.firstElementChild.getElementsByTagName(‘input‘)[0];
73                 if (inp.checked) {
74                     inp.checked = false;
75                 } else {
76                     inp.checked = true;
77                 }
78             }
79         }
80     }
81
82 </script>
83 </body>
84 </html>

全选反选取消

 1 <!DOCTYPE html>
 2 <html>
 3 <head>
 4     <meta charset=‘utf-8‘/>
 5     <title></title>
 6
 7     <style>
 8         .gray {
 9             color: gray;
10         }
11
12         .black {
13             color: black;
14         }
15     </style>
16 </head>
17 <body>
18 <!--input标签内注注册了两个事件(onfocus/onblur并且事件已经绑定了函数)-->
19 <input type=‘text‘ class=‘gray‘ id=‘tip‘ value=‘请输入关键字‘ onfocus=‘Enter();‘ onblur=‘Leave();‘/>
20 <script type="text/javascript">
21     function Enter() { //函数Enter的作用,当元素获得焦点就把里面的值设置为空并把颜色设置为黑色
22         var id = document.getElementById("tip"); //找到id为tip的标签并赋值给id
23         id.className = ‘black‘; //给id的class设置为black
24         if (id.value == ‘请输入关键字‘ || id.value.trim() == ‘‘) {
25             id.value = ‘‘
26         } //判断找到的标签的value=‘请输入关键里‘或者你输入的内容为空
27     }
28
29     function Leave() { //函数Leave的作用,当元素失去焦点就把里面的值设置为"请输入关键字"并把颜色设置为灰色
30         var id = document.getElementById("tip"); //找到id为tip的标签病赋值为id
31         var val = id.value; //把id的value属性赋值为val
32         if (val.length == 0 || id.value.trim() == ‘‘) {
33             id.value = ‘请输入关键字‘;
34             id.className = ‘gray‘;
35         } else {
36             id.className = ‘black‘;
37         } //判断如果val的长度为0,或者用户输入为空字符,把id的value设置为"请输入关键字"
38           //否则把id.class设置为black
39     }
40 </script>
41 </body>
42 </html>

搜索框

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>欢迎大佬莅临指导&nbsp;&nbsp;</title>
 6     <!--跑马灯实例-->
 7     <script type="text/javascript">
 8         function run() { //定义一个函数
 9             var content = document.title; //获取title的内容
10             var firstChar = content.charAt(0); //获取content第一个元素
11             var sub = content.substring(1, content.length); //获取content字符串剩余的元素
12             document.title = sub + firstChar; //对字符串进行新的拼接
13         }
14
15         setInterval(‘run()‘, 1000); //使用interval每秒执行然后达到跑马灯的目的
16     </script>
17 </head>
18 <body>
19
20
21 </body>
22 </html>

跑马灯

参考：

http://www.cnblogs.com/alex3714

http://www.cnblogs.com/wupeiqi

internet＆python books

PS:如侵权，联我删。

原文地址：https://www.cnblogs.com/BillyLV/p/11215943.html

时间： 2024-11-03 03:23:15

python之路17：DOM的相关文章

python之路--17. 面向对象 -成员

三十六.面向对象的成员 能写的所有成员 一.变量 1.实例变量    访问时      对象.变量 2.类变量         访问时     类名.变量 注意: 二.方法 1.实例方法 必须有一个参数(self) 调用时      对象.变量() 2.类方法 必须有一个参数(cls) 定义时在方法前加        @classmethod 调用时       类名.变量() 3.静态方法(属于类) 可以不用参数 定义时 在方法前加       @staticmethod 调用时       

数学之路-python计算实战(17)-机器视觉-滤波去噪(中值滤波)

Blurs an image using the median filter. C++: void medianBlur(InputArray src, OutputArray dst, int ksize) Python: cv2.medianBlur(src, ksize[, dst]) → dst Parameters: src – input 1-, 3-, or 4-channel image; when ksize is 3 or 5, the image depth should

Python之路【第十七篇】：Django【进阶篇 】

Python之路[第十七篇]:Django[进阶篇 ] Model 到目前为止,当我们的程序涉及到数据库相关操作时,我们一般都会这么搞: 创建数据库,设计表结构和字段 使用 MySQLdb 来连接数据库,并编写数据访问层代码 业务逻辑层去调用数据访问层执行数据库操作 import MySQLdb def GetList(sql): db = MySQLdb.connect(user='root', db='wupeiqidb', passwd='1234', host='localhost')

Python之路【第九篇】：Python操作 RabbitMQ、Redis、Memcache、SQLAlchemy

Python之路[第九篇]:Python操作 RabbitMQ.Redis.Memcache.SQLAlchemy Memcached Memcached 是一个高性能的分布式内存对象缓存系统,用于动态Web应用以减轻数据库负载.它通过在内存中缓存数据和对象来减少读取数据库的次数,从而提高动态.数据库驱动网站的速度.Memcached基于一个存储键/值对的hashmap.其守护进程(daemon )是用C写的,但是客户端可以用任何语言来编写,并通过memcached协议与守护进程通信. Memc

Python之路【第三篇】：Python基础（二）

Python之路[第三篇]:Python基础(二) 内置函数 一 详细见python文档,猛击这里 文件操作 操作文件时,一般需要经历如下步骤: 打开文件 操作文件 一.打开文件 1 文件句柄 = file('文件路径', '模式') 注:python中打开文件有两种方式,即:open(...) 和  file(...) ,本质上前者在内部会调用后者来进行文件操作,推荐使用 open. 打开文件时,需要指定文件路径和以何等方式打开文件,打开后,即可获取该文件句柄,日后通过此文件句柄对该文件操作.

Python之路【第二篇】：Python基础（一）

Python之路[第二篇]:Python基础(一) 入门知识拾遗 一.作用域 对于变量的作用域,执行声明并在内存中存在,该变量就可以在下面的代码中使用. 1 2 3 if 1==1:     name = 'wupeiqi' print  name 下面的结论对吗? 外层变量,可以被内层变量使用 内层变量,无法被外层变量使用 二.三元运算 1 result = 值1 if 条件 else 值2 如果条件为真:result = 值1如果条件为假:result = 值2 三.进制 二进制,01 八进

Python之路【第十九篇】：爬虫

Python之路[第十九篇]:爬虫 网络爬虫(又被称为网页蜘蛛,网络机器人,在FOAF社区中间,更经常的称为网页追逐者),是一种按照一定的规则,自动地抓取万维网信息的程序或者脚本.另外一些不常使用的名字还有蚂蚁.自动索引.模拟程序或者蠕虫. Requests Python标准库中提供了:urllib.urllib2.httplib等模块以供Http请求,但是,它的 API 太渣了.它是为另一个时代.另一个互联网所创建的.它需要巨量的工作,甚至包括各种方法覆盖,来完成最简单的任务. import

Python之路【第七篇】：线程、进程和协程

Python之路[第七篇]:线程.进程和协程 Python线程 Threading用于提供线程相关的操作,线程是应用程序中工作的最小单元. 1 2 3 4 5 6 7 8 9 10 11 12 13 14 #!/usr/bin/env python # -*- coding:utf-8 -*- import threading import time   def show(arg):     time.sleep(1)     print 'thread'+str(arg)   for i in

Python之路【第八篇】：堡垒机实例以及数据库操作

Python之路[第八篇]:堡垒机实例以及数据库操作 堡垒机前戏 开发堡垒机之前,先来学习Python的paramiko模块,该模块机遇SSH用于连接远程服务器并执行相关操作 SSHClient 用于连接远程服务器并执行基本命令 基于用户名密码连接: + import paramiko transport = paramiko.Transport(('hostname', 22)) transport.connect(username='wupeiqi', password='123') ssh