Web前端之DOM介紹

2022-06-10 04:00:12 字數 3527 閱讀 9472

什麼是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前端上鑽...