JavaScript 實現(xiàn)HTML DOM增刪改查操作的常見方法詳解

更新時間：2020年01月04日 11:41:33 作者：Sky_sunkang

這篇文章主要介紹了JavaScript 實現(xiàn)HTML DOM增刪改查操作,結合實例形式分析了JavaScript針對HTML DOM元素增刪改查常見操作技巧與使用注意事項,需要的朋友可以參考下

本文實例講述了JavaScript 實現(xiàn)HTML DOM增刪改查操作的常見方法。分享給大家供大家參考，具體如下：

首先 js 可以修改HTML中的所有元素和屬性，它還可以改變CSS樣式，并且可以監(jiān)聽到所有事件并作出響應，這篇筆記呢主要記錄如何對HTML元素進行增刪改查。

1 查找DOM

第一種方式是我們最常用的：通過ID查找：

<!DOCTYPE html>
<html>
<head>
  <title>learn javascript</title>
</head>
<body>
  <p id="demo">你能找到我么？</p>
  <button onclick="changeText()">點擊改變文本</button>
</body>
{{--js--}}
<script>
  function changeText(){
    document.getElementById("demo").innerHTML = "ok";
  }
</script>
</html>

注意：當我們寫HTML的時候盡量保證ID不重復。

第二種方法：通過標簽名查找

<!DOCTYPE html>
<html>
<head>
  <title>learn javascript</title>
</head>
<body>
  <div id="demo">
    <p>hi man</p>
  </div>
  <button onclick="changeText()">點擊改變文本</button>
</body>
{{--js--}}
<script>
  function changeText(){
    var element = document.getElementById("demo");
    var p = element.getElementsByTagName("p");
    p[0].innerHTML = "yo";
  }
</script>
</html>

↑ 我們取到了ID為demo的div，然后在div中有個p元素沒有ID屬性，我們就可以通過tagname來找到它。

第三種方法：通過class來查找

<!DOCTYPE html>
<html>
<head>
  <title>learn javascript</title>
</head>
<body>
  <div class="demo">
    <p>hi man</p>
  </div>
  <button onclick="changeText()">點擊改變文本</button>
</body>
{{--js--}}
<script>
  function changeText(){
    var element = document.getElementsByClassName("demo")[0];
    var p = element.getElementsByTagName("p");
    p[0].innerHTML = "yo";
  }
</script>
</html>

2 刪除DOM

<!DOCTYPE html>
<html>
<head>
  <title>learn javascript</title>
</head>
<body>
  <div id="div1">
    <p id="p1">hi man</p>
    <p id="p2">hello</p>
  </div>
  <button onclick="changeText()">點擊改變文本</button>
</body>
{{--js--}}
<script>
  function changeText(){
    var div1 = document.getElementById("div1");
    var p2 = document.getElementById("p2");
    div1.removeChild(p2);
  }
</script>
</html>

3 新增DOM

<!DOCTYPE html>
<html>
<head>
  <title>learn javascript</title>
</head>
<body>
  <div id="div1">
    <p id="p1">hi man</p>
    <p id="p2">hello</p>
  </div>
  <button onclick="changeText()">點擊改變文本</button>
</body>
{{--js--}}
<script>
  function changeText(){
    // 創(chuàng)建P標簽
    var p = document.createElement("p");
    // 創(chuàng)建文本節(jié)點
    var node = document.createTextNode("新的P標簽");
    // 創(chuàng)建屬性
    var attr = document.createAttribute("class");
    attr.value = "class p";
    // p標簽中添加文本節(jié)點
    p.appendChild(node);
    // p標簽中添加屬性
    p.setAttributeNode(attr);
    var div = document.getElementById("div1");
    // 添加p標簽
    div.appendChild(p);
  }
</script>
</html>

4 修改DOM

4.1 修改DOM的內容

<!DOCTYPE html>
<html>
<head>
  <title>learn javascript</title>
</head>
<body>
  <div id="div1">
    <p id="p1">hi man</p>
    <p id="p2">hello</p>
  </div>
  <button onclick="changeText()">點擊改變文本</button>
</body>
{{--js--}}
<script>
  function changeText(){
    var element = document.getElementById("p1");
    element.innerHTML = "更改內容";
  }
</script>
</html>

4.2 修改DOM的屬性

<!DOCTYPE html>
<html>
<head>
  <title>learn javascript</title>
</head>
<body>
  <a  rel="external nofollow" id="link">鏈接</a>
</body>
{{--js--}}
<script>
  var element = document.getElementById("link");
  element.;
</script>
</html>

4.3 修改DOM的CSS樣式

<!DOCTYPE html>
<html>
<head>
  <title>learn javascript</title>
</head>
<body>
  <p id="p1">文本</p>
</body>
{{--js--}}
<script>
  var element = document.getElementById("p1");
  element.style.color = "red";
</script>
</html>

感興趣的朋友可以使用在線HTML/CSS/JavaScript代碼運行工具：http://tools.jb51.net/code/HtmlJsRun測試上述代碼運行效果。

更多關于JavaScript相關內容感興趣的讀者可查看本站專題：《JavaScript操作DOM技巧總結》、《JavaScript頁面元素操作技巧總結》、《JavaScript事件相關操作與技巧大全》、《JavaScript查找算法技巧總結》、《JavaScript數(shù)據(jù)結構與算法技巧總結》、《JavaScript遍歷算法與技巧總結》及《JavaScript錯誤與調試技巧總結》

希望本文所述對大家JavaScript程序設計有所幫助。

您可能感興趣的文章:

詳解JavaScript的懶加載是如何實現(xiàn)的
懶加載（Lazy Loading）是一種在軟件開發(fā)中常用的優(yōu)化技術,它主要用于延遲加載資源,直到真正需要使用的時候才進行加載,這樣可以減少初始加載的時間和資源消耗,并提升用戶體驗,本文給大家詳細介紹了JavaScript的懶加載是如何實現(xiàn)的,需要的朋友可以參考下
2024-01-01
js模態(tài)對話框使用方法詳解
這篇文章主要為大家詳細介紹了js模態(tài)對話框的使用方法，具有一定的參考價值，感興趣的小伙伴們可以參考一下
2017-02-02
JavaScript實現(xiàn)4位隨機驗證碼的生成
這篇文章主要為大家詳細介紹了JavaScript實現(xiàn)4位隨機驗證碼的生成，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下
2021-01-01
js深拷貝和淺拷貝的深入講解
深拷貝和淺拷貝是面試中經(jīng)常出現(xiàn)的,主要考察對基本類型和引用類型的理解深度,這篇文章主要給大家介紹了關于js深拷貝和淺拷貝的相關資料,需要的朋友可以參考下
2022-05-05
淺析TypeScript 命名空間
命名空間一個最明確的目的就是解決重名問題。這篇文章主要介紹了TypeScript 命名空間的相關知識，本文通過實例詳解給大家介紹的非常詳細,需要的朋友可以參考下
2020-03-03
編輯浪子版表單驗證類
編輯浪子版表單驗證類...
2007-05-05
TypeScript之調用棧的實現(xiàn)
這篇文章主要介紹了TypeScript之調用棧的實現(xiàn)，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧
2019-12-12
在Vue.js中使用Mock數(shù)據(jù)的詳細教程與技巧
這篇文章主要介紹了在Vue.js項目中設置和使用Mock數(shù)據(jù)的方法,Mock數(shù)據(jù)在前端開發(fā)、單元測試和調試中非常有用,可以通過使用axios進行數(shù)據(jù)請求,文中通過代碼介紹的非常詳細,需要的朋友可以參考下
2024-12-12
scrollWidth,clientWidth,offsetWidth的區(qū)別
這篇文章主要介紹了scrollWidth,clientWidth,offsetWidth的區(qū)別,需要的朋友可以參考下
2015-01-01
JavaScript基礎教程之如何實現(xiàn)一個簡單的promise
看了些promise的介紹，還是感覺不夠深入，所以下面這篇文章主要給大家介紹了關于JavaScript基礎教程之如何實現(xiàn)一個簡單的promise的相關資料，文中通過示例代碼介紹的非常詳細，需要的朋友可以參考下
2018-09-09