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 相关文章推荐
图片之间的切换
Jun 26 Javascript
apycom出品的jQuery精美菜单破解方法
Feb 18 Javascript
Javascript仿新浪游戏频道鼠标悬停显示子菜单效果
Aug 21 Javascript
关于cookie的初识和运用(js和jq)
Apr 07 Javascript
javascript实现延时显示提示框特效代码
Apr 27 Javascript
使用BootStrap实现悬浮窗口的效果
Dec 13 Javascript
jQuery设置图片等比例缩小的方法
Apr 29 jQuery
React应用中使用Bootstrap的方法
Aug 15 Javascript
详解如何配置vue-cli3.0的vue.config.js
Aug 23 Javascript
Vue封装的可编辑表格插件方法
Aug 28 Javascript
layui 实现表格某一列显示图标
Sep 19 Javascript
angular8和ngrx8结合使用的步骤介绍
Dec 01 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 中include()与require()的对比
2006/10/09 PHP
PHP新手上路(十)
2006/10/09 PHP
PHP 简易输出CSV表格文件的方法详解
2013/06/20 PHP
关于PHP自动判断字符集并转码的详解
2013/06/26 PHP
thinkphp数据查询和遍历数组实例
2014/11/28 PHP
PHP判断上传文件类型的解决办法
2015/10/20 PHP
PHP上传文件及图片到七牛的方法
2018/07/25 PHP
实例讲解php实现多线程
2019/01/27 PHP
PHP的new static和new self的区别与使用
2019/11/27 PHP
CSS中简写属性要注意TRouBLe的顺序问题(避免踩坑)
2021/03/09 HTML / CSS
基于jQuery的一个扩展form序列化到json对象
2010/12/09 Javascript
jquery 查找select ,并触发事件的实现代码
2011/03/30 Javascript
运用JQuery的toggle实现网页加载完成自动弹窗
2014/03/18 Javascript
vue的toast弹窗组件实例详解
2018/05/14 Javascript
bootstrap table实现合并单元格效果
2018/12/24 Javascript
详解element-ui中form验证杂记
2019/03/04 Javascript
如何让微信小程序页面之间的通信不再变困难
2019/06/03 Javascript
在VUE中使用lodash的debounce和throttle操作
2020/11/09 Javascript
Python中实现从目录中过滤出指定文件类型的文件
2015/02/02 Python
为Python程序添加图形化界面的教程
2015/04/29 Python
使用Python实现BT种子和磁力链接的相互转换
2015/11/09 Python
Django自定义插件实现网站登录验证码功能
2017/04/19 Python
Python正则表达式知识汇总
2017/09/22 Python
python使用time、datetime返回工作日列表实例代码
2019/05/09 Python
Python笔记之工厂模式
2019/11/20 Python
wxpython多线程防假死与线程间传递消息实例详解
2019/12/13 Python
PyQt5 closeEvent关闭事件退出提示框原理解析
2020/01/08 Python
python识别验证码图片实例详解
2020/02/17 Python
会计系毕业个人自荐信格式
2013/09/23 职场文书
工程班组长岗位职责
2013/12/30 职场文书
阳光体育活动总结
2014/04/30 职场文书
2014年“四风”问题个人整改措施
2014/09/17 职场文书
乡镇领导班子四风对照检查材料
2014/09/27 职场文书
2014年幼儿园个人工作总结
2014/11/10 职场文书
JPA如何使用entityManager执行SQL并指定返回类型
2021/06/15 Java/Android
输入框跟随文字内容适配宽实现示例
2022/08/14 Javascript