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 处理网页内容的实现代码
Feb 15 Javascript
JS的反射问题
Apr 07 Javascript
jQuery遍历DOM元素与节点方法详解
Apr 14 Javascript
基于jQuery的Web上传插件Uploadify使用示例
May 19 Javascript
JavaScript排序算法动画演示效果的实现方法
Oct 18 Javascript
微信开发 使用picker封装省市区三级联动模板
Oct 28 Javascript
Bootstrap导航条可点击和鼠标悬停显示下拉菜单
Nov 25 Javascript
Jquery实现跨域异步上传文件总结
Feb 03 Javascript
bootstrap+jQuery 实现下拉菜单中复选框全选和全不选效果
Jun 12 jQuery
微信小程序获取循环元素id以及wx.login登录操作
Aug 17 Javascript
Vue项目组件化工程开发实践方案
Jan 09 Javascript
原生js实现省市区三级联动代码分享
Feb 12 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语言中global和$GLOBALS[]的分析 之二
2012/02/02 PHP
PHP 观察者模式深入理解与应用分析
2019/09/25 PHP
硬盘浏览程序,保存成网页格式便可使用
2006/12/03 Javascript
JavaScript 学习笔记(七)字符串的连接
2009/12/31 Javascript
javascript object array方法使用详解
2012/12/03 Javascript
JavaScript子窗口ModalDialog中操作父窗口对像
2012/12/11 Javascript
javascript-简单的计算器实现步骤分解(附图)
2013/05/30 Javascript
利用了jquery的ajax实现二级联互动菜单
2013/12/02 Javascript
jquery 绑定回车动作扑捉回车键触发的事件
2014/03/26 Javascript
jQuery实现复选框批量选择与反选的方法
2015/06/17 Javascript
使用jspdf生成pdf报表
2015/07/03 Javascript
Bootstrap编写一个兼容主流浏览器的受众门户式风格页面
2016/07/01 Javascript
如何利用模板将HTML从JavaScript中抽离
2016/10/08 Javascript
jQuery发请求传输中文参数乱码问题的解决方案
2018/05/22 jQuery
vue完成项目后,打包成静态文件的方法
2018/09/03 Javascript
微信小程序云开发如何实现数据库自动备份实现
2019/08/16 Javascript
es6函数之严格模式用法实例分析
2020/03/17 Javascript
JS 设计模式之:工厂模式定义与实现方法浅析
2020/05/06 Javascript
vue 获取url里参数的两种方法小结
2020/11/12 Javascript
[10:07]2014DOTA2国际邀请赛 实拍选手现场观战DK对阵Titan
2014/07/12 DOTA
Python脚本在Appium库上对移动应用实现自动化测试
2015/04/17 Python
Python实现截屏的函数
2015/07/26 Python
Tensorflow 模型转换 .pb convert to .lite实例
2020/02/12 Python
python构造IP报文实例
2020/05/05 Python
video下autoplay属性无效的解决方法(添加muted属性)
2020/05/19 HTML / CSS
全球烹饪课程的领先预订平台:Cookly
2020/01/28 全球购物
外贸销售员求职的自我评价
2013/11/23 职场文书
财务工作个人求职的自我评价
2013/12/19 职场文书
房地产项目策划书
2014/02/05 职场文书
低碳环保口号
2014/06/12 职场文书
心理咨询专业自荐信
2014/07/07 职场文书
社会学专业求职信
2014/07/17 职场文书
2014年无财产无子女离婚协议书范本
2014/10/09 职场文书
golang特有程序结构入门教程
2021/06/02 Python
微信小程序中使用vant框架的具体步骤
2022/02/18 Javascript
从结婚开始的恋爱故事。小说《我的美好婚事》TV动画化决定
2022/04/07 日漫