DOM的基本操作，節點的基本屬性

前言

作為小白一直在學習web的路上慢慢摸索，之前也不知道怎么寫一篇博客，但是，這不，第一篇博客就這么很突然地在一個午后決定開始寫了，最近在學習dom的相關知識，大概總結一下，

什么是DOM？

DOM是w3c標準，全稱Document Object Model，翻譯為檔案物件模型，DOM定義了表示和修改檔案所需的方法，DOM物件，即為宿主物件，由瀏覽器廠商定義，用來操作HTML和XML功能的一類物件的集合，也有人稱DOM是對HTML以及XML的標準編程介面，

DOM的基本操作

對于物件、陣列，我們的基本操作都為增刪改查插，對于DOM來說，也是相同，

增加

DOM的最基本的增有三種：

1.document.createElement();
//這個方法是創建一個元素節點，即標簽，但是生成的標簽在js里面，不會在頁面生成，我們平時用的較多，建議重點掌握，
2.document.createTextNode();//創建文本節點
3，document.createComment();//創建注釋節點
//DOM的增操作一般和插入操作一起

洗掉

DOM的洗掉有兩種：謀殺和自殺，

1.parent.removeChild(要被洗掉的標簽);
//相當于父殺子的謀殺，但實際上可以等同于剪切，被洗掉的值會被保留
ep:
var div = document.getElementsbyTagName('div')[0];//取出div標簽
var span = document.getElementsbyTagName('span')[0];
var strong = document.createElement('strong');//創建strong標簽
var i = document.creatElement('i');
div.insertBefore(strong,span);//把strong插入到span前面
div.insertBefore(i,strong);
div.removeChild(i);  //洗掉i
//運行結果為--> <i> <i>
2.child.remove();
//可以理解為一個人不想存在，然后抹殺了自己的存在，即自殺，洗掉了就不在存在
strong.remove();//strong的自我洗掉

修改

在DOM里面，修改即替換

方法如下：

parentNode.replaceChild(new，origin);
//用新的去替換舊的，原先舊的會被剪切出來

插入

DOM的插入操作對于我們來說會使用的十分頻繁，一定要好好掌握！共有兩種方法：

1.appendChild(標簽名);
//剪切操作，通過這個方法我們可以把一個創建好的標簽插入到另外一個標簽，可以理解為.push
ep：
var div = document.getElementsbyTagName('div')[0];//取出div標簽
var span = document.getElementsbyTagName('span')[0];
var strong = document.createElement('strong');//創建strong標簽
var i = document.creatElement('i');
div.appendChild(span);//把span放到div里面

2.insertBefore(a,b);
//這個方法的意思為在父級元素里面插入一個值，即在b之前插入a，insert a,before b，
div.insertBefore(strong,span);//在span前面插入strong
結果應該為：
<div>
<strong> <strong>
<span> <span>
<div>

查詢

DOM的查詢應該是我們重點掌握的物件，方法如下：

1.document.getElementById();
//通過id標簽去選出元素，注意：選出的是單個元素
2.document.getelementsByTagName();
//通過標簽名來選出一組元素
例如： 
var div = document.getElementsByTagName('div')[0];
//我們這時選出的是第一個div標簽
3.document.getElementsByClassName();
//通過類名來選出，但是IE8及以下不兼容
4.document.getElementsName();
//只對部分標簽生效（表單，表單元素，img，iframe），IE瀏覽器不支持
5.document.querySelector();//css選擇器，只能選出來一個，IE7及以下沒有這個方法
6.document.querySelectorAll();//同樣是css選擇器，可以選出來一組，IE7及以下沒有這個方法，
//注意，最后兩種方法還有一個缺點：被選出來的元素不是實時的，

dom節點的基本概念

根據w3c的dom標準，檔案中所有的內容都是節點，節點是dom的最小組成單元，瀏覽器會根據dom模型將檔案決議成一系列節點，因為所有節點最終都繼承自Node節點類，所以dom節點也可以稱之為Node節點，

dom節點型別

DOM節點的型別有：

元素節點									1
屬性節點									2
文本節點									3
注釋節點									8
Document								9
DocumentFragment   				        11   //檔案碎片

dom的基本屬性

常見的有四種，我們今天就來大概介紹一下這四個屬性值

DOM節點的基本屬性：

1.nodeName			//標簽名，大寫表示，只讀
2.nodeValue			//只有文本、注釋節點有，可讀寫
3.nodeType				//節點型別，只讀,它回傳的就是相對的數值
4.attributes				//Element節點集合的屬性 
//通過這個屬性我們可以改變相應屬性的屬性值，不能改變屬性名，但是我們一般不用這種方法，我們一般用 getAttribute 和 setAttribute 去取

在這里，我們也來介紹一種方法，來看這個節點有無子節點，

hasChildNodes(); //回傳值是true or false，

Element節點的一些屬性和方法

Element節點的兩個屬性：

1.innerHTML();//改變HTML里面的內容
如果我們要改變一個div標簽的值，代碼如下：
div.innerHTML = "";
//在""里放入你要修改的內容
2.innerTEXT();//可以直接取出標簽的文本內容，也可以賦值
//該屬性火狐不兼容，但是可以使用textConent(老版IE不可用）

Element節點的兩個方法：

1.getAttribute();//設定一個行間屬性，前面是屬性名，后面是屬性值 如果我們要給div設定一個行間屬性，就可以使用這種方法： div.getAttribute(‘class’,‘demo’);
2.setAttribute();//取這個行間屬性的值

在開發中我們可以使用getAttribute()方法來取data-log的值.
//如果我們要取出a的data-log
<div>
<a href = "#" data-log = "0">點我吧 <a>
<div>
js:
var div = document.getElementsByTagName('div')[0];
var a = document.getElementsByTagName('a')[0];
a.onclink = function() {
console.log(this.getAttribute('data-log'));
} 

DOM的非方法操作

通過一些非方法的操作，我們也能對節點進行查詢

遍歷節點數

1.parentNode；
//父節點，只有一個，遍歷節點數，最頂端的parentNode是#document
ep:strong.parentNode;

2.childNodes;//子節點們
ep:div.childNodes;

3.firstChild;//第一個子節點
ep:div.firstChild;

4.lastChild;//最后一個子節點
ep:div.lastChild;

5.nextSibling;//下一個兄弟節點
ep:span.nextSibling;

6.previousSibling;//上一個兄弟節點
ep:span.previousSibling;

基于元素節點樹的遍歷

1.parentElement;//回傳當前元素的父元素節點
	ep:div.parentElement;
2.children;//元素子節點
3.firstElementChild;//第一個元素節點
4.lastElementChild;//最后一個元素節點
5.nextElementSibling;//回傳后一個兄弟元素節點
6.previousElementsibling；//回傳前一個兄弟元素節點

//這6個除了children，其他的IE9及以下都不兼容

（感謝我的好友Mark對我學習的極大鼓勵和支持）