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 相关文章推荐
用正则表达式 动态创建/增加css style script 兼容IE firefox
Mar 10 Javascript
jquery animate实现鼠标放上去显示离开隐藏效果
Jul 21 Javascript
js去空格技巧分别去字符串前后、左右空格
Oct 21 Javascript
JavaScript学习笔记之Cookie对象
Jan 22 Javascript
js关于getImageData跨域问题的解决方法
Oct 14 Javascript
js通过指定下标或指定元素进行删除数组的实例
Jan 12 Javascript
浅谈node模块与npm包管理工具
Jan 03 Javascript
cdn模式下vue的基本用法详解
Oct 07 Javascript
vue 组件内获取actions的response方式
Nov 08 Javascript
vue+swiper实现左右滑动的测试题功能
Oct 30 Javascript
QT与javascript交互数据的实现
May 26 Javascript
Promise静态四兄弟实现示例详解
Jul 07 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快速url重写更新版[需php 5.30以上]
2010/04/25 PHP
PHP写的求多项式导数的函数代码
2012/07/04 PHP
Zend Framework中的简单工厂模式 图文
2012/07/10 PHP
PHP静态调用非静态方法的应用分析
2013/05/02 PHP
如何用php生成扭曲及旋转的验证码图片
2013/06/07 PHP
php中ftp_chdir与ftp_cdup函数用法
2014/11/18 PHP
Thinkphp批量更新数据的方法汇总
2016/06/29 PHP
smarty模板数学运算示例
2016/12/11 PHP
新发现一个骗链接的方法(js读取cookies)
2012/01/11 Javascript
js根据给定的日期计算当月有多少天实现思路及代码
2013/02/25 Javascript
jquery与js函数冲突的两种解决方法
2013/09/09 Javascript
JavaScript事件委托的技术原理探讨示例
2014/04/17 Javascript
用html+css+js实现的一个简单的图片切换特效
2014/05/28 Javascript
关于javascript模块加载技术的一些思考
2014/11/28 Javascript
jQuery中on()方法用法实例详解
2015/02/06 Javascript
JavaScript拖拽、碰撞、重力及弹性运动实例分析
2016/01/08 Javascript
three.js绘制地球、飞机与轨迹的效果示例
2017/02/28 Javascript
JavaScript面向对象程序设计创建对象的方法分析
2018/08/13 Javascript
layer.alert回调函数执行关闭弹窗的实例
2019/09/11 Javascript
原生js实现下拉框选择组件
2021/01/20 Javascript
在Python中处理时间之clock()方法的使用
2015/05/22 Python
python中pip的安装与使用教程
2018/08/10 Python
基于pycharm导入模块显示不存在的解决方法
2018/10/13 Python
PySide和PyQt加载ui文件的两种方法
2019/02/27 Python
Python实现语音识别和语音合成功能
2019/09/20 Python
命令行运行Python脚本时传入参数的三种方式详解
2019/10/11 Python
Python pip安装第三方库实现过程解析
2020/07/09 Python
python实现AHP算法的方法实例(层次分析法)
2020/09/09 Python
万宝龙英国官网:Montblanc手表、书写工具、皮革和珠宝
2018/10/16 全球购物
罗马尼亚在线杂货店:Pilulka.ro
2019/09/28 全球购物
俄罗斯护发和专业化妆品购物网站:Hihair
2019/09/28 全球购物
C语言编程练习
2012/04/02 面试题
个人安全生产责任书
2014/07/28 职场文书
领导班子四风对照检查材料思想汇报
2014/09/26 职场文书
地陪导游欢迎词
2015/01/26 职场文书
全国爱牙日活动总结
2015/02/05 职场文书