JavaScript Dom對(duì)象的操作
一、核心
瀏覽器網(wǎng)頁(yè)就是一個(gè)Dom樹形結(jié)構(gòu)
- 更新:更新Dom節(jié)點(diǎn)
- 遍歷Dom節(jié)點(diǎn):獲得Dom節(jié)點(diǎn)
- 刪除:刪除一個(gè)Dom節(jié)點(diǎn)
- 添加:添加一個(gè)新的節(jié)點(diǎn)
要操作一個(gè)Dom
節(jié)點(diǎn),就必須要先獲得這個(gè)Dom
節(jié)點(diǎn)
1、獲得Dom節(jié)點(diǎn)
<body> <div id="div1"> <h1 id="h"></h1> <p class="p1"></p> </div> </body>
//通過標(biāo)簽 document.getElementsByTagName('h1'); //通過id document.getElementById('div1'); //通過class document.getElementsByClassName('p1'); //獲取父節(jié)點(diǎn) h.parentElement //獲取父節(jié)點(diǎn)下所有子節(jié)點(diǎn) div1.children[index]; //獲取當(dāng)前節(jié)點(diǎn)下,第一個(gè)節(jié)點(diǎn) div1.firstElementChild; //獲取當(dāng)前節(jié)點(diǎn)下,最后一個(gè)節(jié)點(diǎn) div1.lastElementChild; //獲取下一個(gè)節(jié)點(diǎn) h.nextElementSibling;
2、更新節(jié)點(diǎn)
//更新文本的值 div1.innerText='修改文本的值'; //更新超文本,可以解析html文本標(biāo)簽 div1.innerHTML='<strong>添加超文本</storng>'; //更新css div1.style.color='red'; div1.style.fontSize='20px';//駝峰命名 div1.style.padding='2em';
2.1 實(shí)戰(zhàn)演練
獲取id
沒改之前
操作input
3、刪除Dom節(jié)點(diǎn)
刪除節(jié)點(diǎn)步驟:先獲取父節(jié)點(diǎn),再通過父節(jié)點(diǎn)刪除自己
let self=document.getElementById('p1');//獲取刪除節(jié)點(diǎn) let father=self.parentElement//獲取父節(jié)點(diǎn) father.removeChild(self);//通過父節(jié)點(diǎn)刪除節(jié)點(diǎn)
注意:刪除節(jié)點(diǎn)的時(shí)候,子節(jié)點(diǎn)數(shù)組是在不斷地變化,所以不能通過數(shù)組靜態(tài)連續(xù)刪除,只能多次通過動(dòng)態(tài)刪除
4、插入節(jié)點(diǎn)
我們獲得某個(gè)Dom節(jié)點(diǎn),假設(shè)這個(gè) Dom節(jié)點(diǎn)是空的,我們通過innerHtML
就可以添加一個(gè)元素,但是這個(gè)Dom
節(jié)點(diǎn)已經(jīng)存在元素了,就會(huì)產(chǎn)生覆蓋
<body> <p id="p1">Java</p> <div id="div1"> <p>JavaScript</p> <p>css</p> <p>C</p> </div> </body>
4.1 把已有的標(biāo)簽進(jìn)行插入
let a=document.getElementById('div1'); let b=document.getElementById('p1'); a.appendChild(b);//追加
效果
4.2 創(chuàng)建一個(gè)新的標(biāo)簽,實(shí)現(xiàn)插入
let a=document.createElement('p');//創(chuàng)建節(jié)點(diǎn) p標(biāo)簽 a.id='p2'; a.innerText='hello,小沈'; let list=document.getElementById('div1');//獲取div1 id list.appendChild(a);//追加子節(jié)點(diǎn) //創(chuàng)建標(biāo)簽節(jié)點(diǎn) let a=document.createElement('script'); a.setAttribute('type','text/javascript');
效果:
//創(chuàng)建style標(biāo)簽節(jié)點(diǎn) let st=document.createElement('style'); st.setAttribute('type','text/css'); st.innerHTML='body{ background-color:pink;}'; let hd=document.getElementsByTagName('head')[0];//注意點(diǎn),head在第0個(gè)元素。 hd.appendChild(st);
效果:
4.3 在子節(jié)點(diǎn)前插入(insertBefore)
<html> <head> <meta charset="utf-8"> <title></title> </head> <body> <p id="p1">Java</p> <div id="div1"> <p id="px">JavaScript</p> <p id='p2'>css</p> <p id="p3">C</p> </div> <script type="text/javascript"> //擁有子節(jié)點(diǎn)的父節(jié)點(diǎn) let list=document.getElementById('div1'); let self=document.getElementById('p2'); let befoe=document.getElementById('p1'); list.insertBefore(befoe,self); </script> </body> </html>
效果:
到此這篇關(guān)于JavaScript Dom對(duì)象的操作的文章就介紹到這了,更多相關(guān)JavaScript Dom對(duì)象操作內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家!
相關(guān)文章
一文詳解typeScript的extends關(guān)鍵字
這篇文章主要為大家介紹了typeScript的extends關(guān)鍵字使用示例詳解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪2023-03-03PHP:微信小程序 微信支付服務(wù)端集成實(shí)例詳解及源碼下載
這篇文章主要介紹了微信小程序 微信支付服務(wù)端集成實(shí)例詳解及源碼下載的相關(guān)資料,需要的朋友可以參考下2017-01-01JavaScript?與?TypeScript之間的聯(lián)系
這篇文章主要介紹了?JavaScript?與?TypeScript之間的聯(lián)系,JavaScript,也稱為?JS,是一種符合?ECMAScript?規(guī)范的編程語言。這是一個(gè)高級(jí)別的、通常是即時(shí)編譯的、多范式的。TypeScript?是一種強(qiáng)類型、面向?qū)ο蟮木幾g語言,更多消息內(nèi)容,需要的朋友可以參考一下下面文章內(nèi)容2021-11-11JavaScript 對(duì)象創(chuàng)建的3種方法
這篇文章主要給大家分享的時(shí)JavaScript 對(duì)象創(chuàng)建的3種方法,在 JavaScript中,對(duì)象是一組有屬性名和屬性值組成的無序集合,對(duì)象的創(chuàng)建可以通過對(duì)象字面量、new 關(guān)鍵字 和Object.create()函數(shù)來創(chuàng)建。2021-11-11