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 相关文章推荐
JS 遮照层实现代码
Mar 31 Javascript
JavaScript在多浏览器下for循环的使用方法
Nov 07 Javascript
javascript简单实现命名空间效果
Mar 06 Javascript
基于Jquery easyui 选中特定的tab
Nov 17 Javascript
JavaScript动态插入CSS的方法
Dec 10 Javascript
js获取时间函数及扩展函数的方法
Oct 30 Javascript
js事件源window.event.srcElement兼容性写法(详解)
Nov 25 Javascript
jquery实现文字单行横移或翻转(上下、左右跳转)
Jan 08 Javascript
canvas绘图不清晰的解决方案
Feb 28 Javascript
vue路由插件之vue-route
Jun 13 Javascript
jquery图片预览插件实现方法详解
Jul 18 jQuery
利用d3.js实现蜂巢图表带动画效果
Sep 03 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修改NetBeans默认字体的大小
2013/07/02 PHP
PHP网页游戏学习之Xnova(ogame)源码解读(十三)
2014/06/26 PHP
Yii中render和renderPartial的区别
2014/09/03 PHP
PHP中大于2038年时间戳的问题处理方案
2015/03/03 PHP
thinkphp框架使用JWTtoken的方法详解
2019/10/10 PHP
Javascript 继承机制的实现
2009/08/12 Javascript
js Event对象的5种坐标
2011/09/12 Javascript
js弹出层之1:JQuery.Boxy (二)
2011/10/06 Javascript
一个不错的字符串转码解码函数(自写)
2014/07/31 Javascript
jquery实现导航固定顶部的效果仿蘑菇街
2014/10/22 Javascript
《JavaScript DOM 编程艺术》读书笔记之JavaScript 图片库
2015/01/09 Javascript
关于JS变量和作用域详解
2016/07/28 Javascript
Vue.js第三天学习笔记(计算属性computed)
2016/12/01 Javascript
神级程序员JavaScript300行代码搞定汉字转拼音
2017/05/20 Javascript
vue项目中导入swiper插件的方法
2018/01/30 Javascript
简单的vuex 的使用案例笔记
2018/04/13 Javascript
JS实现点星星消除小游戏
2020/03/24 Javascript
Python socket C/S结构的聊天室应用实现
2014/11/30 Python
Python实现SMTP发送邮件详细教程
2021/03/02 Python
pycham查看程序执行的时间方法
2018/11/29 Python
python内存动态分配过程详解
2019/07/15 Python
Django处理Ajax发送的Get请求代码详解
2019/07/29 Python
python Yaml、Json、Dict之间的转化
2020/10/19 Python
CSS3实现超酷的黑猫警长首页
2016/04/26 HTML / CSS
html5通过postMessage进行跨域通信的方法
2017/12/04 HTML / CSS
东方电视购物:东方CJ
2016/10/12 全球购物
Schutz鞋官方网站:Schutz Shoes
2017/12/13 全球购物
如何写一封打动人心的求职信
2014/02/17 职场文书
2014学雷锋活动心得体会
2014/03/10 职场文书
敬业奉献模范事迹材料
2014/12/24 职场文书
管理人员岗位职责
2015/02/14 职场文书
小学教师读书笔记
2015/07/01 职场文书
2015年度个人工作总结报告
2015/10/24 职场文书
2016年“世界环境日”校园广播稿
2015/12/18 职场文书
CSS3实现模糊背景的三种效果示例
2021/03/30 HTML / CSS
MySQL外键约束(FOREIGN KEY)案例讲解
2021/08/23 MySQL