JavaScript

超轻量级php框架startmvc

JavaScript 实现HTML DOM增删改查操作的常见方法详解

更新时间:2020-09-29 04:12:01 作者:startmvc
本文实例讲述了JavaScript实现HTMLDOM增删改查操作的常见方法。分享给大家供大家参考,具体

本文实例讲述了JavaScript 实现HTML DOM增删改查操作的常见方法。分享给大家供大家参考,具体如下:

首先 js 可以修改HTML中的所有元素和属性,它还可以改变CSS样式,并且可以监听到所有事件并作出响应,这篇笔记呢 主要记录如何对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(){
 // 创建P标签
 var p = document.createElement("p");
 // 创建文本节点
 var node = document.createTextNode("新的P标签");
 // 创建属性
 var attr = document.createAttribute("class");
 attr.value = "class p";
 // p标签中添加文本节点
 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 href="https://www.baidu.com" rel="external nofollow" id="link">链接</a>
</body>
{{--js--}}
<script>
 var element = document.getElementById("link");
 element.href = "https://www.google.com";
</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测试上述代码运行效果。