JavaScript Dom對(duì)象的操作
更新時(shí)間：2021年11月03日 14:20:30 作者：三架馬車
這篇文章主要介紹了JavaScript Dom對(duì)象的操作,文張以瀏覽器網(wǎng)頁(yè)就是一個(gè)Dom樹形結(jié)構(gòu)做為核心，然后根據(jù)核心進(jìn)行更新Dom節(jié)點(diǎn)、獲得Dom節(jié)點(diǎn)、刪除一個(gè)Dom節(jié)點(diǎn)、添加一個(gè)新的節(jié)點(diǎn)操作，下面文章是詳細(xì)內(nèi)容,需要的朋友可以參考以下
一、核心
瀏覽器網(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)文章
這篇文章主要為大家介紹了插件導(dǎo)致ECharts被全量引入的坑示例解析，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2022-09-09
這篇文章主要為大家介紹了JavaScript基礎(chǔ)之函數(shù)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下，希望能夠給你帶來幫助<BR>2021-12-12
制作特殊字的腳本...2006-06-06
一文詳解typeScript的extends關(guān)鍵字
這篇文章主要為大家介紹了typeScript的extends關(guān)鍵字使用示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2023-03-03
這篇文章主要介紹了微信小程序 跳轉(zhuǎn)方式總結(jié)的相關(guān)資料,需要的朋友可以參考下2017-04-04
PHP：微信小程序 微信支付服務(wù)端集成實(shí)例詳解及源碼下載
這篇文章主要介紹了微信小程序 微信支付服務(wù)端集成實(shí)例詳解及源碼下載的相關(guān)資料,需要的朋友可以參考下2017-01-01
這篇文章主要給大家分享js不常見操作運(yùn)算符總結(jié)，下面文章收i部分js操作運(yùn)算符得介紹,需要的朋友可以參考一下，希望對(duì)你有幫助2021-11-11
JavaScript?與?TypeScript之間的聯(lián)系
這篇文章主要介紹了?JavaScript?與?TypeScript之間的聯(lián)系,JavaScript,也稱為?JS,是一種符合?ECMAScript?規(guī)范的編程語(yǔ)言。這是一個(gè)高級(jí)別的、通常是即時(shí)編譯的、多范式的。TypeScript?是一種強(qiáng)類型、面向?qū)ο蟮木幾g語(yǔ)言，更多消息內(nèi)容,需要的朋友可以參考一下下面文章內(nèi)容2021-11-11
這篇文章主要介紹了微信小程序中form 表單提交和取值實(shí)例詳解的相關(guān)資料,需要的朋友可以參考下2017-04-04
JavaScript 對(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