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实例教程(19) 使用HoTMetal(4)
Dec 23 Javascript
extjs 学习笔记(一) 一些基础知识
Oct 13 Javascript
颜色选择器 Color Picker,IE,Firefox,Opera,Safar
Nov 25 Javascript
用dtree实现树形菜单 dtree使用说明
Oct 17 Javascript
js Calender控件使用详解
Jan 05 Javascript
Javascript获取随机数的实现方法
Jun 22 Javascript
Angular中的$watch、$watchGroup、$watchCollection
Jun 25 Javascript
jQuery实现表格隔行换色
Sep 01 jQuery
JS学习笔记之闭包小案例分析
May 29 Javascript
vue+element 模态框表格形式的可编辑表单实现
Jun 07 Javascript
layui当点击文本框时弹出选择框,显示选择内容的例子
Sep 02 Javascript
javascript浅层克隆、深度克隆对比及实例解析
Feb 09 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
php中json_decode()和json_encode()的使用方法
2012/06/04 PHP
编写PHP脚本过滤用户上传的图片
2015/07/03 PHP
摘自织梦CMS中的图片处理类
2015/08/08 PHP
PHP从尾到头打印链表实例讲解
2018/09/27 PHP
php生成静态页面并实现预览功能
2019/06/27 PHP
如何判断图片地址是否失效
2007/02/02 Javascript
图片上传即时显示缩略图的js代码
2009/05/27 Javascript
通过jQuery源码学习javascript(三)
2012/12/27 Javascript
js加入收藏以及使用Jquery更改透明度
2014/01/26 Javascript
JavaScript实现鼠标滑过处生成气泡的方法
2015/05/16 Javascript
纯javascript实现分页(两种方法)
2015/08/26 Javascript
基于canvas实现的钟摆效果完整实例
2016/01/26 Javascript
全面详细的jQuery常见开发技巧手册
2016/02/21 Javascript
浅谈JavaScript 标准对象
2016/06/02 Javascript
jQuery实现响应鼠标事件的图片透明效果【附demo源码下载】
2016/06/16 Javascript
详解JavaScript对象类型
2016/06/16 Javascript
Ionic3 UI组件之Gallery Modal详解
2017/06/07 Javascript
WdatePicker.js时间日期插件的使用方法
2017/07/26 Javascript
node+express+ejs使用模版引擎做的一个示例demo
2017/09/18 Javascript
laravel5.3 vue 实现收藏夹功能实例详解
2018/01/21 Javascript
vue使用自定义icon图标的方法
2018/05/14 Javascript
Python splitlines使用技巧
2008/09/06 Python
用Python制作简单的钢琴程序的教程
2015/04/01 Python
Python中使用PyQt把网页转换成PDF操作代码实例
2015/04/23 Python
Python对文件和目录进行操作的方法(file对象/os/os.path/shutil 模块)
2017/05/08 Python
使用Python OpenCV为CNN增加图像样本的实现
2019/06/10 Python
python自动化测试之异常及日志操作实例分析
2019/11/09 Python
django 读取图片到页面实例
2020/03/27 Python
Python Tornado核心及相关原理详解
2020/06/24 Python
python转化excel数字日期为标准日期操作
2020/07/14 Python
windows系统Tensorflow2.x简单安装记录(图文)
2021/01/18 Python
北京天润融通.net面试题笔试题
2012/02/20 面试题
高三自我鉴定怎么写
2013/10/19 职场文书
承诺保证书格式
2015/02/28 职场文书
慈善募捐倡议书
2015/04/27 职场文书
学校2015年纠风工作总结
2015/05/15 职场文书