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數據結構與算法技巧總結》、《JavaScript遍歷算法與技巧總結》及《JavaScript錯誤與調試技巧總結》

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

您可能感興趣的文章: