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