1-DOM筆記（詳細）

1. 文檔對象模型，Document Object Model
    DOM是針對HTML和XML文檔的一個API（應用程序編程接口）,DOM描繪了一個層次化的節點樹，允許開發人員添加，移除，修改頁面的某一部分。1998年10月DOM1級規範成爲W3C的推薦標準，爲基本的文檔結構以及查詢提供了接口。但是要注意，IE中的所有DOM對象都是以COM對象的形式實現的。這意味着IE中的DOM對象與原生JavaScript對象的行爲或活動特點並不一致。

    DOM可以將任何HTML或XML文檔描繪成一個由多層節點構成的結構。節點分爲幾種不同的類型，每種類型分別表示文檔中不同的信息或標記。每個節點擁有各自的特點，數據和方法，另外也有與其他節點存在某種關係。節點之間的關係構成了層次，所有頁面標記則表現爲一個以特定節點爲根節點的樹形結構。

   1) Node類型
       DOM1級定義爲一個Node接口，該接口將由DOM中的所有節點類型實現。除了IE之外，在其他所有瀏覽器中都可以訪問到這個類型。javascript中所有的節點類型都繼承自Node類型，所有節點類型都共享着相同的基本屬性和方法。

        1. 節點關係
           屬性：
               nodeType
                   表示節點類型
                   Element 1;TextNode 3;Comment 8;Document 9
                   document 是Document構造函數的實例
                   document.body是Element構造函數的實例
                   document.body.firstChild 是Comment構造函數的實例
               nodeName
                   該屬性取決於節點類型，如果是元素類型，值爲元素的標籤名
               nodeValue
                   該屬性取決於節點類型，如果是元素類型，值有null
               childNodes
                   屬性，保存一個NodeList對象，NodeList是一種類數組對象用來保存一組有序的節點，NodeList是基於DOM結構動態執行查詢的結果，DOM結構變化可以自動反應到NodeList對象中。訪問時可以通過 [ ] 中括號訪問，也可以通過item()方法訪問。可以使用slice方法將NodeList轉換爲數組
                   var arr = Array.prototype.slice.call(nodes,0);
               parentNode 父親
                   指向文檔樹中的父節點。包含在childNodes列表中所有的節點都具有相同的父節點，每個節點之間都是同胞/兄弟節點。
               previousSibling 哥哥/姐姐
                   兄弟節點中的前一個節點
               nextSibling       弟弟/妹妹
                   兄弟節點中的下一個節點
               firstChild
                   childNodes列表中的第一個節點
               lastChild
                   childNodes列表中的最後一個節點
               ownerDocument
                   指向表示整個文檔的文檔節點。任何節點都屬於它所在的文檔，任何節點都不能同時存在於兩個或更多個文檔中。
           方法：
               hasChildNodes() 檢測是否有孩子節點
                   在包含一個或多個子節點的情況下返回true


        2. 操作節點
           以下四個方法都需要父節點對象進行調用!
           appendChild()
               向childNodes列表末尾添加一個節點。返回新增的節點。關係更新如果參數節點已經爲文檔的一部分，位置更新而不插入，dom樹可以看做是由一系列的指針連接起來的，任何DOM節點不能同時出現在文檔中的多個位置。
           insertBefore()
               第一個參數：要插入的節點；
               第二個參數：作爲參照的節點；
               被插入的節點會變成參照節點的前一個同胞節點,同時被方法返回。如果第二個參數爲null將會將該節點追加在NodeList後面
           replaceChild()
               第一個參數：要插入的節點；
               第二個參數：要替換的節點；
               要替換的節點將由這個方法返回並從文檔樹中被移除，同時由要插入的節點佔據其位置。
           removeChild()
               一個參數，即要移除的節點。
               移除的節點將作爲方法的返回值。

　　　其他方法,任何節點對象都可以調用。
           其他方法
           cloneNode()
               用於創建調用這個方法的節點的一個完全相同的副本。有一個參數爲布爾類型參數爲true時，表示深複製，即複製節點以及整個子節點數。參數爲false的時候，表示淺複製，只複製節點本身。該方法不會複製添加到DOM節點中的JavaScript屬性，例如事件處理程序等。該方法只複製特定,子節點，其他一切都不復制。但是IE中可以複製，建議標準相同，在複製之前，移除所有事件處理程序。
           normalize()
               處理文檔樹中的文本節點，由於解析器的實現或DOM操作等原因，可能會出現文本節點不包含文本，或者接連出現兩個文本節點，當在某個節點上調用了該方法，會刪除空白節點，會找到相鄰的兩個文本節點，並將他們合併爲一個文本節點。
   2) Document類型
       javascript通過使用Document類型表示文檔。在瀏覽器中，document對象是HTMLDocument的一個實例，表示整個HTML頁面。document對象是window對象的一個屬性，因此可以直接調用。HTMLDocument繼承自Document
        1. 文檔子節點
           可以繼承Node中所有的屬性和方法
           屬性：
               documentElement   始終指向HTML頁面中的<html>元素。
               body           直接指向<body>元素
               doctype           訪問<!DOCTYPE>, 瀏覽器支持不一致，很少使用
               title           獲取文檔的標題
               URL               取得完整的URL
               domain           取得域名，並且可以進行設置，在跨域訪問中經常會用到。
               referrer       取得鏈接到當前頁面的那個頁面的URL，即來源頁面的URL
                images           獲取所有的img對象，返回HTMLCollection類數組對象
                forms           獲取所有的form對象，返回HTMLCollection類數組對象
                links           獲取文檔中所有帶href屬性的<a>元素
        2. 查找元素
           getElementById()
               參數爲要取得元素的ID，如果找到返回該元素，否則返回null如果頁面中多個元素的ID值相同，只返回文檔中第一次出現的元素。如果某個表單元素的name值等於指定的ID，該元素也會被匹配。
           getElementsByTagName()
               參數爲要取得元素的標籤名，返回包含另個或者多個元素的NodeList，在HTML文檔中該方法返回的是HTMLCollection對象，與NodeList非常類似。可以通過[index/name],item(),namedItem(name)訪問
           getElementsByName()
               參數爲元素的name,返回符合條件的HTMLCollection
           getElementsByClassName()
               參數爲一個字符串，可以由多個空格隔開的標識符組成。當元素的class屬性值包含所有指定的標識符時才匹配。HTML元素的class屬性值是一個以空格隔開的列表，可以爲空或包含多個標識符。

   3) Element類型
        1. HTML元素
           所有的HTML元素都由HTMLElement類型表示，或者其子類型表示。每個HTML元素都應具有如下一些屬性以及html元素特有的屬性。
           id           元素在文檔中的唯一標識符
           title       有關元素的附加說明信息
           className   與元素class特性對應
           src           img元素具有的屬性
           alt           img元素具有的屬性
           lang       元素內容的語言代碼，很少使用！
           dir           語言方向，ltr,rtl 左到右，右到左、

           可以通過屬性訪問到該屬性對應的值
           1)取得屬性
                getAttribute() 參數爲實際元素的屬性名，calss,name,id,title,lang,dir一般只有在取得自定義特性值的情況下，纔會用該方法大多數直接使用屬性進行訪問，比如style,onclick
           2)設置屬性
                setAttribute() 兩個參數，第一個參數爲要設置的特性名，第二個參數爲對應的值。如果該值存在，替換。
           3)移除屬性
                removeAttribute() 移除指定的特姓
           4)attributes屬性，其中包含了一個NamedNodeMap,與NodeList類似。
                getNamedItem(name)
                removeNamedItem(name)    從列表中刪除nodeName屬性等於name的值
                 setNamedItem(node)     向列表中添加一個節點
                 item(pos)               返回位於數字pos位置處的節點
            5)創建元素
               createElement()        一個參數，要創建元素的標籤名。
            6)元素的子節點
                <ul>
                   <li>item1</li>
                   <li>item2</li>
                   <li>item3</li>
                </ul>
                ie8及一下版本瀏覽器   3個子節點
                其他瀏覽器           7個子節點
        2. 作爲文檔樹的文檔
           將文檔看做是Element對象樹，忽略文檔Text,Comment節點。Element中的屬性
           children                :類似於childNodes,返回NodeList對象，但是該對象中僅包含Element對象
           firstElementChild       :第一個孩子元素節點
           lastElementChild       :最後一個孩子元素節點
           nextElementSibling       :下一個兄弟元素節點
           previousElementSibling   :上一個兄弟元素節點
           childElementCount       :子元素的數量，返回值和children.length值相等
        3. 元素內容
            innerHTML         返回元素內容+html結構
            textContent     非ie瀏覽器只拿文本節點
            innerText       ie瀏覽器
            insertAjacentHTML()
               第一個參數爲位置(beforebegin,afterbegin,beforeend,afterend)，
              第二個參數爲內容
            <div id="target">this is element html</div>
         beforebegin     afterbegin         beforeend    afterend

   4) Text類型：文本類型
       文本節點。包含的是可以按照字面解釋的存文本內容。
       length
           文本長度
       appendData(text)
           追加文本
       deleteData(beginIndex,count)
           刪除文本
       insertData(beginIndex,text)
           插入文本
       replaceData(beginIndex,count,text)
           替換文本
       splitText(beiginIndex)
           從beginIndex位置將當前文本節點分成兩個文本節點
       substringData(beiginIndex,count)
           從beginIndex開始提取count個子字符串
       <span>這個是文本節點</span>

       document.createTextNode()
          創建文本節點，參數爲要插入節點中的文本

   5) Comment類型：註釋類型
   <div id = "myDiv"></div>
    Comment類型


2. 事件
    javascript與HTML之間的交互是通過事件實現的。事件就是文檔或瀏覽器窗口中發生的一些特定的交互瞬間。
    事件三要素：
       事件目標（event target）
           發生的事件與之相關聯或與之相關的對象
       事件處理程序（event handler）
           處理或相應事件的函數
       事件對象（event object）
           與特定事件相關且包含有關該事件詳細信息的對象。
   1) 事件流
        描述的是從頁面中接受事件的順序
        1. 事件冒泡
           事件開始由最具體的元素接收，然後逐級向上傳播到不具體的節點。
           <html>
               <head></head>
               <body>
                   <div>click me</div>
               </body>
           </html>
           當點擊了<div>元素，這個click事件會按照如下順序傳播
            div->body->html->document
           注意：IE8以及更早版本只支持事件冒泡。

        2. 事件捕獲
           不太具體的節點更早接收事件，具體的節點到最後接收事件。當點擊了<div>元素，按照如下方式觸發click事件
           document->html->body->div
        3. dom事件流
           “DOM2級事件”規定了事件流包括三個階段：事件捕獲階段，處理目標階段和事件冒泡階段。
           事件捕獲： document->html->body
           處理目標：事件處理
           事件冒泡： div->body->html->document
   2) 事件處理程序
        事件就是用戶或瀏覽器自身執行的某種動作，響應某個事件的函數爲事件處理程序，事件處理程序以"on"開頭(onclick,onload)
        1. HTML事件處理程序
           <input type="button" value="clickMe" onclick = "alert('is clicked')">
           不能在事件中使用未經轉義的HTML語法字符

           <input type="button" value="clickMe" onclick = "showMsg()">
           <script type="text/javascript">
               function showMsg(){
                   alert("is clicked");
               }
           </script>
           點擊按鈕會調用showMsg()函數，事件處理程序的代碼在執行時，有權訪問全局作用域的任何代碼。

        2. DOM0級事件處理程序
           通過javascript制定時間事件程序的傳統方式，將一個函數賦值給一個事件處理程序屬性。特點是簡單，跨瀏覽器。
            var btn = document.getElementById("btn");
           btn.onclick = function(){
               alert('cliked');
           }
           dom0級方法制定的事件處理程序被認爲是元素的方法，因此這個時候時間處理程序是在元素的作用域中運行，this指向當前元素。
            btn.onclick = null; //刪除事件處理程序
        3. DOM2級事件處理程序非IE 下
           addEventListener()
           事件綁定
               參數：
                   要綁定的事件名
                   作爲事件處理的函數
                 布爾值：true在捕獲階段調用事件處理程序；false在冒泡階段調用
           removeEventListener()
           事件刪除
               參數：
                   要刪除的事件名
                   作爲事件處理的函數
                 布爾值：true在捕獲階段調用事件處理程序；false在冒泡階段調用

           例如：
               //事件綁定
               var btn = document.getElementById("btn");
               btn.addEventListener("click",function(){
                   alert(this.id); //該函數在其依附的元素的作用域中運行。
               },false);
               //事件移除
               var btn = document.getElementById("btn");
               var handler = function(){
                   alert(this.id);
               }
               btn.addEventListener("click",handler,false);
               btn.removeEventListener("click",handler,false);//移除

               可以添加多個事件處理程序，並且按照添加她們的順序觸發。移除事件傳入的參數與添加處理程序時使用的參數相同，添加事件時如果使用匿名函數將無法刪除
       4. IE事件處理程序
           事件處理程序會在全局作用域中運行，因此this指向window對象。爲一個對象添加兩個相同的事件，事件處理程序的順序是按照添加相反順序進行處理
           attachEvent() 非IE
           事件綁定
               參數：
                   時間處理程序名稱
                   時間處理函數
           detachEvent()
           事件移除
               參數：
                   時間處理程序名稱
                   時間處理函數
           事件處理程序都被添加到冒泡階段

       5. 跨瀏覽器的事件處理程序
           見代碼 lib.js

   3) 事件對象
        1. dom中的事件對象
              在觸發DOM上的某個事件時，會產生一個事件對象event,這個對象包含着所有與事件相關的信息，默認會將event對象傳入到事件處理函數中
            dom.onclick = function(event){
                console.log(event);
            }
            dom.addEventListener("click",function(event){
                console.log(event);
            },false);

           屬性                類型               說明
           bubbles               Boolean       事件是否冒泡
           cancelable           Boolean       是否可以取消事件默認行爲
           currentTarget       Element       當前正在處理事件的那個元素
           eventPhase           Integer       調用事件處理程序的階段;1，捕獲 2，處於目標 3，冒泡
           target               Element       事件目標
           type               String       事件類型
           trusted               Boolean       事件是否是瀏覽器生成的
           preventDefault()   Function   取消事件的默認行爲
           stopPropagation()   Function   取消事件的進一步捕獲或者冒泡

           在事件處理程序內部，對象this始終等於currentTarget值，而target則只包含事件的實際目標。如果直接將事件處理程序指定給了目標元素，this,currentTarget,target包含相同的值。
        2. IE中的事件對象
           event可以作爲window對象的一個屬性存在，使用attachEvent添加事件處理程序的時候，event對象會作爲參數傳入事件處理函數中
            dom.onclick = function(){
               console.log(window.event);
               window.event.returnValue = false;//阻止默認行爲
               window.event.cancalBubble = true;//取消冒泡
            }
            dom.attachEvent("onclick",function(event){
               console.log(window.event);
            });
           屬性                   類型               說明
           cancelBubble       Boolean       是否取消時間冒泡,值爲true取消冒泡 stopPropagation()
           returnValue           Boolean       取消時間默認行爲,值爲false阻止 preventDefault()
           srcEvent           Element       時間的目標 target
           type               String       被觸發的時間的類型
       3. 跨瀏覽器的事件對象
           事件對象
           目標對象
           阻止默認行爲
           阻止冒泡

   4) 事件類型
        1. UI事件
           load
               當頁面完全加載後再window上觸發，當所有框架加載完畢時在框架集上觸發，當圖像加載完畢時在img元素上觸發，當嵌入的內容加載完時在<object>觸發
           unload
               當頁面完全卸載後再window上觸發，當所有框架都卸載後在框架集上觸發，當嵌入的內容卸載完畢後再<object>上觸發,(firefox不支持)
           select
               當用戶選擇文本框（<input>,<textarea>）中的一個或多個字符時
           resize
               當瀏覽器窗口被調整到一個新的高度或者寬度時，會觸發
           scroll
               當用戶滾動帶滾動條的元素中的內容時，在該元素上觸發resize,scroll會在變化期間重複被激發，儘量保持代碼簡單
        2. 焦點事件
           blur
               元素失去焦點的時候觸發
           focus
               元素獲得焦點的時候觸發，不支持冒泡
           //IE支持
           focusin
               與focus等價，支持冒泡
           focusout
               與blur等價，支持冒泡
        3. 鼠標與滾輪事件
           click
               點擊主鼠標按鈕或者按下回車按鍵的時候觸發。只有在一個元素上相繼發生mousedown,mouseup事件，纔會觸發click事件
           dblclick
               雙擊主鼠標按鈕時觸發.只有在一個元素上相繼觸發兩次click時間纔會觸發dbclick事件
           mousedown
               任意鼠標按鈕按下時觸發
           mouseup
               釋放鼠標按鈕觸發
           mousemove
               鼠標在元素內部移動的時候重複觸發
           mousewheel
               滾輪事件
           mouseover
               鼠標位於元素外部，將其首次移入另一個元素邊界之內時觸發【支持子元素】
           mouseenter
               鼠標光標從元素外部首次移動到元素範圍內激發，不冒泡。【不支持子元素】
           mouseout
               在位於元素上方的鼠標光標移入到另外一個元素中。【支持子元素】在被選元素上與mouseleave效果相同
           mouseleave
               在位於元素上方的鼠標光標移動到元素範圍之外時觸發，不冒泡【不支持子元素】
        4. 相關元素,event特殊屬性
           1.客戶區座標位置
               clientX,clientY 事件發生時，鼠標指針在視口中的水平和垂直座標
           2.頁面座標位置
               pageX,pageY 事件發生時，鼠標指針在頁面本身而非視口的座標，頁面沒有滾動的時候，pageX和pageY的值與clientX和clientY值相等
           3.屏幕位置
               screenX,screenY
           4.修改鍵
              值爲boolean類型，用來判斷對應的按鍵是否被按下
               shiftKey
               ctrlKey
               altKey
               metaKey
           5.鼠標按鈕
               mousedown,mouseup，該事件的event對象中包含了button屬性，表示按下或釋放的按鈕。
               0表示主鼠標按鈕
               1表示中間的滾動按鈕
               2表示次鼠標按鈕
        5. 鍵盤與文本事件
           keydown       按下鍵盤任意鍵時觸發，如果按住不放會重複觸發此事件
           keypress   按下鍵盤字符鍵時觸發，如果按住不放會重複觸發此事件
           keyup       釋放鍵盤上鍵時觸發
           當鍵盤事件發生時，event對象的keyCode屬性中會包含一個代碼與鍵盤上的特定鍵對應，對數字字母鍵，keyCode屬性的值與ASCII碼中對應的小寫字母和數字編碼相同
           詳見keycode.txt

1-DOM筆記（詳細）

一個開源且全面的C#算法實戰教程

C語言--右移左移

12款高效開源Wiki系統推薦，打造團隊知識管理利器

dotnet 基於 DirectML 控制檯運行 Phi-3 模型

常用的 Git 指令

sm4加密工具類

4-DOM中重寫-myslice-切割數組

5-行列布局+浮動元素+優先級

1-DOM筆記（詳細）

1-HTML發展及基本標籤

3-javascript流程語句和循環語句

Mac下配置sublime實現LaTeX

https://yachay.unat.edu.pe/blog/index.php?comment_area=format_blog&comment_component=blog&comment_co

linux以太網驅動總結