獲取元素的方法

獲取元素

1、document.getElementById:通過ID名來獲取元素

兼容性： 在IE8以下，會默認把name屬性當做id來獲取； document : 文檔；上下問必須是document get : 獲取 element : 元素 By : 通過 Id : ID名字； id 是唯一的；不能重復

var oBox = document.getElementById("box");// {className:"",style:{}}
var oBox1 = oBox.getElementById("box1");
var a = document.getElementById("a");
console.log(a);
console.log(oBox);
console.log(
 
typeof oBox);// "object"
oBox.style.background = "red";

2、document.getElementsByTagName: 通過標簽名來獲取元素

是一個類數組集合

var arr = oBox.getElementsByTagName("span");// "標簽名"[{style:{}]
arr[0].style.background = "red";
console.log(arr);

3、document.getElementsByClassName(); 類數組集合；

IE8及以下是不兼容的； 通過class名字來獲取元素；

var a = document.getElementsByClassName("box");
console.log(a.length);
console.log(a);

4、document.getElementsByName;通過name屬性來獲取元素；

在IE9及以下，會默認把id名是a的獲取到；

var inputs = document.getElementsByName("a");
console.log(inputs);

5、document.documentElement 獲取當前的html

console.log(document.documentElement);
 
var htm = document.getElementsByTagName("html")
console.log(htm);

6、body :獲取頁面的body元素；

console.log(document.body); 獲取當前瀏覽器可視窗口高度和寬度

var winW= document.documentElement.clientWidth || document.body.clientWidth;
var winH = document.documentElement.clientHeight || document.body.clientHeight;
console.log(winW);
console.log(winH);

7、document.querySelector();

var divs = document.querySelector(".box");
// 如果是id名，前面需要加一個#;如果是class,要加一個.
console.log(divs);

8、document.querySelectorAll();

// querySelectorAll: 獲取所有的元素；
var divs = oBox.querySelectorAll("div")
console.log(divs);

DOM的節點和屬性

DOM的節點 ： 四種類型的節點；

節點的屬性

1、childNodes : 獲取當前元素所有的子節點；

console.log(parent.childNodes);
parent.childNodes[1].style.width="100px";

2、children : 獲取當前元素的子元素節點；

3、firstChild : 獲取第一子節點；

firstElementChild : 第一個子元素節點； 在IE8及以下，是不兼容的；

4、lastChild :獲取最後一個子節點

lastElementChild : 最後一個子元素節點；在IE8及以下，是不兼容的；
console.log(parent.firstChild);
console.log(parent.firstElementChild);

5、 previousSibling : 獲取上一個哥哥節點

previousElementSibling 封裝
var last = document.getElementById("last");
// 獲取上一個哥哥的元素節點；
function getBrother(curEle) {
var pre = curEle.previousSibling;
while(pre){
if(pre.nodeType ===1){//不滿足，說明不是一個元素；
return pre;
}
pre = pre.previousSibling;
}
return pre;
}
getBrother(sec);
getBrother(last)

6、 nextSibling : 獲取下一個弟弟節點

nextElementSibling : 獲取下一個元素弟弟節點；
console.log(sec.previousSibling);

7、parentNode: 獲取當前元素的父親節點；

console.log(sec.previousSibling);
console.log(sec.parentNode.previousElementSibling);
var body =document.body;
document 沒有父親節點；如果沒有獲取結果就是null；
console.log(body.parentNode.parentNode.parentNode);

動態操作DOM的方法

oBox.innerHTML = "函數很重要";

1.document.createElement;創建元素

var newDiv = document.createElement("div");
console.log(newDiv);

2.appendChild : 向元素的末尾添加子節點；

父級.appendChild(兒子)
oBox.appendChild(newDiv);
//Failed to execute ‘appendChild‘ on ‘Node‘: parameter 1 is not of type ‘Node‘
var div = document.getElementsByTagName("div")[1];

3.removeChild : 刪除子節點；

oBox.removeChild(div);
var span = document.createElement("span")

4.replaceChild : 替換節點；

父級.replaceChild(newChild,oldChild);
oBox.replaceChild(span,div);

5.insertBefore :把元素節點插入某個節點的前面

父級.insertBefore(newChild,oldChild)
oBox.insertBefore(span,div);

6.cloneNode : 復制節點；

// 參數： true： 深克隆，會當前元素以及子孫節點全部獲取到
// false或不傳 : 淺克隆，只會克隆當前元素節點；
console.log(oBox.cloneNode(true));
console.log(oBox.cloneNode());
var a = document.getElementsByClassName("a")[0];
var b = a.cloneNode(true);
oBox.appendChild(a);

7. set/get/remove Attribute : 設置自定義行內屬性；

//getAttribute 不能獲取通過元素.屬性 = 屬性值這種方式新增的屬性；可以獲取行內直接設置的，還有通過setAttribute 來設置的屬性；
div.setAttribute("name","time");
div.index = 100;
console.log(div.name);// undefined
div.setAttribute("na","ti")
如果獲取不到自定義行內屬性，結果就是null；
console.log(div.getAttribute("name"));
console.log(div.getAttribute("index"));
console.log(div.getAttribute("hh"));
// 移出行內屬性
div.removeAttribute("na");

JavaScript基礎知識（DOM）