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


Posted in Javascript onJanuary 04, 2020

本文实例讲述了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.3water.com/code/HtmlJsRun测试上述代码运行效果。

希望本文所述对大家JavaScript程序设计有所帮助。

Javascript 相关文章推荐
一个很简单的办法实现TD的加亮效果.
Jun 29 Javascript
基于jQuery实现网页进度显示插件
Mar 04 Javascript
jQuery实现带动画效果的多级下拉菜单代码
Sep 08 Javascript
限制只能输入数字的实现代码
May 16 Javascript
angularjs实现首页轮播图效果
Apr 14 Javascript
原生js实现密码输入框值的显示隐藏
Jul 17 Javascript
ES6 javascript中Class类继承用法实例详解
Oct 30 Javascript
HTML5+JS+JQuery+ECharts实现异步加载问题
Dec 16 jQuery
浅谈webpack-dev-server的配置和使用
May 17 Javascript
vue基础之事件简写、事件对象、冒泡、默认行为、键盘事件实例分析
Mar 11 Javascript
微信小程序引入Vant组件库过程解析
Aug 06 Javascript
Vue实现浏览器打印功能的代码
Apr 17 Javascript
Angular8 实现table表格表头固定效果
Jan 03 #Javascript
uni-app 支持多端第三方地图定位的方法
Jan 03 #Javascript
Vue 实现登录界面验证码功能
Jan 03 #Javascript
JS实现扫码枪扫描二维码功能
Jan 03 #Javascript
file-loader打包图片文件时路径错误输出为[object-module]的解决方法
Jan 03 #Javascript
uni-app如何实现增量更新功能
Jan 03 #Javascript
JS实现简单日历特效
Jan 03 #Javascript
You might like
php页面消耗内存过大的处理办法
2013/03/18 PHP
基于php缓存的详解
2013/05/15 PHP
PHP中如何实现常用邮箱的基本判断
2014/01/07 PHP
PHP strip_tags()去除HTML、XML以及PHP的标签介绍
2014/02/18 PHP
php 读取输出其他文件的实现方法
2016/07/26 PHP
javascript入门·对象属性方法大总结
2007/10/01 Javascript
JQuery调webservice实现邮箱验证(检测是否可用)
2013/05/21 Javascript
js事件监听器用法实例详解
2015/06/01 Javascript
JQuery菜单效果的两个实例讲解(3)
2015/09/17 Javascript
理解Javascript图片预加载
2016/02/23 Javascript
js判断主流浏览器类型和版本号的简单实现代码
2016/05/26 Javascript
BootStrap table使用方法分析
2016/11/08 Javascript
Vue.js实现移动端短信验证码功能
2017/03/29 Javascript
jquery 一键复制到剪切板的实例
2017/09/20 jQuery
angular4自定义表单控件[(ngModel)]的实现
2018/11/23 Javascript
详解超简单的react服务器渲染(ssr)入坑指南
2019/02/28 Javascript
Python实现读写sqlite3数据库并将统计数据写入Excel的方法示例
2017/08/07 Python
python threading和multiprocessing模块基本用法实例分析
2019/07/25 Python
python读取ini配置的类封装代码实例
2020/01/08 Python
Python如何通过Flask-Mail发送电子邮件
2020/01/29 Python
tensorflow将图片保存为tfrecord和tfrecord的读取方式
2020/02/17 Python
python用pip install时安装失败的一系列问题及解决方法
2020/02/24 Python
查看已安装tensorflow版本的方法示例
2020/04/19 Python
如何使用python-opencv批量生成带噪点噪线的数字验证码
2020/12/21 Python
VSCode中autopep8无法运行问题解决方案(提示Error: Command failed,usage)
2021/03/02 Python
New Balance法国官方网站:购买鞋子和服装
2019/09/01 全球购物
视光学专业毕业生推荐信
2013/10/28 职场文书
教师岗位职责范本
2013/12/29 职场文书
30岁生日感言
2014/01/25 职场文书
专项法律服务方案
2014/06/11 职场文书
党委领导班子整改方案
2014/09/30 职场文书
2015年助残日活动总结
2015/03/27 职场文书
校运会加油稿大全
2015/07/22 职场文书
《秋思》教学反思
2016/02/23 职场文书
导游词之珠海轮廓
2019/10/25 职场文书
mysql全面解析json/数组
2022/07/07 MySQL