DOM操作

1.什麼是window?

window：是一個全局對象, 代表瀏覽器中一個打開的視窗, 每個視窗都是一個window對象

2.什麼是document?

document是window的一個屬性, 這個屬性是一個對象

document: 代表當前視窗中的整個網頁,

document對象保存了網頁上所有的內容, 通過document對象就可以操作網頁上的內容

3.什麼是DOM?

DOM 定義了訪問和操作 HTML文檔(網頁)的標準方法

DOM全稱: Document Object Model, 即文檔模型對象

所以學習DOM就是學習如何通過document對象操作網頁上的內容

4.獲取Dom元素

• 通過id獲取指定元素：document.getElementById("");
• 通過class名稱獲取：document.getElementsByClassName("father");
• 通過name名稱獲取：document.getElementsByName("test");
• 通過標簽名稱獲取：document.getElementsByTagName("div");
• 通過選擇器獲取：document.querySelector("#box");  註意：（querySelector只會返回根據指定選擇器找到的第一個元素）　document.querySelectorAll(".father");  註意：（querySelectorAll會返回指定選擇器找到的所有元素）

5.節點

DOM對象(document), 這個對象以樹的形式保存了界面上所有的內容，HTML頁面每一部分都是由節點(標簽(元素),文本,屬性)

獲取指定節點中的第一個子節點
let oDiv = document.querySelector("div");
console.log(oDiv.firstChild);
獲取指定元素中的第一個子元素
console.log(oDiv.firstElementChild);

獲取指定節點中最後一個子節點
console.log(oDiv.lastChild);
獲取指定元素中最後一個子元素
console.log(oDiv.lastElementChild);

通過子元素獲取父元素/父節點
let item = document.querySelector(".item");
console.log(item.parentElement);
console.log(item.parentNode);
let parentEle = item.parentElement || item.parentNode;
console.log(parentEle);

獲取相鄰上一個節點
console.log(item.previousSibling);
獲取相鄰上一個元素
console.log(item.previousElementSibling);

獲取相鄰下一個節點
console.log(item.nextSibling);
獲取相鄰下一個元素
console.log(item.nextElementSibling);

6：節點的增刪改查

1.創建節點
let oSpan = document.createElement("span");
console.log(oSpan);
console.log(typeof oSpan);

2.添加節點
註意點: appendChild方法會將指定的元素添加到最後
let oDiv = document.querySelector("div");
oDiv.appendChild(oSpan)
let oA = document.createElement("a");
oDiv.appendChild(oA);

3.插入節點
let oSpan = document.createElement("span");
let oDiv = document.querySelector("div");
let oH1 = document.querySelector("h1");
let oP = document.querySelector("p");
oDiv.insertBefore(oSpan, oH1);
oDiv.insertBefore(oSpan, oP);

4.刪除節點
註意點: 在js中如果想要刪除某一個元素,元素是不能自殺的，只能通過對應的父元素來刪除
console.log(oSpan.parentNode);
oSpan.parentNode.removeChild(oSpan);
oDiv.parentNode.removeChild(oDiv);

5.克隆節點
註意點: cloneNode方法預設不會克隆子元素, 如果想克隆子元素需要傳遞一個true
let oDiv = document.querySelector("div");
let newDiv =  oDiv.cloneNode();
let newDiv =  oDiv.cloneNode(true);
console.log(newDiv);

7.元素屬性操作

原理：無論是通過document創建還是查詢出來的標簽,系統都會將元素包裝成一個對象返回給我們,系統在包裝這個對象的時候會自動將元素的屬性都包裝到這個對象中,所以只要拿到這個對象就可以拿到標簽屬性,操作標簽屬性

let oImg = document.querySelector("img");
let oImg = document.createElement("img");
console.dir(oImg);


// 1.如何獲取元素屬性
let oImg = document.querySelector("img");
// console.log(oImg.alt);
// console.log(oImg.getAttribute("alt"));
// 註意點: 通過對象.屬性名稱的方式無法獲取到自定義屬性的取值
//         通過getAttribute方法可以獲取到自定義屬性的取值
console.log(oImg.nj);
console.log(oImg.getAttribute("nj"));


// 2.如何修改元素屬性
let oImg = document.querySelector("img");
// oImg.title = "新的title";
// oImg.setAttribute("title", "新的title222");
// 註意點和獲取元素屬性一樣
// oImg.nj = "123";
oImg.setAttribute("nj", "123");


// 3.如何新增元素屬性
let oImg = document.querySelector("img");
// oImg.it666 = "itzb";
// 註意點: setAttribute方法如果屬性不存在就是新增, 如果屬性存在就是修改
oImg.setAttribute("it666", "itzb");


// 4.如何刪除元素屬性
let oImg = document.querySelector("img");
// oImg.alt = "";
// oImg.removeAttribute("alt");
// 註意點和獲取元素屬性一樣
// oImg.nj = "";
oImg.removeAttribute("nj");

 8.元素內容操作

// 1.獲取元素內容
1.innerHTML獲取的內容包含標簽, innerText/textContent獲取的內容不包含標簽
2.innerHTML/textContent獲取的內容不會去除兩端的空格, innerText獲取的內容會去除兩端的空格

let oDiv = document.querySelector("div");
console.log(oDiv.innerHTML);
console.log(oDiv.innerText);
console.log(oDiv.textContent);

// 2.設置元素內容
特點:
無論通過innerHTML/innerText/textContent設置內容, 新的內容都會覆蓋原有的內容
區別:
如果通過innerHTML設置數據, 數據中包含標簽, 會轉換成標簽之後再添加
如果通過innerText/textContent設置數據, 數據中包含標簽, 不會轉換成標簽, 會當做一個字元串直接設置

let oDiv = document.querySelector("div");
// oDiv.innerHTML = "123";
// oDiv.innerText = "456";
// oDiv.textContent = "789";
//  oDiv.innerHTML = "<span>我是span</span>";
//  oDiv.innerText = "<span>我是span</span>";
//  oDiv.textContent = "<span>我是span</span>";

setText(oDiv, "www.it666.com");
function setText(obj, text) {
    if("textContent" in obj){
        obj.textContent = text;
    }else{
        obj.innerText = text;
    }
}

9.操作元素樣式

// 1.設置元素樣式
let oDiv = document.querySelector("div");
// 第一種方式
// 註意點: 由於class在JS中是一個關鍵字, 所以叫做className
// oDiv.className = "box";
// 第二種方式
// 註意點: 過去CSS中通過-連接的樣式, 在JS中都是駝峰命名
// 註意點: 通過JS添加的樣式都是行內樣式, 會覆蓋掉同名的CSS樣式
oDiv.style.width = "300px";
oDiv.style.height = "300px";
oDiv.style.backgroundColor = "blue";

// 2.獲取元素樣式
let oDiv = document.querySelector("div");
// oDiv.style.width = "300px";
// 註意點: 通過style屬性只能過去到行內樣式的屬性值, 獲取不到CSS設置的屬性值
// console.log(oDiv.style.width);
// 註意點: 如果想獲取到CSS設置的屬性值, 必須通過getComputedStyle方法來獲取
// getComputedStyle方法接收一個參數, 這個參數就是要獲取的元素對象
// getComputedStyle方法返回一個對象, 這個對象中就保存了CSS設置的樣式和屬性值
let style = window.getComputedStyle(oDiv);
console.log(style.width);