JS与DOM文档对象模型

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

一、查找元素

1、直接查找
	document.getElementById             根据ID获取一个标签
	document.getElementsByName          根据name属性获取标签集合
	document.getElementsByClassName     根据class属性获取标签集合
	document.getElementsByTagName       根据标签名获取标签集合

2、间接查找
	parentNode          // 父节点
	childNodes          // 所有子节点
	firstChild          // 第一个子节点
	lastChild           // 最后一个子节点
	nextSibling         // 下一个兄弟节点
	previousSibling     // 上一个兄弟节点
	 
	parentElement           // 父节点标签元素
	children                // 所有子标签
	firstElementChild       // 第一个子标签元素
	lastElementChild        // 最后一个子标签元素
	nextElementtSibling     // 下一个兄弟标签元素
	previousElementSibling  // 上一个兄弟标签元素

 二、操作

1、内容
	innerText   文本
	outerText
	innerHTML   HTML内容
	innerHTML  
	value       值

2、属性
	attributes                // 获取所有标签属性
	setAttribute(key,value)   // 设置标签属性
	getAttribute(key)         // 获取指定标签属性

3、class操作
	className                // 获取所有类名
	classList.remove(cls)    // 删除指定类
	classList.add(cls)       // 添加类

 1 <head>
 2     <meta charset="UTF-8">
 3     <title>Title</title>
 4 
 5     <style>
 6         .c1{
 7             position: fixed;
 8             top: 0;
 9             left: 0;
10             right: 0;
11             bottom: 0;
12             background-color: black;
13             opacity: 0.5;
14             z-index: 9;
15         }
16         .c2{
17             position: fixed;
18             width: 500px;
19             height: 400px;
20             top: 50%;
21             left: 50%;
22             margin-top: -250px;
23             margin-left: -200px;
24             background-color: white;
25             z-index: 10;
26         }
27 
28         .ul{
29             display: none;
30         }
31 
32     </style>
33 </head>
34 
35 <body>
36 
37     <div>
38         <input type="button" value="添加" onclick="RemoveModule()">
39     </div>
40 
41     <div id="i1" class="c1 ul"></div>
42 
43     <div id="i2" class="c2 ul">
44         <p>
45             <input type="text" name="host">
46         </p>
47         <p>
48             <input type="text" name="port">
49         </p>
50 
51         <p>
52             <input type="button" value="取消" onclick="AddModule()">
53         </p>
54     </div>
55 
56     <script>
57         function RemoveModule() {
58             document.getElementById("i1").classList.remove("ul");
59             document.getElementById("i2").classList.remove("ul");
60         }
61 
62         function AddModule() {
63             document.getElementById("i1").classList.add("ul");
64             document.getElementById("i2").classList.add("ul");
65         }
66 
67     </script>
68 
69 </body>
DOM实例 --- 添加、取消
 1 <body>
 2 
 3     <div>
 4         <input type="button" value="全选" onclick="SelectAll();">
 5         <input type="button" value="取消" onclick="CancelAll();">
 6         <input type="button" value="反选" onclick="Reserver();">
 7         <table border="1">
 8             <thead>
 9                 <tr>
10                     <th>选择</th>
11                     <th>主机</th>
12                     <th>端口</th>
13                 </tr>
14             </thead>
15             <tbody id="tb">
16                 <tr>
17                     <td><input type="checkbox" /></td>
18                     <td>10.10.10.1</td>
19                     <td>80</td>
20                 </tr>
21                 <tr>
22                     <td><input type="checkbox" /></td>
23                     <td>10.10.10.2</td>
24                     <td>89</td>
25                 </tr>
26                 <tr>
27                     <td><input type="checkbox" /></td>
28                     <td>10.10.10.3</td>
29                     <td>83</td>
30                 </tr>
31             </tbody>
32         </table>
33     </div>
34     <script>
35         function SelectAll() {
36             var trs = document.getElementById('tb').children;
37             for(var i=0;i<trs.length;i++){
38                 var current_td = trs[i].firstElementChild;
39                 var inp = current_td.getElementsByTagName("input")[0];
40                 inp.checked = true;   //勾选 
41             }
42         }
43         
44         function CancelAll() {
45             var trs = document.getElementById('tb').children;
46             for(var i=0;i<trs.length;i++){
47                 var current_td = trs[i].firstElementChild;
48                 var inp = current_td.getElementsByTagName("input")[0];
49                 inp.checked = false;  //取消勾选
50             }
51         }
52 
53         function Reserver() {
54             var trs = document.getElementById('tb').children;
55             for(var i=0;i<trs.length;i++){
56                 var current_td = trs[i].firstElementChild;
57                 var inp = current_td.getElementsByTagName("input")[0];
58                 if(inp.checked){
59                     inp.checked = false;
60                 }else{
61                     inp.checked = true;
62                 }
63             }
64         }
65         
66     </script>
67 
68 </body>
DOM实例 --- 多选、反选

光标移动到输入框时输入框中字体自动消失，移走时输入框出现字体

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>Title</title>
 6 
 7 </head>
 8 <body>
 9 
10     <input id="il" onfocus="Fecus()" onblur="Blur()" type="text" value="请输入关键字"> 
11     /* onfocus：光标焦距         onblur：光标离开 */
12 
13     /*当前版本可以用placeholder就可以实现Fecus()、Blur()的功能, 以前的版本不支持*/
14 
15     <script>
16         function Fecus() {
17             var tag = document.getElementById("il");
18             var val = tag.value;
19             if(val == "请输入关键字"){
20                 tag.value = "";
21             }
22         }
23 
24         function Blur() {
25             var tag = document.getElementById("il");
26             var val = tag.value;
27             if(val.length == 0){
28                 tag.value = "请输入关键字";
29             }
30         }
31 
32     </script>
33 </body>
34 </html>
input中默认字体

javascript变量分析

　　局部变量会提前申明变量，但不会提前赋值。

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>Title</title>
 6 
 7 </head>
 8 <body>
 9     <div onclick="func()">测试</div>
10 
11     <script>
12 
13 //        // 方法一：
14 //        xo = 'alex';
15 //        function func() {
16 //            var xo = 'eric';
17 //            function inner(){
18 //                console.log(xo);
19 //            }
20 //            inner();
21 //        }
22 //
23 //        func();
24 //
25 //        // 方法二：
26 //        xo = 'alex';
27 //        function func() {
28 //            var xo = 'eric';
29 //            function inner(){
30 //                console.log(xo);
31 //            }
32 //            var xo = "jack";
33 //            return inner;
34 //        }
35 //
36 //        var ret = func();
37 //        ret();
38 //
39 //        // 方法三：
40 //        xo = 'alex';
41 //        function func() {
42 //            var xo = 'eric';
43 //            function inner(){
44 //                console.log(xo);
45 //            }
46 //            return inner;
47 //        }
48 //
49 //        var ret = func();
50 //        ret()
51 
52         /*打印的是undefined,局部变量会提前申明变量，但不会提前赋值。*/
53         function func() {
54             console.log(xxoo);
55             var xxoo = "alex";
56         }
57 
58     </script>
59 </body>
60 </html>
js中变量分析

JavaScript中鼠标移动效果

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>Title</title>
 6 </head>
 7 <body>
 8     <table border="1" width="300px">
 9         <tr><td>1</td><td>2</td><td>3</td></tr>
10         <tr><td>1</td><td>2</td><td>3</td></tr>
11         <tr><td>1</td><td>2</td><td>3</td></tr>
12     </table>
13 
14     <script>
15         var myTrs = document.getElementsByTagName("tr");
16         var len = myTrs.length;
17         for(var i=0;i<len;i++){
18             myTrs[i].onmouseover = function(){
19 
20                 //myTrs[i].style.backgroundColor = "red";  作用域问题无法执行
21                 // 当this换行myTrs[i]时，i是不断变化的而函数内部代码暂时未执行
22                 // for循环后，i的结果始终是len的值
23 
24                 this.style.backgroundColor = "red";
25             };
26             myTrs[i].onmouseout = function () {
27               this.style.backgroundColor = "";
28             }
29         }
30     </script>
31 
32 </body>
33 </html>
鼠标移动效果

JavaScript中 addEventListener()与removeEventListener()用于处理指定和删除事件处理程序操作

addEventListener("事件名" , "事件处理函数" , "布尔值");
　　1：相同事件绑定和解除，需要使用共用函数；绑定和解除事件时 事件没有"on" 即onclick写成click
　　2：共用函数不能带参数；

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>Title</title>
 6 
 7     <style>
 8         #main{
 9             background-color: red;
10             width: 300px;
11             height: 400px;
12         }
13         #content{
14             background-color: pink;
15             width: 150px;
16             height: 200px;
17         }
18     </style>
19 </head>
20 <body>
21     <div id="main">
22         <div id="content"></div>
23     </div>
24 
25     <script>
26         var mymain = document.getElementById("main");
27         var mycontent = document.getElementById("content");
28         mymain.addEventListener("click",function () {
29             console.log("main")
30         }, true);
31         mycontent.addEventListener("click",function () {
32             console.log("content")
33         }, true)
34     </script>
35 </body>
36 </html>
addEventListener()实例
结论(main为外层，content为内层)：
　　1.true的触发顺序总是在false前面
　　2.如果多个均为true   则外层触发先于内层
　　3.如果多个均为false  则内层触发先于外层

功能：

　　菜单点击能查看菜单下子菜单的内容，其它未被点击的菜单将被收起其子菜单内容

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>Title</title>
 6 
 7     <style>
 8         .header{
 9             background-color: pink;
10         }
11 
12         .content{
13             min-height: 50px;
14         }
15 
16         .hidden{
17             display: none;
18         }
19     </style>
20 
21 
22 </head>
23 <body>
24     <div style="width: 200px; height: 500px; border: 1px solid #ddd;">
25         <div>
26             <div class="header">第一章</div>
27             <div class="content">内容</div>
28         </div>
29         <div>
30             <div id="i1" class="header">第二章</div>
31             <div class="content hidden">内容</div>
32         </div>
33         <div>
34             <div class="header">第三章</div>
35             <div class="content hidden">内容</div>
36             <div class="hidden">test</div>
37         </div>
38     </div>
39 
40     <script src="jquery-1.12.4.js"></script>
41 
42     <script>
43         //当前点击的标签$(this)
44         //获取某个标签的下一个标签
45         //获取某个标签的父标签
46         //获取所有的兄弟标签
47         //添加样式和移除样式
48 
49         //实现
50         $(".header").click(function () {
51 //            $(this).next().removeClass("hidden");
52 //            $(this).parent().siblings().find(".content").addClass("hidden");
53             $(this).next().removeClass("hidden").parent().siblings().find(".content").addClass("hidden");
54         })
55 
56 
57     </script>
58 
59 </body>
60 </html>
菜单

JavaScript变量解析顺序分析

<script>
    function t1(age) {
        console.log(age);
        var age = 27;
        console.log(age);
        function age() {}
        console.log(age);
    }

    t1(3);

//    分析：
//        active object ====> AO
//        1. 形式参数
//        2. 局部变量
//        3. 函数声明表达式
//
//        1. 形式参数
//            AO.age = undefined;
//            AO.age = 3;
//        2. 局部变量
//            AO.age = undefined;
//        3. 函数声明表达式(优先级最高)
//            AO.age = function();

</script>

　　

　　

posted @ 2018-03-26 14:31  ︻◣_蝸犇り~  阅读(216)  评论(0)  编辑  收藏  举报