zoukankan html css js c++ java

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

查看全文

相关阅读:
多重背包POJ1276不要求恰好装满 poj1014多重背包恰好装满
 哈理工1053完全背包
 求最小公倍数与最大公约数的函数
 Bus Pass ZOJ 2913 BFS 最大中取最小的
 POJ 3624 charm bracelet 01背包不要求装满
 HavelHakimi定理（判断一个序列是否可图）
z0j1008Gnome Tetravex
ZOJ 1136 Multiple BFS 取模 POJ 1465
01背包擎天柱恰好装满 zjut(浙江工业大学OJ) 1355
zoj 2412 水田灌溉，求连通分支个数

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