javascript之DOM

文档对象模型（Document Object Model，DOM）是一种用于HTML和XML文档的编程接口。它给文档提供了一种结构化的表示方法，可以改变文档的内容和呈现方式。我们最为关心的是，DOM把网页和脚本以及其他的编程语言联系了起来。DOM属于浏览器，而不是JavaScript语言规范里的规定的核心内容。

一、元素查找

　　1、直接查找

1 document.getElementById             根据ID获取一个标签
2 document.getElementsByName          根据name属性获取标签集合
3 document.getElementsByClassName     根据class属性获取标签集合
4 document.getElementsByTagName       根据标签名获取标签集合

View Code

　　2、间接查找

 1 parentNode          // 父节点
 2 childNodes          // 所有子节点
 3 firstChild          // 第一个子节点
 4 lastChild           // 最后一个子节点
 5 nextSibling         // 下一个兄弟节点
 6 previousSibling     // 上一个兄弟节点
 7  
 8 parentElement           // 父节点标签元素
 9 children                // 所有子标签
10 firstElementChild       // 第一个子标签元素
11 lastElementChild        // 最后一个子标签元素
12 nextElementtSibling     // 下一个兄弟标签元素
13 previousElementSibling  // 上一个兄弟标签元素

View Code

二、操作

　　1、内容

1 innerText   文本
2 outerText
3 innerHTML   HTML内容
4 innerHTML  
5 value       值

View Code

　　2、属性

1 attributes                // 获取所有标签属性
2 setAttribute(key,value)   // 设置标签属性
3 getAttribute(key)         // 获取指定标签属性
4  
5 /*
6 var atr = document.createAttribute("class");
7 atr.nodeValue="democlass";
8 document.getElementById('n1').setAttributeNode(atr);
9 */

View Code

　　3、class操作

1 className                // 获取所有类名
2 classList.remove(cls)    // 删除指定类
3 classList.add(cls)       // 添加类

View Code

　　4、标签操作

 1 a.创建标签
 2 // 方式一
 3 var tag = document.createElement('a')
 4 tag.innerText = "wupeiqi"
 5 tag.className = "c1"
 6 tag.href = "http://www.cnblogs.com/wupeiqi"
 7  
 8 // 方式二
 9 var tag = "<a class='c1' href='http://www.cnblogs.com/wupeiqi'>wupeiqi</a>"
10 b.操作标签
11 // 方式一
12 var obj = "<input type='text' />";
13 xxx.insertAdjacentHTML("beforeEnd",obj);
14 xxx.insertAdjacentElement('afterBegin',document.createElement('p'))
15  
16 //注意：第一个参数只能是'beforeBegin'、 'afterBegin'、 'beforeEnd'、 'afterEnd'
17  
18 // 方式二
19 var tag = document.createElement('a')
20 xxx.appendChild(tag)
21 xxx.insertBefore(tag,xxx[1])

View Code

　　5、样式操作

1 var obj = document.getElementById('i1')
2  
3 obj.style.fontSize = "32px";
4 obj.style.backgroundColor = "red";

View Code

　　6、位置操作

 1 总文档高度
 2 document.documentElement.offsetHeight
 3   
 4 当前文档占屏幕高度
 5 document.documentElement.clientHeight
 6   
 7 自身高度
 8 tag.offsetHeight
 9   
10 距离上级定位高度
11 tag.offsetTop
12   
13 父定位标签
14 tag.offsetParent
15   
16 滚动高度
17 tag.scrollTop
18  
19 /*
20     clientHeight -> 可见区域：height + padding
21     clientTop    -> border高度
22     offsetHeight -> 可见区域：height + padding + border
23     offsetTop    -> 上级定位标签的高度
24     scrollHeight -> 全文高：height + padding
25     scrollTop    -> 滚动高度
26     特别的：
27         document.documentElement代指文档根节点
28 */

View Code

　　7、提交表单

1 document.geElementById('form').submit()

View Code

　　8、其他操作

 1 console.log                 输出框
 2 alert                       弹出框
 3 confirm                     确认框
 4   
 5 // URL和刷新
 6 location.href               获取URL
 7 location.href = "url"       重定向
 8 location.reload()           重新加载
 9   
10 // 定时器
11 setInterval                 多次定时器
12 clearInterval               清除多次定时器
13 setTimeout                  单次定时器
14 clearTimeout                清除单次定时器

View Code

三、事件

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

this
event
事件链以及跳出

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

实例：

 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             .black{
12                 color:black;
13             }
14         </style>
15         <script type="text/javascript">
16             function Enter(){
17                var id= document.getElementById("tip")
18                id.className = 'black';
19                if(id.value=='请输入关键字'||id.value.trim()==''){
20                     id.value = ''
21                }
22             }
23             function Leave(){
24                 var id= document.getElementById("tip")
25                 var val = id.value;
26                 if(val.length==0||id.value.trim()==''){
27                     id.value = '请输入关键字'
28                     id.className = 'gray';
29                 }else{
30                     id.className = 'black';
31                 }
32             }
33         </script>
34     </head>
35     <body>
36         <input type='text' class='gray' id='tip' value='请输入关键字' onfocus='Enter();'  onblur='Leave();'/>
37     </body>
38 </html>

搜索框

 1 <!DOCTYPE html>
 2 <html>
 3     <head>
 4         <meta charset='utf-8' >
 5         <title>欢迎blue shit莅临指导&nbsp;&nbsp;</title>
 6         <script type='text/javascript'>
 7             function Go(){
 8                 var content = document.title;
 9                 var firstChar = content.charAt(0)
10                 var sub = content.substring(1,content.length)
11                 document.title = sub + firstChar;
12             }
13             setInterval('Go()',1000);
14         </script>
15     </head>
16     <body>    
17     </body>
18 </html>

跑马灯

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>Title</title>
 6     <style>
 7         .style_before {
 8             color: lightgrey;
 9         }
10         .style_after {
11             color: black;
12         }
13     </style>
14 </head>
15 <body>
16     <h3>爱好</h3>
17     <div>
18         <ul id="i1">
19             <li><input type="checkbox" value="1">篮球</li>
20             <li><input type="checkbox" value="2">足球</li>
21             <li><input type="checkbox" value="3">乒乓球</li>
22         </ul>
23     </div>
24     <button onclick="Cheakall()">全选</button>
25     <button onclick="Cancleall()">取消全选</button>
26     <button onclick="Reversall()">反选</button>
27     <script>
28         function Cheakall() {
29             var i1 = document.getElementById("i1");
30             var cheak = i1.getElementsByTagName("input");
31             for (i=0;i<cheak.length;i++) {
32                 cheak[i].checked = true;
33             }
34         }
35         function Cancleall() {
36             var i1 = document.getElementById("i1");
37             var cheak = i1.getElementsByTagName("input");
38             for (i=0;i<cheak.length;i++) {
39                 cheak[i].checked = false;
40             }
41         }
42         function Reversall() {
43             var i1 = document.getElementById("i1");
44             var cheak = i1.getElementsByTagName("input");
45             for (i=0;i<cheak.length;i++) {
46                 if (cheak[i].checked) {
47                     cheak[i].checked = false;
48                 }else {
49                     cheak[i].checked = true;
50                 }
51             }
52         }
53     </script>
54 </body>
55 </html>

全选与反选

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>Title</title>
 6     <style>
 7         .hide {
 8             display: none;
 9         }
10         .c1 {
11             position: fixed;
12             top: 0;
13             right: 0;
14             bottom: 0;
15             left: 0;
16             background: rgba(0,0,0,.6);
17             z-index: 2;
18         }
19         .c2 {
20             position: fixed;
21              400px;
22             height: 300px;
23             top: 50%;
24             left: 50%;
25             z-index: 3;
26             margin-top: -150px;
27             margin-left: -200px;
28             background-color: white;
29             text-align: center;
30             padding-top: 150px;
31         }
32     </style>
33 </head>
34 <body>
35     <div><input type="button" value="登录" onclick="hihi()"></div>
36     <div id="cc1" class="c1 hide"></div>
37     <div id="cc2" class="c2 hide">
38         <div>用户名：<input type="text"></div>
39         <div>密 码：<input type="text"></div>
40         <input type="button" value="确定">
41         <input type="button" value="取消" onclick="hisl()">
42     </div>
43 
44     <script>
45         function hihi() {
46             document.getElementById("cc1").classList.remove("hide");
47             document.getElementById("cc2").classList.remove("hide");
48         }
49         function hisl() {
50             document.getElementById("cc1").classList.add("hide");
51             document.getElementById("cc2").classList.add("hide");
52         }
53     </script>
54 </body>
55 </html>

静态对话框

  1 <!DOCTYPE html>
  2 <html lang="en">
  3 <head>
  4     <meta charset="UTF-8">
  5     <title>Title</title>
  6     <style>
  7         body{
  8             margin: 0;
  9             background-color: #dddddd;
 10         }
 11         .w{
 12             margin: 0 auto;
 13              980px;
 14         }
 15         .pg-header{
 16             background-color: black;
 17             color: white;
 18             height: 48px;
 19         }
 20         .pg-body .menu{
 21             position: absolute;
 22             left: 200px;
 23              180px;
 24             background-color: white;
 25             float: left;
 26         }
 27         .pg-body .menu .active{
 28             background-color: #425a66;
 29             color: white;
 30         }
 31         .pg-body .fixed{
 32             position: fixed;
 33             top: 10px;
 34         }
 35         .pg-body .content{
 36             position: absolute;
 37             left: 385px;
 38             right: 200px;
 39             background-color: white;
 40             float: left;
 41         }
 42         .pg-body .content .item{
 43             height: 900px;
 44         }
 45     </style>
 46 
 47 </head>
 48 <body onscroll="Hua();">
 49     <div class="pg-header">
 50         <div class="w"></div>
 51     </div>
 52     <div class="pg-body">
 53         <div id="menu" class="menu">
 54             <ul>
 55                 <li>第一章</li>
 56                 <li>第二章</li>
 57                 <li>第三章</li>
 58             </ul>
 59         </div>
 60         <div id="content" class="content">
 61             <div class="item">床前明月管</div>
 62             <div class="item">疑是地上霜</div>
 63             <div class="item" style="height: 100px">我是郭德纲</div>
 64         </div>
 65     </div>
 66 
 67     <script>
 68         function Hua() {
 69             var xo = document.getElementById("menu");
 70             var huaGao = document.body.scrollTop;
 71             if (document.body.scrollTop>48){
 72                 xo.classList.add("fixed");
 73             }else {
 74                 xo.classList.remove("fixed");
 75             }
 76 
 77             var bod = document.body.offsetHeight;
 78             var conAbs = document.getElementsByClassName("content")[0].offsetHeight;
 79             var ck = document.documentElement.clientHeight;
 80 //            console.log((bod + conAbs) == (ck + huaGao));
 81             if ((bod + conAbs) == (ck + huaGao)) {
 82                 var lenLi = xo.getElementsByTagName("li");
 83                 for (var i=0;i<lenLi.length;i++){
 84                     if (i == lenLi.length - 1){
 85                         lenLi[i].className = "active";
 86                     }else {
 87                         lenLi[i].className = "";
 88                     }
 89                 }
 90                 return
 91             }
 92 
 93 
 94             var item = document.getElementById("content").children;
 95             for (var i=0;i<item.length;i++){
 96                 var currentItem = item[i];
 97                 var currentItemBodyTop = currentItem.offsetTop + currentItem.offsetParent.offsetTop;
 98                 var currentItemWindowTop = currentItemBodyTop - huaGao;
 99 
100                 var currentHeight = currentItem.offsetHeight;
101                 var bottomHeight = currentItemBodyTop + currentHeight;
102 
103                 var ziJi = xo.getElementsByTagName("li")[i];
104                 if (currentItemWindowTop<0 && huaGao < bottomHeight){
105                     ziJi.className = "active";
106                 } else {
107                     ziJi.className = "";
108                 }
109 
110             }
111         }
112 
113 
114     </script>
115 </body>
116 </html>

书签与章节

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>Title</title>
 6     <style>
 7         ul{
 8             list-style: none;
 9             padding: 0;
10             margin: 0;
11         }
12         ul li{
13             float: left;
14             background-color: #2459a2;
15             color: white;
16             padding: 8px 10px;
17         }
18         .clearfix:after{
19             display: block;
20             content: '.';
21             height: 0;
22             visibility: hidden;
23             clear: both;
24         }
25         .hide{
26             display: none;
27         }
28         .tab-menu .title{
29             background-color: #dddddd;
30         }
31         .tab-menu .title .active{
32             background-color: #0099dd;
33             color: black;
34         }
35         .tab-menu .content{
36             border: 1px solid #dddddd;
37             min-height: 150px;
38         }
39         ul li:hover {
40             cursor: pointer;
41         }
42     </style>
43 </head>
44 <body>
45     <div style=" 400px; margin: 0 auto;">
46         <div class="tab-menu">
47             <div class="title clearfix">
48                 <ul>
49                     <li target="h1" class="active" onclick="Show(this);">索尼</li>
50                     <li target="h2" onclick="Show(this);">谷歌</li>
51                     <li target="h3" onclick="Show(this);">腾讯</li>
52                 </ul>
53             </div>
54             <div id="content" class="content">
55                 <div con="h1">1...</div>
56                 <div con="h2" class="hide">2...</div>
57                 <div con="h3" class="hide">3...</div>
58             </div>
59         </div>
60     </div>
61 
62     <script>
63         function Show(ths) {
64             var Showli = ths;
65             var littarget = Showli.getAttribute("target");
66             var liclass = Showli.parentNode.children;
67             for (var i=0;i<liclass.length;i++) {
68                 if (liclass[i].getAttribute("target") == littarget) {
69                     liclass[i].classList.add("active");
70                 }else {
71                     liclass[i].classList.remove("active");
72                 }
73             }
74             var liycontent = document.getElementById("content").children;
75             for (var i=0;i<liycontent.length;i++) {
76                 if (liycontent[i].getAttribute("con") == littarget) {
77                     liycontent[i].className = "";
78                 }else {
79                     liycontent[i].className = "hide";
80                 }
81             }
82         }
83     </script>
84 </body>
85 </html>

菜单

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>Title</title>
 6     <style>
 7         .go-top {
 8             position: fixed;
 9             right: 28px;
10             bottom: 19px;
11              38px;
12             height: 40px;
13             background-color: aliceblue;
14         }
15         .hide {
16             display: none;
17         }
18     </style>
19 </head>
20 <body onscroll="Func();">
21     <div style="height: 2000px"></div>
22     <div id="i2" class="go-top hide">
23         <a onclick="GoTop();">返回顶部</a>
24     </div>
25     <script>
26         function Func() {
27             var scrolltop = document.body.scrollTop;
28             var ii = document.getElementById("i2");
29             if (scrolltop>300) {
30                 ii.classList.remove("hide");
31             }else {
32                 ii.classList.add("hide");
33             }
34         }
35         function GoTop() {
36             document.body.scrollTop = 0;
37         }
38     </script>
39 </body>
40 </html>

返回顶部