DOM example

一：DOM简介：

文档对象模型（Document Object Model，简称DOM），是W3C组织推荐的处理可扩展标志语言的标准编程接口。在网页上，组织页面（或文档）的对象被组织在一个树形结构中，用来表示文档中对象的标准模型就称为DOM。

二：节点树：

节点之间关系：

三：常用方法：

dom通过js对html进行动态的变化。主要就是查找元素和操作元素。

1：查找元素：

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

 间接查找元素：

 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  // 上一个兄弟标签元素

 2:操作：

内容：

1 innerText   获取元素的文本内容。
2 outerText
3 innerHTML   获取元素的html内容。
4 innerHTML  
5 value       获取元素的值。

三者区别：当一个元素内没有嵌套元素，此时text和html获取的内容是一致。当嵌套子元素的时候，html获取是子元素而text只是文本内容。

属性：

1 attributes                // 获取所有标签属性
2 setAttribute(key,value)   // 设置标签属性
3 getAttribute(key)         // 获取指定标签属性
/*
var atr = document.createAttribute("class");
atr.nodeValue="aclass";
document.getElementById('m').setAttributeNode(atr);
*/

标签操作：

创建标签：

方式一：

var tag = document.createElement('a')
tag.innerText = "evil"
tag.className = "2"
tag.href = "http://www.cnblogs.com/evil_liu"

方式二：

var tag = "<a class='c1' href='http://www.cnblogs.com/wupeiqi'>evilliu</a>"

操作标签：

 1 // 方式一
 2 var obj = "<input type='text' />";
 3 xxx.insertAdjacentHTML("beforeEnd",obj);
 4 xxx.insertAdjacentElement('afterBegin',document.createElement('p'))
 5  
 6 //注意：第一个参数只能是'beforeBegin'、 'afterBegin'、 'beforeEnd'、 'afterEnd'
 7  
 8 // 方式二
 9 var tag = document.createElement('a')
10 xxx.appendChild(tag)
11 xxx.insertBefore(tag,xxx[1])

样式操作：

1 var obj = document.getElementById('m')
2  
3 obj.style.fontSize = "22px";
4 obj.style.backgroundColor = "green";

位置操作：

 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

四：事件绑定：

注意：

1 对于事件需要注意的要点：
2 
3     this
4     event
5     事件链以及跳出
6 
7 this标签当前正在操作的标签，event封装了当前事件的内容。

1：事件绑定代码：

需求我们在输入框的时候，有默认内容，点击输入的时候消失。

code：

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>Title</title>
 6 </head>
 7 <body>
 8     <input type="text"  id="OK"  value="请输入关键字" onfocus="FOC()" onblur="BLU()"/>
 9     //onfocues  onblur表示事件触发。前一个表示聚焦，点鼠标点击input框执行操作，后一个当鼠标移开之后触发。
10     <script>
11         function FOC() {
12             var t=document.getElementById('OK');
13             if (t.value=='请输入关键字'){
14                 t.value=''
15             }
16         }
17         function BLU() {
18             var a=document.getElementById('OK');
19             if (a.value.trim().length==0){//判断输入的内容是否为空。
20                 a.value='请输入关键字'
21             }
22         }
23     </script>
24 </body>
25 </html>

2：模拟弹出框：

 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 !important;
 9         }
10         .shade{
11             position: fixed;
12             top:0;
13             bottom: 0;
14             left: 0;
15             right: 0;
16             /*background-color: black;*/
17             /*opacity: 0.6;*/
18             background-color: rgba(0,0,0,.6);
19             z-index: 1000;
20         }
21         .modal{
22             height: 200px;
23             width: 400px;
24             background-color: white;
25             position: fixed;
26             top: 50%;
27             left: 50%;
28             margin-left: -200px;
29             margin-top: -100px;
30             z-index: 1001;
31         }
32     </style>
33 </head>
34 <body>
35     <div id="o" style="width: 2000px"> </div>
36     <input  id='cc'type="button" value="点击" onclick="ADD()"/>
37     <div id="p" class="shade hide"></div>
38     <div id="l" class="modal hide" >
39         <a href="javascript:void(0)" onclick="HIDE()">取消</a><!--javascript:void(0)表示标签不执行任何操作相当于python里的pass
40         onclick 绑定点击事件-->
41     </div>
42     <script>
43         function ADD() {
44             var t=document.getElementById('p');
45             var t1=document.getElementById('l');
46             t.classList.remove('hide');//显示遮罩层和对话框
47             t1.classList.remove('hide');
48         }
49         function HIDE() {
50             var t=document.getElementById('p');
51             var t1=document.getElementById('l');
52             t.classList.add('hide');//显示遮罩层和对话框
53             t1.classList.add('hide');
54         }
55     </script>
56 </body>
57 </html>

返回顶部实现：

code：

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>Title</title>
 6     <style>
 7         .back{
 8             position: fixed;
 9             right: 20px;
10             bottom: 20px;
11             color: red;
12             font-family: "微软雅黑";
13         }
14         .hide{
15             display: none;
16         }
17     </style>
18 
19 </head>
20 <body onscroll="APPER()">//对于一个html来body和title都是唯一的。
21         <div style="height: 5000px;background-color: gray;"></div>
22         <div class=" back hide" id="back" onclick="BackTop()" >返回顶部</div>
23 <script>
24     function BackTop() {
25         document.body.scrollTop=0
26     }
27 
28     function APPER() {
29         var s=document.body.scrollTop;//必须在这里，触发的时候，才读取此时的高度。
30         var tag=document.getElementById('back');
31         console.log(s,tag);
32 
33         if (s >=100){
34 
35             tag.classList.remove('hide')
36         }else {
37             tag.classList.add('hide')
38         }
39     }
40 </script>
41 </body>
42 </html>

验证用户输入是否有效：

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>Title</title>
 6 </head>
 7 <body>
 8 <form action="http://www.baidu.com">
 9     <div>
10         <input type="text" id="username" />
11     </div>
12     <input type="submit" value="提交" onclick=" return CL()"/><!--当执行函数return值为true的时候，执行下一个事件
13     反之不执行。-->
14 </form>
15 <script>
16     function CL() {
17         var t=document.getElementById('username');
18         if ( t.value.length >0){
19             return true
20         }else {
21             alert('输入用户名不能为空')
22             return false
23         }
24     }
25 </script>
26 </body>
27 </html>
posted @ 2016-08-27 08:48  evil_liu  阅读(225)  评论(0)  编辑  收藏  举报