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 相关文章推荐
一个分享按钮的插件使用介绍(可扩展,内附开发制作流程)
Sep 19 Javascript
javascript设置连续两次点击按钮时间间隔的方法
Oct 28 Javascript
PHP+MySQL+jQuery随意拖动层并即时保存拖动位置实例讲解
Oct 09 Javascript
Jquery-1.9.1源码分析系列(十一)之DOM操作
Nov 25 Javascript
JS实现获取当前URL和来源URL的方法
Aug 24 Javascript
浅谈jQuery hover(over, out)事件函数
Dec 03 Javascript
教你快速搭建Node.Js服务器的方法教程
Mar 30 Javascript
用angular实现多选按钮的全选与反选实例代码
May 23 Javascript
20170918 前端开发周报之JS前端开发必看
Sep 18 Javascript
Vue官方文档梳理之全局配置
Nov 22 Javascript
Angular2.0/4.0 使用Echarts图表的示例代码
Dec 07 Javascript
详解如何解决Vue和vue-template-compiler版本之间的问题
Sep 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
动漫定律:眯眯眼都是怪物!这些角色狠话不多~
2020/03/03 日漫
一个ORACLE分页程序,挺实用的.
2006/10/09 PHP
php 之 没有mysql支持时的替代方案
2006/10/09 PHP
php购物网站支付paypal使用方法
2010/11/28 PHP
PHP实现的oracle分页函数实例
2016/01/25 PHP
PHP通过加锁实现并发情况下抢码功能
2016/08/10 PHP
thinkPHP5.0框架安装教程
2017/03/25 PHP
php基于自定义函数记录log日志方法
2017/07/21 PHP
document.forms[].submit()使用介绍
2014/02/19 Javascript
JS实现点击文字对应DIV层不停闪动效果的方法
2015/03/02 Javascript
JavaScript实现彩虹文字效果的方法
2015/04/16 Javascript
JS实现的自定义显示加载等待图片插件(loading.gif)
2016/06/17 Javascript
Jquery Easyui对话框组件Dialog使用详解(14)
2016/12/19 Javascript
如何使用bootstrap框架 bootstrap入门必看!
2017/04/13 Javascript
Node.js Express安装与使用教程
2018/05/11 Javascript
解决vue elementUI中table里数字、字母、中文混合排序问题
2020/01/07 Javascript
Python版实现微信公众号扫码登陆
2020/05/28 Javascript
解决vue-photo-preview 异步图片放大失效的问题
2020/07/29 Javascript
JavaScript 常见的继承方式汇总
2020/09/17 Javascript
在Python中用get()方法获取字典键值的教程
2015/05/21 Python
Pandas 数据框增、删、改、查、去重、抽样基本操作方法
2018/04/12 Python
使用Python和xlwt向Excel文件中写入中文的实例
2018/04/21 Python
Python读写/追加excel文件Demo分享
2018/05/03 Python
解决Django数据库makemigrations有变化但是migrate时未变动问题
2018/05/30 Python
使用python3批量下载rbsp数据的示例代码
2019/12/20 Python
Python timer定时器两种常用方法解析
2020/01/20 Python
利用Tensorflow的队列多线程读取数据方式
2020/02/05 Python
python连接PostgreSQL过程解析
2020/02/09 Python
Jupyter 无法下载文件夹如何实现曲线救国
2020/04/22 Python
如何通过python实现IOU计算代码实例
2020/11/02 Python
什么是虚拟内存?虚拟内存有什么优势?
2016/02/09 面试题
咖啡厅创业计划书范本
2014/01/22 职场文书
七一建党节慰问信
2015/02/14 职场文书
MySQL表的增删改查(基础)
2021/04/05 MySQL
MySql新手入门的基本操作汇总
2021/05/13 MySQL
深入理解CSS 中 transform matrix矩阵变换问题
2021/08/30 HTML / CSS