JS與DOM文檔對象模型

時間 2019-11-16

原文原文鏈接

　　文檔對象模型（Document Object Model，DOM）是一種用於HTML和XML文檔的編程接口。它給文檔提供了一種結構化的表示方法，能夠改變文檔的內容和呈現方式。咱們最爲關心的是，DOM把網頁和腳本以及其餘的編程語言聯繫了起來。DOM屬於瀏覽器，而不是JavaScript語言規範裏的規定的核心內容。javascript

1、查找元素html

一、直接查找
	document.getElementById             根據ID獲取一個標籤
	document.getElementsByName          根據name屬性獲取標籤集合
	document.getElementsByClassName     根據class屬性獲取標籤集合
	document.getElementsByTagName       根據標籤名獲取標籤集合

二、間接查找
	parentNode          // 父節點
	childNodes          // 全部子節點
	firstChild          // 第一個子節點
	lastChild           // 最後一個子節點
	nextSibling         // 下一個兄弟節點
	previousSibling     // 上一個兄弟節點
	 
	parentElement           // 父節點標籤元素
	children                // 全部子標籤
	firstElementChild       // 第一個子標籤元素
	lastElementChild        // 最後一個子標籤元素
	nextElementtSibling     // 下一個兄弟標籤元素
	previousElementSibling  // 上一個兄弟標籤元素

2、操做java

一、內容
	innerText   文本
	outerText
	innerHTML   HTML內容
	innerHTML  
	value       值

二、屬性
	attributes                // 獲取全部標籤屬性
	setAttribute(key,value)   // 設置標籤屬性
	getAttribute(key)         // 獲取指定標籤屬性

三、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實例 --- 多選、反選

光標移動到輸入框時輸入框中字體自動消失，移走時輸入框出現字體jquery

 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()用於處理指定和刪除事件處理程序操做ide

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>