JavaScript中Dom操作实例详解


Posted in Javascript onJuly 08, 2019

本文实例讲述了JavaScript中Dom操作。分享给大家供大家参考,具体如下:

博主将按照增删改查的方式来介绍一下Dom的主要操作。

1、增加节点

添加节点的操作主要分为3步:

(1)创建要添加的新节点
(2)找到要添加到的父节点
(3)父节点添加新节点

参考代码

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <title></title>
  <link rel="stylesheet" href="">
  <script>
    function add(){
      //新建要增加的节点
      var li = document.createElement('li');
      var txt = document.createTextNode('北');
      li.appendChild(txt);
      //找到要添加到的父节点
      var ul = document.getElementsByTagName('ul')[0];
      //添加到父节点
      ul.appendChild(li);
    }
  </script>
</head>
<body>
  <input type="button" value="增加一个节点" onclick="add();">
  <ul>
    <li>东</li>
    <li>南</li>
    <li>西</li>
  </ul>
</body>
</html>

2、删除节点

删除节点的操作主要分为3步:

(1)先找到要删除的节点
(2)找到其父节点
(3)调用父节点的removeChild(删除的节点)操作

参考代码

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <title></title>
  <link rel="stylesheet" href="">
  <script>
    function del(){
      //找到要删除的节点
      var lis = document.getElementsByTagName('li');
      var lastli = lis[lis.length - 1];
      //让父节点来进行删除操作
      lastli.parentNode.removeChild(lastli);
    }
  </script>
</head>
<body>
  <input type="button" value="删除最后一个节点" onclick="del();">
  <ul>
    <li>东</li>
    <li>南</li>
    <li>西</li>
    <li>北</li>
  </ul>
</body>
</html>

3、修改节点

修改操作主要是修改节点的属性,如修改img节点的src属性

但是有几点需要注意:

(1)如果需要操作dom对象的class属性,应该使用className属性

document.getElementsByTagName('div')[0].className = 'test2';

(2)如果需要修改dom对象的样式,应该使用 obj.style.css样式名

document.getElementsByTagName('div')[0].style.width = parseInt(div.style.width) + 5 + 'px';

(3)遇到有这样带-的样式,如:border-bottom-width,应这样修改样式,将-去掉,然后将-后的首字母改为大写

div.style.borderBottomWidth = parseInt(div.style.borderBottomWidth) + 5 + 'px';

4、查找节点

(1)根据id进行查找,返回对象:

document.getElementById('test1');

(2)根据标签名进行查找,返回对象集合:

document.getElementsByTagName('p');

(3)对于表单元素,按照name值进行查找,返回对象集合:

document.getElementsByName('username');

(4)根据class名进行查找,返回对象集合:

document.getElementsByClassName('test2');

(5)查找对象的子节点,childNodes属性包括文本节点(换行),返回对象集合

alert(document.getElementById('test1').childNodes.length);//打印包括文本节点的数量
alert(document.getElementById('test1').children.length);//children属性虽然不符合w3c规范,但是浏览器支持良好

(6)查找对象的父节点,使用parentNode,返回单个对象

document.getElementsByTagName('p')[0].parentNode.style.border = '1px solid black';

感兴趣的朋友可以使用在线HTML/CSS/JavaScript代码运行工具:http://tools.3water.com/code/HtmlJsRun测试上述代码效果。

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

Javascript 相关文章推荐
国外的为初学者写的JavaScript教程
Jun 09 Javascript
防止登录页面出现在frame中js代码
Jul 22 Javascript
Javascript中typeof 用法小结
May 12 Javascript
AngularJs concepts详解及示例代码
Sep 01 Javascript
JS快速实现移动端拼图游戏
Sep 05 Javascript
JavaScript鼠标特效大全
Sep 13 Javascript
Bootstrap Table从服务器加载数据进行显示的实现方法
Sep 29 Javascript
Angular.js 4.x中表单Template-Driven Forms详解
Apr 25 Javascript
JS组件系列之MVVM组件构建自己的Vue组件
Apr 28 Javascript
vue-cli中的webpack配置详解
Sep 25 Javascript
如何去除富文本中的html标签及vue、react、微信小程序中的过滤器
Nov 21 Javascript
微信小程序实现文字无限轮播效果
Dec 28 Javascript
JavaScript实现五子棋游戏的方法详解
Jul 08 #Javascript
ES6 Class中实现私有属性的一些方法总结
Jul 08 #Javascript
ElementUI Tag组件实现多标签生成的方法示例
Jul 08 #Javascript
利用不到200行代码写一款属于你自己的js类库
Jul 08 #Javascript
Vue中util的工具函数实例详解
Jul 08 #Javascript
详解基于 Node.js 的轻量级云函数功能实现
Jul 08 #Javascript
使用 node.js 模仿 Apache 小部分功能
Jul 07 #Javascript
You might like
VML绘图板②脚本--VMLgraph.js、XMLtool.js
2006/10/09 PHP
Fatal error: Call to undefined function curl_init()解决方法
2010/04/09 PHP
php array_intersect比array_diff快(附详细的使用说明)
2011/07/03 PHP
PHP怎么实现网站保存快捷方式方便用户随时浏览
2013/08/15 PHP
PHP实现支持GET,POST,Multipart/form-data的HTTP请求类
2014/09/24 PHP
JS 无限级 Select效果实现代码(json格式)
2011/08/30 Javascript
基于jquery的时间段实现代码
2012/08/02 Javascript
jquery实现点击消失的代码
2014/03/03 Javascript
javascript动态判断html元素并执行不同的操作
2014/06/16 Javascript
JavaScript学习笔记之Cookie对象
2015/01/22 Javascript
javascript异步编程代码书写规范Promise学习笔记
2015/02/11 Javascript
javascript禁止超链接跳转的方法
2016/02/02 Javascript
js获取Html元素的实际宽度高度的方法
2016/05/19 Javascript
AngularJS 输入验证详解及实例代码
2016/07/28 Javascript
移动端使用localStorage缓存Js和css文的方法(web开发)
2016/09/20 Javascript
easyui combobox开启搜索自动完成功能的实例代码
2016/11/08 Javascript
bootstrap轮播图示例代码分享
2017/05/17 Javascript
详解Vue.js分发之作用域槽
2017/06/13 Javascript
jQuery鼠标移动图片上实现放大效果
2017/06/25 jQuery
Sublime Text新建.vue模板并高亮(图文教程)
2017/10/26 Javascript
基于Vue2x的图片预览插件的示例代码
2018/05/14 Javascript
nodejs实现范围请求的实现代码
2018/10/12 NodeJs
微信小程序实现收货地址左滑删除
2020/11/18 Javascript
python sort、sort_index方法代码实例
2019/03/28 Python
Python根据服务获取端口号的方法
2019/09/25 Python
时尚设计师手表:The Watch Cabin
2018/10/06 全球购物
五一服装活动方案
2014/01/11 职场文书
四好少年事迹材料
2014/01/12 职场文书
《小小竹排画中游》教学反思
2014/02/26 职场文书
建筑工地大门标语
2014/06/18 职场文书
2015年个人思想总结
2015/03/09 职场文书
公司财务部岗位职责
2015/04/14 职场文书
2015年度村委会工作总结
2015/04/29 职场文书
2016年父亲节寄语
2015/12/04 职场文书
Python一些基本的图像操作和处理总结
2021/06/23 Python
Python 如何利用ffmpeg 处理视频素材
2021/11/27 Python