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:如侵权，联我删。

posted on 2019-09-02 12:26  BillyLV  阅读(201)  评论(0)  编辑  收藏  举报

导航