什麼是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
示例：無錫**醫院哪家好
//如果換行會被讀取為#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()
在參考節點前面插入insertbefore ( newnode, node)
3.刪除節點removechild()
4.替換節點replacechild()
5.建立文字節點createtextnode()
innerhtml可以在newnode節點中新增文字、標籤等等
示例：i ppt
web前端 DOM操作
dom document object model 文件物件模型 乙個web頁面的展示，是由html標籤組合成的乙個頁面，dom物件實際就是將html標籤轉換成了乙個文件物件。可以通過dom物件中js提供的方法，找到html的各個標籤。通過找到標籤就可以操作標籤使頁面動起來，讓頁面動起來。dom操作...
Web前端學習JS篇之「DOM事件」
事件就是指為dom指定的動作，包括三個部分。事件源 比如按鈕，為了獲取事件源。事件型別 比如onclick，為了註冊事件 繫結事件 事件處理程式 為了新增事件執行的核心程式。1.傳統方式 onclick 這種方式無法繫結多個，後邊註冊的會覆蓋前邊註冊的。2.監聽方式 addeventlistener...
Web前端專業介紹
web前端專業介紹 公司官網 在pc通過瀏覽器來訪問公司 移動端網頁 在手機上來瀏覽公司資訊 小遊戲等 跨平台 編寫一次，即可支援pc android 和 ios 的執行 開發速度快 是當前所有程式語言中最容易入門，最有前景的方向 入門了，工作兩三年後的發展前景 web前端技術總監 在web前端上鑽...