什么是DOM
DOM，Document object model文檔對象模型。HTML DOM 定義了訪問和操作 HTML 文檔的標准方法。
DOM 將 HTML 文檔表達為樹結構，html文件中每個標簽都是一個節點node
對象是一種獨立的數據集合，有對應的屬性和方法。
而js中對象分類三種：
用戶定義對象
內建對象： Array Date Math
宿主對象： 由瀏覽器提供的
DOM中的節點分類
元素節點 element node
文本節點 text node
屬性節點 attribute node
獲取元素節點對象
getElementById() 獲取單個對象
milk
fruit
meat
var eleNode=document.getElementById('foodList');
console.log(eleNode); //獲取ul中所有內容
console.log(typeof eleNode); //object
getElementsByTagName() 獲取出來的是一個節點對象集合，有點像數組但是不是數組
var alist=document.getElementsByTagName('li');
console.log(alist); //HTMLCollection(3) [li.item, li.item, li]
getElementsByClassName() 方法返回文檔中所有指定類名的元素集合，作為 NodeList 對象。
var aitem=document.getElementsByClassName('item');
console.log(aitem); //HTMLCollection(2) [li.item, li.item]
getAttribute()獲取屬性值 。 有一個必須的參數，這個節點對象的名字。
我們這啥都有
var oP=document.getElementsByTagName('p')[0];
var title=oP.getAttribute('title');
var className=oP.getAttribute('class');
console.log(title);//打印出title的內容:選出你要吃的東西
console.log(className);//p里面沒有class：null
setAttribute()設置屬性值。
oP.setAttribute('id','box');//在p標簽加上一個id=box
節點屬性
nodeName節點名稱
nodeName屬性：
nodeName屬性:節點的名稱,是只讀
1、 元素節點的nodeName與標簽名相同
2、 屬性節點的nodeName與屬性的名稱相同
3、文本節點的nodeName永遠是#text
4、 文檔節點的nodeName永遠是#document
5、 注釋節點的nodeName永遠是#comment
nodeValue節點的值
nodeValue屬性:節點的值
1.元素節點的nodeValue是undefined 或null
2.文本節點的nodeValue是文本自身
3.屬性節點的nodeValue是屬性的值
nodeType節點類型
nodeType屬性:節點的類型,是只讀的。
以下常用的幾種節點類型:
元素類型 節點類型
元素 1
屬性 2
文本 3
注釋 8
文檔 9
示例：
ppt
yaner
lulu
lalla
這是一個文本
//1.元素節點
var aDiv=document.getElementById('box');
console.log(aDiv.nodeName+'*'+aDiv.nodeValue+'*'+aDiv.nodeType);//DIV*null*1
//2.獲取屬性節點
var gAttr=aDiv.attributes[0];
console.log(gAttr.nodeName+'*'+gAttr.nodeValue+'*'+gAttr.nodeType);//id*box*2
//3.獲取文本節點
var gText=aDiv.childNodes[0];
console.log(gText.nodeName+'*'+gText.nodeValue+'*'+gText.nodeType);//#text*這是一個文本*3
//4.獲取注釋節點
var gComment=aDiv.childNodes[1];
console.log(gComment.nodeName+'*'+gComment.nodeValue+'*'+gComment.nodeType);//#comment* 這是注釋 *8
//5.驗證文檔節點類型
console.log(document.nodeType);//9
節點對象常用屬性
獲取子節點childNodes
獲取第一個子節點firstChild
獲取最后一個子節點lastChild
獲取父節點parentNode
獲取上一個兄弟節點nextSibling
獲取下一個兄弟節點previousSibling
示例：無錫人流醫院哪家好 http://www.wxbhnkyy120.com/
//如果換行會被讀取為#text
console.log(aFather.childNodes);//獲取子節點
console.log(aFather.childNodes[0]);//獲取第一個子節點
console.log(aFather.firstChild);//獲取第一個子節點
console.log(aFather.childNodes[aFather.childNodes.length-1]);////獲取最后一個子節點
console.log(aFather.lastChild);//獲取最后一個子節點
console.log(aFather.parentNode);//獲取父節點整個body
console.log(aFather.parentNode.parentNode);//獲取父親的父親節點
console.log(aFather.nextSibling);//獲取下一個兄弟
console.log(aFather.previousSibling);//獲取上一個兄弟
動態地操作節點
1.創建節點createElement()
2.插入節點appendChild()
在參考節點前面插入insertBefore ( newNode, node)
3.刪除節點removeChild()
4.替換節點replaceChild()
5.創建文本節點createTextNode()
innerHTML可以在newNode節點中添加文本、標簽等等
示例：
i ppt