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 相关文章推荐
随机显示经典句子或诗歌的javascript脚本
Aug 04 Javascript
JSON 和 JavaScript eval使用说明
Jun 13 Javascript
动态加载iframe时get请求传递中文参数乱码解决方法
May 07 Javascript
JQuery 给元素绑定click事件多次执行的解决方法
Sep 09 Javascript
解决jQuery ajax请求在IE6中莫名中断的问题
Jun 20 Javascript
利用jQuery的动画函数animate实现豌豆发射效果
Aug 28 Javascript
零基础轻松学JavaScript闭包
Dec 30 Javascript
用js将long型数据转换成date型或datetime型的实例
Jul 03 Javascript
angularjs性能优化的方法
Sep 05 Javascript
Node批量爬取头条视频并保存方法
Sep 20 Javascript
vue.js实现简单的计算器功能
Feb 22 Javascript
JS前端使用canvas实现物体的点选示例
Aug 05 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
世界咖啡生产者论坛呼吁:需要立即就咖啡价格采取认真行动
2021/03/06 咖啡文化
dedecms系统常用术语汇总
2007/04/03 PHP
phpMyadmin 用户权限中英对照
2010/04/02 PHP
phpmailer简单发送邮件的方法(附phpmailer源码下载)
2016/06/13 PHP
ThinkPHP 3.2.3实现加减乘除图片验证码
2018/12/05 PHP
Laravel框架运行出错提示RuntimeException No application encryption key has been specified.解决方法
2019/04/02 PHP
IE DOM实现存在的部分问题及解决方法
2009/07/25 Javascript
jquery 注意事项与常用语法小结
2010/06/07 Javascript
JavaScript打印iframe内容示例代码
2013/08/20 Javascript
ZeroClipboard插件实现多浏览器复制功能(支持firefox、chrome、ie6)
2014/08/30 Javascript
jQuery中filter()方法用法实例
2015/01/06 Javascript
JavaScript实现下拉列表框数据增加、删除、上下排序的方法
2015/08/11 Javascript
利用jquery实现下拉框的禁用与启用
2016/12/07 Javascript
AngularJS中的promise用法分析
2017/05/19 Javascript
基于Vue实现图书管理功能
2017/10/17 Javascript
浅谈js的解析顺序 作用域 严格模式
2017/10/23 Javascript
Js判断H5上下滑动方向及滑动到顶部和底部判断的示例代码
2017/11/15 Javascript
JS中的BOM应用
2018/02/02 Javascript
浅谈react受控组件与非受控组件(小结)
2018/02/09 Javascript
跨域请求两种方法 jsonp和cors的实现
2018/11/11 Javascript
js取0-9随机取4个数不重复的数字代码实例
2019/03/27 Javascript
JavaScript遍历查找数组中最大值与最小值的方法示例
2019/05/24 Javascript
简单了解JavaScript弹窗实现代码
2020/05/07 Javascript
Python+selenium实现截图图片并保存截取的图片
2018/01/05 Python
Python数据抓取爬虫代理防封IP方法
2018/12/23 Python
CSS实现定位元素居中的方法
2015/06/23 HTML / CSS
基于canvas使用贝塞尔曲线平滑拟合折线段的方法
2018/01/10 HTML / CSS
html5响应式开发自动计算fontSize的方法
2020/01/13 HTML / CSS
100%植物性、有机、即食餐:Sakara Life
2018/10/25 全球购物
How to spawning asynchronous work in J2EE
2016/08/29 面试题
电子商务网站的创业计划书
2014/01/05 职场文书
办公室文员自荐书
2014/02/03 职场文书
保险公司年会主持词
2014/03/22 职场文书
法制报告会主持词
2014/04/02 职场文书
代理协议书范本
2014/04/22 职场文书
大学生就业意向书
2015/05/11 职场文书