第30天 DOM物件操作

2021-09-20 08:32:24 字數 3859 閱讀 7921

js包括三部分:ecmascript、dom(文件物件)、bom(瀏覽器物件)

一、dom(文件物件)

dom樹

節點(元素、屬性、標籤、標記等都是節點)

二、訪問節點

documment.getelementbyid()

documment.getelementsbytagname()

documment.getelementsbyclassname()

//主流瀏覽器支援,ie6、7、8不相容

三、節點訪問關係

1、父節點parentnode

2、兄弟節點:

下乙個兄弟:

nextsibling//ie6、7、8認識

nextelementsibling//其他瀏覽器認識

同理:上乙個兄弟

previoussibling//ie6、7、8認識

previouselementsibling//其他瀏覽器認識

相容寫法

var one=document.getelementbyid("one");

var div=

one.nextelementsibling||one.nextsibling;//先普通瀏覽器再ie

div.style.backgroundcolor="red";

3、子節點

firstchild

firstelementchild

相容:one.firstelementchild||one.firstchild

lastchild

lastelementchild  同上

4、孩子節點

childnodes選出全部的孩子嫡出

childnodes:標準屬性,返回指定元素的子元素集合,包括html節點,所有屬性,文字節點

火狐、谷歌高版本會把換行也看作是子節點

利用nodetype==1時才是元素節點,通過這個來獲取元素節點

5、children選取所有的孩子,只包括元素節點(庶出)

ie6、7、8包含注釋節點,這個要避免開,去掉注釋

四、dom節點操作

新建、插入、刪除、轉殖節點等等

1、建立節點

var div document.createlement("li");//生成乙個新的li標籤

2、插入節點新增孩子到某個盒子的最後面

(2)insertbefore(插入的節點,參照節點);兩個引數必寫

demo.insertbefore(test,childrens[0]);//放到第乙個孩子的前面

如果第二個引數為null,則預設新生成的盒子放到最後面

demo.insertbefore(test,null);

3、移除節點

removechild() ; //孩子節點

demo.removechild(da);

4、轉殖節點

clonenode();

也就是複製節點

括號裡面可以加引數,如果裡面是true,深層複製,除了複製本盒子,還複製子節點

如果為false,淺層複製,只複製本節點,不複製子節點

案例:

1、孩子節點

1

doctype html

>

2<

html

lang

="en"

>

3<

head

>

4<

meta

charset

="utf-8"

>

5<

title

>孩子節點

title

>

6<

script

>

7window.onload

=function

()16}*/

1718

//children用法

19varul=

document.getelementbyid("ul

");20var

childrens

=ul.children;

//選擇所有孩子,只有元素節點

21alert(childrens.length);

2223}

24script

>

25head

>

26<

body

>

27<

ul id

="ul"

>

28<

li>123456

li>

29<

li>123456

li>

30<

li>123456

li>

31ul

>

32body

>

33html

>

2、dom節點操作

1

doctype html

>

2<

html

lang

="en"

>

3<

head

>

4<

meta

charset

="utf-8"

>

5<

title

>dom節點操作

title

>

6<

script

>

7window.onload

=function

()28

script

>

29head

>

30<

body

>

3132

<

div

id="demo"

>

33<

div

id="one"

>

div>

34<

div

id="xiongda"

>

div>

35div

>

3637

body

>

38html

>

第30天 DOM物件操作

js包括三部分 ecmascript dom 文件物件 bom 瀏覽器物件 一 dom 文件物件 dom樹 節點 元素 屬性 標籤 標記等都是節點 二 訪問節點 documment.getelementbyid documment.getelementsbytagname documment.get...

《30天自製作業系統》第4天

1.c語言與畫面顯示的練習 彙編與c 語言結合時能自由使用的寄存區只有 eax,ecx,edx3 個,其他寄存區用於記憶非常重要的值,只能讀不能寫。intel系列 cpu 8086 80186 286 386 486 pentium pentiumpro pentium2 pentium3 pent...

《30天自製作業系統》第6天

1.pic 可程式設計中斷控制器 pic 連線 8個中斷訊號,監視輸入管腳的 8個中斷訊號。主 pic irq0 irq7 irq2 連線到從 pic irq8 irq15 中斷發生後,cpu 命令pic傳送2 個位元組的資料,格式是 0xcd 0 cpu收到2 個位元組後把資料當做指令來執行。0x...