JavaScript Dom對象的操作

Posted on by

一、核心

瀏覽器網頁就是一個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;
  //獲取下一個節點
   h.nextElementSibling;

2、更新節點

   //更新文本的值
   div1.innerText='修改文本的值'; 
   //更新超文本,可以解析html文本標簽
   div1.innerHTML='<strong>添加超文本</storng>';
   //更新css
   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節點已經存在元素瞭,就會產生覆蓋

 <body>
 
  <p id="p1">Java</p>
  <div id="div1">
  <p>JavaScript</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);//追加子節點
   //創建標簽節點
   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>

效果：

到此這篇關於JavaScript Dom對象的操作的文章就介紹到這瞭,更多相關JavaScript Dom對象操作內容請搜索WalkonNet以前的文章或繼續瀏覽下面的相關文章希望大傢以後多多支持WalkonNet！

推薦閱讀：