JavaScript基礎知識（DOM）

標籤：文本   nts   next   elements   元素   col   自訂   other   body   

擷取元素的方法要操作誰，就要先擷取誰；擷取元素1、document.getElementById:通過ID名來擷取元素

相容性： 在IE8以下，會預設把name屬性當做id來擷取；document : 文檔；上下問必須是documentget : 擷取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的節點 ： 四種類型的節點；

TYPE	nodeType	nodeName	nodeValue
元素節點	1	大寫的標籤名	null
文本節點	3	text	常值內容
注釋節點	8	comment	注釋內容
document	9	document	null

空格和換行都是文本節點；節點的屬性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);// undefineddiv.setAttribute("na","ti")如果擷取不到自訂行內屬性，結果就是null；console.log(div.getAttribute("name"));console.log(div.getAttribute("index"));console.log(div.getAttribute("hh"));// 移出行內屬性div.removeAttribute("na");

JavaScript基礎知識（DOM）