JavaScript Dom物件的操作
阿新 • • 發佈：2021-11-05
目錄
- 一、核心
- 1、獲得Dom節點
- 2、更新節點
- 2.1 實戰演練
- 3、刪除Dom節點
- 4、插入節點
- 4.1 把已有的標籤進行插入
- 4.2 建立一個新的標籤,實現插入
- 4.3 在子節點前插入(insertBefore)
一、核心
瀏覽器就是一個Dom樹形結構
- 更新：更新Dom節點
- 遍歷Dom節點：獲得Dom節點
- 刪除：刪除一個Dom節點
- 新增：新增一個新的節點
要操作一個Dom節點,就必須要先獲得這個Dom節點
1、獲得Dom節點
<body>
<div id="div1">
<h1 id="h"></h1>
<p class="p1"></p>
</div>
</body>
//通過標籤
document.getElementsByTagName('h1');
//通過id
document.getElementById('div1');
//通過class
document.getElementsByClassName('p1');
//獲取父節點
h.parentElement
//獲取父節點下所有子節點
div1.children[index];
//獲取當前節點下,第一個節點
div1.firstElementChild;
//獲取當前節點下,最後一個節點
div1.lastElementChild;
//獲取下一個節點
pizoKr
2、更新節點
//更新文字的值 div1.innerText='修改文字的值'; //更新超文字,可以解析html文字標籤 div1.innerHTML='<strong>新增超文字</storng>'; //更新 div1.style.color='red'; div1.style.fontSize='20px';//駝峰命名 div1.style.padding='2em';
2.1 實戰演練
獲取id
沒改之前
操作input
3、刪除Dom節點
刪除節點步驟：
let self=document.getElementById('p1');//獲取刪除節點
let father=self.parentElement//獲取父節點
father.removeChild(self);//通過父節點刪除節點
注意：刪除節點的時候，子節點陣列是在不斷地變化,所以不能通過陣列靜態連續刪除,只能多次通過動態刪除
4、插入節點
我們獲得某個Dom節點,假設這個 Dom節點是空的,我們通過innerHtML就可以新增一個元素,但是這個Dom節點已經存pizoKr在元素了,就會產生覆蓋
<body> <p id="p1"></p> <div id="div1"> <p></p> <p>css</p> <p>C</p> </div> </body>
4.1 把已有的標籤進行插入
let a=document.getElementById('div1');
let b=document.getElementById('p1');
a.appendChild(b);//追加
效果
4.2 建立一個新的標籤,實現插入
let a=document.createElement('p');//建立節點 p標籤
a.id='p2';
a.innerText='hello,小沈';
let list=document.getElementById('div1');//獲取div1 id
list.appendChild(a);//追加子節點
//建立標籤節點
pizoKr let a=document.createElement('script');
a.setAttribute('type','text/javascript');
效果：
//建立style標籤節點
let st=document.createElement('style');
st.setAttribute('type','text/css');
st.innerHTML='body{ background-color:pink;}';
let hd=document.getElementsByTagName('head')[0];//注意點,head在第0個元素。
hd.appendChild(st);
效果：
4.3 在子節點前插入(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">
//擁有子節點的父節點
let list=document.getElementById('div1');
let self=document.getElementById('p2');
let befoe=document.getElementById('p1');
list.insertBefore(befoe,self);
</script>
</body>
</html>
pizoKr
效果：
到此這篇關於JavaScript Dom物件的操作的文章就介紹到這了,更多相關JavaScript Dom物件操作內容請搜尋我們以前的文章或繼續瀏覽下面的相關文章希望大家以後多多支援我們！