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);

標籤：JavaScript

上一篇：基于canvas的流程編輯器

下一篇：web端百度地圖API實作實時軌跡動態展現