Web全棧20201128-js的dom操作1

1. 在後邊做程式 必須使用dom元素操作，dom的全名稱document object model(文字物件模型)，整個頁面瀏覽器上所有元素統稱為dom
   dom樹： window html（元素標籤） location history
   
2. 怎麼使用dom： 操作dom:
   2-1.dom元素獲取
   2-2.dom元素屬性操作（常規屬性操作）
   2-3.dom元素節點操作（子父節點之類的）
   2-4.dom元素的事件（行為）
   2-5.dom元素的方法操作
3. dom元素的八個方案：
   == js裡面dom元素操作不支援隱式迭代（js操作dom不能直接操作一堆，只能單個操作）==
   3-1.兩個固定獲取(靜態獲取)
   3-1-1類似css元素選擇器獲取：querySelector 獲取之後返回的物件為單個物件；querySelectorAll 返回的是多個物件 集合型別NodeList。返回的是一個集合 這個集合至少有一個子集。
   == queryselect為什麼只獲取第一個，因為第一個已經拿到了就不拿第二個了==
   3-1-2靜態獲取 指的是獲取頁面現有的元素，通過程式碼新增元素 獲取不到
   3-2.四個動態獲取
   3-2-1 //id 獲取返回是單個物件id要先有才能獲取
   var btnid=document.getElementById(“btninfo”);
   console.log(btnid);
   id獲取特殊用法
   id dom獲取特殊用法：
   //不用獲取 可以直接使用
   console.log(btninfo); //id是唯一的 可以直接使用做為當前dom
   3-2-2 //class獲取返回的是 HTMLCollection 集合型別 按照單個物件的用法來用 key:value
   var btnclass=document.getElementsByClassName(“btn”);
   console.log(btnclass[0]);
   console.log(btnclass[1]);
   3-2-3 //通過元素標籤名稱 獲取的返回HTMLCollection 集合使用同class
   var btnTagName=document.getElementsByTagName(“button”);
   console.log(btnTagName[0]);
   console.log(btnTagName[1]);
   3-2-4//通過Name屬性獲取 返回NodeList 集合 用法同上
   var btnName=document.getElementsByName(“but”);
   console.log(btnName[0]);
   console.log(btnName[1]);
   3-3. 兩個特殊獲取
   3-3-1//body
   var body=document.body;
   console.log(body);
   3-3-2//html
   var html=document.documentElement;
   console.log(html);
4. dom元素屬性操作（常規屬性操作是屬性獲取或者設定）
   操作dom屬性和方法
   4-1操作類名稱

console.log(btnlist.className);
    console.log(btnlist.name);
    console.log(btnlist.id);
    console.log(btnlist.style);
    console.log(btnlist.style.width);
    console.log(btnlist.style.height);

4-2設定屬性和設定類

btnlist.className="btn pink";
btnlist.classList.add("data");//類新增
    console.log(btnlist.classList.contains("pink"));//檢測元素是否具有某個類  true false
    console.log(btnlist.classList.length);//輸出元素類幾個
    btnlist.classList.remove("data");//移除類
    //toggle  引數2  boolean  true  新增   false  移除   可以不寫
    btnlist.classList.toggle("pink",false);//類別的切換

4-3style的設定 原生js可以單獨設定元素的行內樣式

  btnlist.style.width="200px";
    btnlist.style.backgroundPosition="0px 0px";
    btnlist.style.border="1px solid red";
    btnlist.style="width:120px;height:30px; color:blue;";

4-4元素的自定義屬性的設定和獲取
4-4-1設定自定義屬性：btnlist.setAttribute("cls-tag","自定義");
4-4-2獲取自定義屬性：console.log(btnlist.getAttribute("cls-tag"));
4-5獲取當前元素的非行內樣式方法：console.log(window.getComputedStyle(btnlist).backgroundColor);
（下面這個是報錯的，只能獲取非行內樣式，不能設定，因為 read-only 只讀的
//window.getComputedStyle(btnlist).width=“200px”;）

5. dom元素子父節點操作
   5-1獲取當前元素的同胞兄弟元素
   nextElementSibling 下一個元素
   previousElementSibling 前一個元素
   nextSibling 獲取的是下一個節點 （節點包含 符號 文字 元素）
   previousSibling 獲取的是上一個節點 （節點包含 符號 文字 元素）

    var btn=document.querySelector("#btn");
     console.log(btn.nextElementSibling);
    console.log(btn.nextSibling);
    console.log(btn.previousElementSibling);
    console.log(btn.previousSibling);

5-2獲取元素的子元素或者子節點
childElementCount 獲取子元素的個數
children 獲取的是子元素的集合
childNodes 獲取的是子節點集合

   console.log(menu.childElementCount);
    console.log(menu.children);

5-3 獲取元素的父元素或者父節點

console.log(liinfo.parentElement);
 console.log(liinfo.parentNode);

5-4對子元素進行遍歷

for (var i = 0; i < menu.children.length; i++) {
        console.log(menu.children[i]);
    }
 console.log(menu.childNodes);

5-5對子節點進行遍歷：子節點包含 文字符號，元素
節點屬性
nodeName 節點名稱
nodeType 節點型別由數字表示： 1 元素 3 符號等
nodeValue 節點值

for (var i = 0; i < menu.childNodes.length; i++) {
 console.log(menu.childNodes[i]);
 console.log(menu.childNodes[i].nodeType);
  console.log(menu.childNodes[i].nodeValue);
  if (menu.childNodes[i].nodeName.toLowerCase() == "li") {
        console.log(menu.childNodes[i].childNodes[0].nodeValue);
    }
}

5-6獲取子節點最後一個和第一個
firstChild 獲取元素裡面的第一個子節點
firstElementChild 獲取第一個子元素
lastChild 獲取元素的最後一個子節點
lastElementChild 獲取最後一個元素

console.log(menu.firstChild);
console.log(menu.firstElementChild);
console.log(menu.lastChild);
console.log(menu.lastElementChild);

5-7動態建立dom元素
5-7-1追加到頁面元素

var ipt = document.createElement("input");
    ipt.type = "button";
    ipt.value = "按鈕";
    console.log(ipt); 

5-7-2子元素追加方法：appendChild （追加到當前元素的內容之後）：document.body.appendChild(ipt);
5-8追加：
5-8-1insertBefore 將插入的節點 新增已有的節點之前
5-8-2insertAfter由 原生js不存在， 實現insertAfter的功能 插入到一個節點之後

document.body.insertBefore(ipt, userName);
    Node.prototype.insertAfter = function (newchild, refchild) {
        console.log(this);
        this.insertBefore(newchild, refchild.nextElementSibling);
    }
 document.body.insertAfter(ipt, userName);

5-9克隆節點：cloneNode 賦值節點 引數true 克隆子節點：document.body.appendChild(ipt.cloneNode());
5-9dom元素節點移除：document.getElementsByTagName("h1")[0].remove();

6. dom元素事件處理機制（dom元素事件流）
   原生js事件全部帶on
   dom元素事件：
   window事件：onload onresize onreload onerror oncontentmenu onscroll
   滑鼠事件： onmouseenter onmouseleave(水平離開) onmouseout(垂直+水平離開) onmouseup
   onmousdown onclick ondbclick onmousewheel onmouseover onmousemove
   鍵盤事件：onkeydown onkeyup onkeypress
   表單事件：onfocus onblur onsubmit onreset

7. jsdom元素如何新增事件
   7-1.直接在元素行內直接操作事件繫結， this指標指向當前事件的執行物件
   7-7-1

 function fun1() {
        //直接在元素上新增事件
        //函式不傳遞this  函式內部的this  指window
        //如果傳遞this  函式內部的引數  指當前的物件
        console.log("你點我", this);
    }
    function fun2() {
        console.log("你懸停我");
    }
    but.click();

7-1-2獲取元素的屬性

console.log(but.attributes);
 but.attributes.removeNamedItem("onmouseover");
 console.log(but.attributes.getNamedItem("onmouseover"));

7-1-3 設定屬性

  var args=document.createAttribute("onmousemove");
     args.nodeValue="fun2()";
     but.attributes.setNamedItem(args);
but.setAttribute("onmousemove",'fun2()');

7- 2.獲取dom元素動態繫結事件：this指標指向當前事件的執行物件

btn.onclick = function () {
        console.log("你點我", this);
        this.onclick = null;
    }
    btn.click();

自動觸發涉及事件的閉包 需要手動釋放記憶體

var btnlist = document.getElementsByClassName("btn");
 for (var i = 0; i < btnlist.length; i++) {
        /*  btnlist[i].onclick = function () {
         console.log("事件", this);
         }*/
        btnlist[i].onclick = method;
        function method() {
            console.log("事件", this);
        }
    }
    //手動釋放  記憶體
    btnlist = null;

7-3.事件監聽
7-3-1使用事件監聽新增
addEventListener 引數1：事件型別（不帶on） 引數2 事件執行的回撥函式 引數3：boolean型別值 捕獲 true 還是冒泡 false
addEventListener 是給同一個物件相同的事件 新增1個或多個執行行函式
addEventListener 裡面匿名函式種的this指向的是當前的執行物件

 btndata.addEventListener("click",function (){
     console.log("事件執行函式");
     });
     btndata.addEventListener("click",function (){
     console.log("事件執行函式");
     console.log(this)
     }

7-3-2事件監聽移除 需要函式的名稱

function m2() {
    console.log("事件執行函式");
    //事件監聽移除事件執行函式");
    console.log(this);
    //removeEventListener
    this.removeEventListener("click", m2);
}

8. 字串大小寫轉化：
   8-1 .toLowerCase() 轉化為小寫字串；toLocaleLowerCase() 轉化為當地表示方法的小寫字串；toUpperCase() 轉化為大寫字串；toLocaleUpperCase()轉化為當地大寫字串；
   8-2轉化為字串（錢的表示方法）

 var a = 1000000000000;
console.log(a.toLocaleString());//類似同String

9. 事件冒泡機制（由裡向外執行該事件）
   單機事件冒泡機制，子父元素具有click 執行的時候會冒泡執行
   處理事件冒泡
   return false; 原生js裡面不能阻止事件冒泡
   需要通過事件執行引數 event 來解決
   e.stopPropagation(); 處理事件冒泡
   e.cancelBubble=true; 處理事件冒泡
10. 事件的捕獲 冒泡

 block.addEventListener("click", function () {
        console.log("div的事件");
    }, true);
    block_btn.addEventListener("click", function () {
        console.log("button的事件");
    }, false);

11. 事件的委託：自身事件 委託給其他元素來執行

var nav = document.querySelector(".nav");
    nav.onclick = function (e) {
        //將事件委託給子元素來執行
        if (e.target.nodeName.toLowerCase() == "li") {
            console.log("事件執行");
        }
    }

總結：1. 在進行dom元素獲取的時候要注意獲取的元素是否已經初始化（需要考慮獲取的元素存在還是不存在）（根據頁面的載入順序來考慮）
2.原生js操作樣式 ，只能操作元素的行內樣式
3.切換的意思是有的就刪除，沒有的話就加上
4.非行內樣式只能獲取，不能設定
5. 元素不包含文字回車，節點包含，nextelementsibling
6. 打console.log時直接打括號裡面的內容，然後再.log
7.元素沒有節點值，輸出為null就是空格
8. 怎麼同時打三行一樣的內容