DOM基礎

//1,獲取指定標簽

//通過id查找對應的元素節點,返回一個具體的元素節點

var one= document.getElementById("one");

//通過class名查找對應的元素節點,返回一個 包含元素節點的數組

var ones= document.getElementsByClassName("son");

//通過標簽查找對應的元素節點,返回一個 包含元素節點的數組

var divs? = document.getElementsByTagName("div");

//通過選擇器獲取查找元素節點 返回一個包含元素節點的數組

var divall= document.querySelectorAll(".fat .son");

//通過選擇器獲取查找元素節點 返回一個包含元素節點,只返回找到的第一個

var divsel= document.querySelector(".fat .son");

//特殊的節點

//1,document 文檔節點

console.log(document);

//2,html 節點

console.log(document.documentElement);

//3,body 節點

console.log(document.body);

//4,head 節點

console.log(document.head);

//5,聲明節點

console.log(document.doctype);

//2,創建新的標簽

var imgM= document.createElement("img");

imgM.src= "img/1.jpg";

imgM.width= "300";

//3,添加標簽

var conDiv= document.getElementById("container");

//(1)A.appendChild(B) :將B元素添加到A元素內部的后邊 A 和 B 是父子關系

conDiv.appendChild(imgM);

//(2) A.insertBefore(B,C) 將B元素添加到 A元素中 C元素的前邊.A 和 B,C 是父子關系

var linkm= document.createElement("a");

linkm.innerText= "圖片";

linkm.innerHTML+= "拼在后邊";

var txt=document.createTextNode("最后邊");

linkm.appendChild(txt);

linkm.href= "###";

conDiv.insertBefore(linkm,imgM);

//4,替換標簽

var pM= document.createElement("p");

pM.innerHTML= "P";

//A.replaceChild(B,C) 用B元素 替換A元素中的C 元素

conDiv.replaceChild(pM,imgM);

//5,移除標簽

//A.removeChild(B):移除A元素中的B元素

conDiv.removeChild(linkm);


//一: 設置屬性

//第1種設置方式

// div.id = "oneDiv";

// div.className = "oneDiv";

//第2種設置方式

div.setAttribute("id","oneDiv");

div.setAttribute("class","oneDiv");

//二: 獲取屬性

//第一種獲取方式

console.log(div.id);

console.log(div.className);

//第二種獲取方式

console.log(div.getAttribute("id"));

console.log(div.getAttribute("class"));

//判斷元素是否擁有某一個屬性

var rel= div.hasAttribute("id");

if(rel){

console.log(div.getAttribute("id"));

}

//其他獲取操作

//(1)子節點

var childs= div.childNodes;

console.log(childs);

//(2)父節點

var parent= div.parentNode;

console.log(parent);

//(3)上一個兄弟節點

var sib= div.previousSibling;

console.log(sib);

//(4)下一個兄弟節點

var nextSib= div.nextSibling;

console.log(nextSib);

//(5)div 標簽的節點名(大寫形式放回當前元素節點名)

var name= div.nodeName;

console.log(name);

//(6)標簽的克隆

//A.cloneNode(deep):克隆A標簽,并返回.?

/*deep 是一個布爾值:

* ture 同時克隆A標簽中的內容及子元素

* false 只克隆當前A標簽

*?

*/

var val= div.cloneNode(true);

document.body.appendChild(val);

?著作權歸作者所有,轉載或內容合作請聯系作者
平臺聲明:文章內容(如有圖片或視頻亦包括在內)由作者上傳并發布,文章內容僅代表作者本人觀點,簡書系信息發布平臺,僅提供信息存儲服務。

推薦閱讀更多精彩內容

  • 工廠模式類似于現實生活中的工廠可以產生大量相似的商品,去做同樣的事情,實現同樣的效果;這時候需要使用工廠模式。簡單...
    舟漁行舟閱讀 7,827評論 2 17
  • DOM基礎 第一章:DOM概述 1.1DOM以及節點概念 ? 文檔對象模型DOM(Document Object ...
    LinDaiDai_霖呆呆閱讀 242評論 0 0
  • 單例模式 適用場景:可能會在場景中使用到對象,但只有一個實例,加載時并不主動創建,需要時才創建 最常見的單例模式,...
    Obeing閱讀 2,093評論 1 10
  • 第一部分 HTML&CSS整理答案 1. 什么是HTML5? 答:HTML5是最新的HTML標準。 注意:講述HT...
    kismetajun閱讀 27,632評論 1 45
  • 之前通過深入學習DOM的相關知識,看了慕課網DOM探索之基礎詳解篇這個視頻(在最近看第三遍的時候,準備記錄一點東西...
    微醺歲月閱讀 4,514評論 2 61