DOM操做

1.什麼是window?瀏覽器

window:是一個全局對象, 表明瀏覽器中一個打開的窗口, 每一個窗口都是一個window對象

2.什麼是document?app

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

document: 表明當前窗口中的整個網頁,spa

document對象保存了網頁上全部的內容, 經過document對象就能夠操做網頁上的內容

3.什麼是DOM?code

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

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

因此學習DOM就是學習如何經過document對象操做網頁上的內容rem

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);
相關文章
相關標籤/搜索