JavaScript学习笔记之DOM操作实例分析


Posted in Javascript onJanuary 08, 2019

本文实例讲述了JavaScript学习笔记之DOM操作。分享给大家供大家参考,具体如下:

一、DOM概念

1. "D":Docment,指的是文档
2. “O”:Object,指的是对象,在javascript有三种对象:用户定义对象内建对象(JavaScript语言对象。如MathArray)、宿主对象(浏览器对象)
3. "M":Model,值得是Model,某种事物的表现形式

二、节点

1. 元素节点 :<body> <p> <ul>等
2. 文本节点:<p>文本节点</p>、<li>文本节点</li>等
3. 属性节点:title id class 等

三、获取元素

三种方法:通过元素ID、通过标签名字、通过类名字来获取

请看下面实例:

<h1>What do you want to buy</h1>
  <p title="a gentle reminder">Donnot Forget TO Buy This Stuff</p>
  <ul id="purchases">
    <li>A tin of beans</li>
    <li class="sale">Cheese</li>
    <li class="sale important">Milk</li>
  </ul>

1、getElementsById(id) 返回一个对象

var obj=document.getElementById("purchases");

2、getElementsByTagName() 返回一个对象数组

var obj=document.getElementsByTagName('li')
alert(typeof obj);
alert(obj.length);
for(var i=0;i<obj.length;i++){
  alert(typeof obj[i]);
}

3、getElementsByClassName() 返回一个对象数组

var obj=document.getElementsByClassName('sale');
alert("具有sale类的元素个数:"+obj.length);
//important sale顺序颠倒不影响 ----getElementsByClassName('sale important')
var obj_1=document.getElementsByClassName(' important sale');
alert("同时具有important 和sale类的元素个数:"+obj_1.length);

四、获取和设置属性

1、getAttribue(attribute)?

var pa=document.getElementsByTagName('p');
for(var i=0;i<pa.length;i++){
  var text=pa[i].getAttribute('title');
  if(text) alert(text);
}

2、serAttribute(attribue,value)

var shoppping=document.getElementById('purchases');
shoppping.setAttribute('title','A list of goods');
alert(shoppping.getAttribute('title'));

五、小结

  • getElementById
  • getElementsByTagName
  • getElementsByClassName
  • getAttribute
  • setAttribute

上面5个常见方法是编写DOM脚本的基石

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

Javascript 相关文章推荐
JQuery toggle使用分析
Nov 16 Javascript
JS特权方法定义作用以及与公有方法的区别
Mar 18 Javascript
JavaScript保留两位小数的2个自定义函数
May 05 Javascript
javascript实现网页背景烟花效果的方法
Aug 06 Javascript
谈谈encodeURI和encodeURIComponent以及escape的区别与应用
Nov 24 Javascript
javascript实现瀑布流加载图片原理
Feb 02 Javascript
jQuery 判断是否包含在数组中Array[]的方法
Aug 03 Javascript
jQuery实现获取table中鼠标click点击位置行号与列号的方法
Oct 09 jQuery
浅谈在vue中用webpack打包之后运行文件的问题以及相关配置方法
Feb 21 Javascript
JS获取指定月份的天数两种实现方法
Jun 22 Javascript
angular异步验证防抖踩坑实录
Dec 01 Javascript
flexible.js实现移动端rem适配方案
Apr 07 Javascript
vue单文件组件lint error自动fix与styleLint报错自动fix详解
Jan 08 #Javascript
说说如何在Vue.js中实现数字输入组件的方法
Jan 08 #Javascript
小试SVG之新手小白入门教程
Jan 08 #Javascript
vue组件通信传值操作示例
Jan 08 #Javascript
利用d3.js力导布局绘制资源拓扑图实例教程
Jan 08 #Javascript
vuejs简单验证码功能完整示例
Jan 08 #Javascript
详解React中合并单元格的正确写法
Jan 08 #Javascript
You might like
php实现将上传word文件转为html的方法
2015/06/03 PHP
thinkphp中U方法按路由规则生成url的方法
2018/03/12 PHP
PHP命名空间与自动加载机制的基础介绍
2019/08/25 PHP
javascript Array.prototype.slice使用说明
2010/10/11 Javascript
实现web打印的各种方法介绍及实现代码
2013/01/09 Javascript
js控制浏览器全屏示例代码
2014/02/20 Javascript
JavaScript实现更改网页背景与字体颜色的方法
2015/02/02 Javascript
js实现漂浮回顶部按钮实例
2015/05/06 Javascript
简述JavaScript提交表单的方式 (Using JavaScript Submit Form)
2016/03/18 Javascript
jQuery EasyUI框架中的Datagrid数据表格组件结构详解
2016/06/09 Javascript
canvas学习之API整理笔记(二)
2016/12/29 Javascript
原生js轮播(仿慕课网)
2017/02/15 Javascript
vue项目打包部署_nginx代理访问方法详解
2018/09/20 Javascript
微信小程序模板消息限制实现无限制主动推送的示例代码
2019/08/27 Javascript
vue瀑布流组件实现上拉加载更多
2020/03/10 Javascript
Python 命令行非阻塞输入的小例子
2013/09/27 Python
Python学习小技巧之列表项的排序
2017/05/20 Python
python urllib urlopen()对象方法/代理的补充说明
2017/06/29 Python
python可视化实现代码
2019/01/15 Python
Python实现的ftp服务器功能详解【附源码下载】
2019/06/26 Python
python库matplotlib绘制坐标图
2019/10/18 Python
Python3如何在Windows和Linux上打包
2020/02/25 Python
浅析Python 条件控制语句
2020/07/15 Python
python使用建议技巧分享(三)
2020/08/18 Python
Python 获取异常(Exception)信息的几种方法
2020/12/29 Python
美国汽车交易网站:Edmunds
2016/08/17 全球购物
美国大型的健身社区和补充商店:Bodybuilding.com
2016/09/06 全球购物
编程实现去掉XML的重复结点
2014/05/28 面试题
会计专业毕业生求职信分享
2014/01/03 职场文书
《都江堰》教学反思
2014/02/07 职场文书
水利公司纪检监察自我鉴定
2014/02/25 职场文书
服务承诺书格式
2014/05/21 职场文书
语文教研活动总结
2014/07/02 职场文书
商场父亲节活动方案
2014/08/27 职场文书
2014年学校党建工作总结
2014/11/11 职场文书
2015年党风廉政建设个人总结
2015/08/18 职场文书