基礎教程 8. JS DOM 操做和屬性操做

這是我參與8月更文挑戰的第7天，活動詳情查看：8月更文挑戰

1、js中獲取DOM的方法

1. document.getElementById()

根據id獲取dom元素對象

• 參數：元素id
• 返回值：根據元素id獲取到的DOM對象，若是獲取不到返回null
• 注意：
  1. 若是ID名字相同：那麼獲取第一個；
  2. getElementById的上下文必須是 document

var parent = document.getElementById('parent');
console.log(parent);

複製代碼

2. context.getElementsByTagName()

• 參數：標籤名
• 返回值：從context下獲取的指定標籤名的dom集合，獲取不到時空集合
• 注意：
  1. dom集合是類數組，有length有索引
  2. context不是指定的，當你想獲取哪一個元素的下的全部的指定標籤，哪一個元素就是context

var lis = parent.getElementsByTagName('li'); // 此時要獲取id爲parent的ul下的全部li，此時context就是parent
console.log(lis);
複製代碼

3. context.getElementsByClassName()

在上下文中，根據元素class名獲取元素集合

• 參數：元素class名字
• 返回值：帶有指定的class的元素集合，若是獲取不到則返回空集合
• context: 想要在哪一個元素下查找某些class類名的元素，哪一個元素就是context

var someBox = document.getElementsByClassName('some-box');
console.log(someBox);
var child = parent.getElementsByClassName('child');
console.log(child);
複製代碼

4. document.getElementsByName

經過name屬性獲取元素對象，通常用於表單元素集合

• 參數：元素name屬性
• 返回值：帶有指定那麼屬性值的元素集合，獲取不到就是空集合

var input = document.getElementsByName('inputField');
console.log(input);

複製代碼

5. document.documentElement

獲取html元素對象

console.log(document.documentElement);

複製代碼

6. document.body

獲取body元素對象

console.log(document.body);
複製代碼

獲取瀏覽器可視窗口的寬度和高度

• 寬度

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

複製代碼

• 高度

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

複製代碼

7. 根據選擇器獲取（能夠在移動端使用，在PC端有兼容性問題）

context.querySelector(css選擇器) 獲取一個
context.querySelectorAll(css選擇器) 獲取全部
複製代碼

var single = document.querySelector('.some-box');
console.log(single);

var multi = document.querySelectorAll('.some-box');
console.log(multi);
複製代碼

---

2、DOM節點屬性

1. 節點：

在html中全部的內容都成爲節點（node）。節點是經過節點屬性描述節點間關係的，而且根據節點關係獲取元素對象；

DOM節點：

節點	nodeType	nodeName	nodeValue
元素節點	1	大寫標籤名	null
文本節點	3	#text	文本內容
註釋節點	8	#comment	註釋內容
document	9	#document	null

注意：換行和空格都是文本節點

var parent = document.getElementById('parent');
var second = document.getElementById('second');
複製代碼

2. 節點屬性

2.1 childNodes

獲取當前元素節點的全部子節點，屬性值是集合

console.log(parent.childNodes);

複製代碼

2.2 children:

獲取當前元素的全部元素子節點，屬性值是集合

console.log(parent.children);
複製代碼

2.3 fistChild

獲取當前元素的第一個子節點

console.log(parent.firstChild);
複製代碼

2.4 firstElementChild

獲取當前元素的第一個元素子節點

console.log(parent.firstElementChild);
複製代碼

2.5 lastChild

獲取當前元素的最後一個子節點

console.log(parent.lastChild);
複製代碼

2.6 lastElementChild

獲取當前元素的最後一個元素子節點

console.log(parent.lastElementChild);
複製代碼

2.7 parentNode

獲取當前元素的父親節點，屬性值是對象

console.log(second.parentNode);
複製代碼

2.8 previousSibling

獲取上一個哥哥節點

console.log(second.previousSibling);
複製代碼

2.9 previousElementSibling

獲取上一個元素哥哥節點

console.log(second.previousElementSibling);
複製代碼

2.10 nextSibling

獲取下一個弟弟節點

console.log(second.nextSibling);
複製代碼

2.11 nextElementSibling

獲取下一個元素弟弟節點

console.log(second.nextElementSibling);
複製代碼

• 3. 根據節點間關係獲取到的節點集合或者節點都是DOM集合或者DOM元素對象。咱們能夠操做這些集合或者對象，和操做DOM集合或者對象如出一轍。

parent.lastElementChild.firstElementChild.innerHTML = '我是經過dom節點屬性添加的';
parent.lastElementChild.firstElementChild.style.backgroundColor = 'red';
parent.lastElementChild.firstElementChild.onclick = function () {
  alert('這是經過DOM節點屬性關係綁定的事件')
};

複製代碼

3、動態操做DOM

1. 動態建立DOM元素對象 document.createElement()

• 語法：document.createElement()
• 參數：html標籤名
• 返回值：新建立的DOM對象
• 注意：新建的DOM對象和咱們從頁面中獲取的DOM對象操做起來沒有任何區別；

var newDiv = document.createElement('div');
newDiv.innerHTML = '我是新建的div';
newDiv.style.backgroundColor = 'red';
newDiv.style.width = '100px';
newDiv.style.height = '100px';
newDiv.onclick = function () {
  alert('我是新建div的點擊事件');
};
複製代碼

• ? 頁面上並無這個div ? 爲啥沒有呢？ 由於這是咱們動態建立的，並無把這個新建的div插入到html文檔中。

2. appendChild: 向元素容器的末尾添加一個元素

• 語法：父級容器.appendChild(元素對象);
• 參數：元素對象（新建的也行、以前已經存在也行）
• 返回值：插入到容器中的元素對象

var wrapper = document.getElementById('wrapper');
var obj = wrapper.appendChild(newDiv);
複製代碼

3. 父級容器.removeChild()

var originExist = document.getElementById('originExist');
wrapper.removeChild(originExist);
複製代碼

3. insertBefore 把一個元素插入到指定容器中某一個元素標籤以前

• 語法：父級容器.insertBefore(newEle, oldEle);
• 參數：要插入的新元素, 已經存在於容器的老元素
• 返回值：newEle

var insertResutl = wrapper.insertBefore(newDiv, originExist);
console.log(insertResutl);
複製代碼

4. cloneNode() 把一個節點進行克隆

• 語法：curEle.cloneNode(false)
• 參數：true表示深度克隆，把當前節點的子孫節點都克隆；false表示只克隆當前節點
• 返回值：克隆出來的節點（）

var cloneWrapper = wrapper.cloneNode();
console.log(cloneWrapper === wrapper); #### false 克隆出來的和原來的節點沒有關係
複製代碼

4、屬性操做

1. setAttribute() 給當前元素設置html行內屬性

• 語法：元素對象.setAttribute(attr, value)
• 參數：屬性名, 屬性值

var attributeBox = document.querySelector('#attributeBox');
attributeBox.setAttribute('name', '江外琉璃');
attributeBox.setAttribute('age', '10');
複製代碼

2. getAttribute() 獲取當前html某個行內屬性的屬性值

• 語法：元素對象.getAttribute(attr)
• 參數：屬性名
• 返回值：屬性值

var name = attributeBox.getAttribute('name');
console.log(name);
複製代碼

3. removeAttribute() 刪除指定的屬性

• 語法：元素對象.removeAttribute(attr)
• 參數：要刪除的屬性

attributeBox.removeAttribute('age');
複製代碼