快捷導(dǎo)航

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

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

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

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

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

1 查找DOM

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

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

注意：當(dāng)我們寫(xiě)HTML的時(shí)候盡量保證ID不重復(fù)。

第二種方法：通過(guò)標(biāo)簽名查找

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

↑ 我們?nèi)〉搅薎D為demo的div，然后在div中有個(gè)p元素沒(méi)有ID屬性，我們就可以通過(guò)tagname來(lái)找到它。

第三種方法：通過(guò)class來(lái)查找

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

4 修改DOM

4.1 修改DOM的內(nèi)容

<!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()">點(diǎn)擊改變文本</button>
</body>
{{--js--}}
<script>
  function changeText(){
    var element = document.getElementById("p1");
    element.innerHTML = "更改內(nèi)容";
  }
</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代碼運(yùn)行工具：http://tools.jb51.net/code/HtmlJsRun測(cè)試上述代碼運(yùn)行效果。

更多關(guān)于JavaScript相關(guān)內(nèi)容感興趣的讀者可查看本站專題：《JavaScript操作DOM技巧總結(jié)》、《JavaScript頁(yè)面元素操作技巧總結(jié)》、《JavaScript事件相關(guān)操作與技巧大全》、《JavaScript查找算法技巧總結(jié)》、《JavaScript數(shù)據(jù)結(jié)構(gòu)與算法技巧總結(jié)》、《JavaScript遍歷算法與技巧總結(jié)》及《JavaScript錯(cuò)誤與調(diào)試技巧總結(jié)》

希望本文所述對(duì)大家JavaScript程序設(shè)計(jì)有所幫助。

您可能感興趣的文章: