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

 更新时间:2019-01-08 12:00:31   作者:佚名   我要评论(0)

本文实例讲述了JavaScript学习笔记之DOM操作。分享给大家供大家参考,具体如下:
一、DOM概念
1. "D":Docment,指的是文档

2. “O”:Object,指的是对象,在

本文实例讲述了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操作DOM技巧总结》、《JavaScript页面元素操作技巧总结》、《JavaScript事件相关操作与技巧大全》、《JavaScript查找算法技巧总结》、《JavaScript数据结构与算法技巧总结》、《JavaScript遍历算法与技巧总结》及《JavaScript错误与调试技巧总结》

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

您可能感兴趣的文章:

  • js使用DOM操作实现简单留言板的方法
  • javascript拓展DOM操作 prependChild insertAfert
  • javascript DOM操作之动态删除TABLE多行
  • javascript中HTMLDOM操作详解
  • 简单实现JS对dom操作封装
  • JavaScript DOM操作表格及样式
  • JavaScript基础语法、dom操作树及document对象
  • JavaScript基于Dom操作实现查找、修改HTML元素的内容及属性的方法
  • Javascript里使用Dom操作Xml
  • JavaScript中 DOM操作方法小结

相关文章

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

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

    本文实例讲述了JavaScript学习笔记之DOM操作。分享给大家供大家参考,具体如下: 一、DOM概念 1. "D":Docment,指的是文档 2. “O”:Object,指的是对象,在
    2019-01-08
  • MySQL执行计划的深入分析

    MySQL执行计划的深入分析

    前言 在之前的面试过程中,问到执行计划,有很多童鞋不知道是什么&#63;甚至将执行计划与执行时间认为是同一个概念。今天我们就一起来了解一下执行计划到底是什么
    2019-01-08
  • 对python mayavi三维绘图的实现详解

    对python mayavi三维绘图的实现详解

    网上下载mayavi的官方帮助文档,里面有很多例子,下面的记录都是查看手册后得到的。 http://code.enthought.com/projects/mayavi/docs/development/latex/may
    2019-01-08
  • 一个因@click.stop引发的bug的解决

    一个因@click.stop引发的bug的解决

    问题 在项目页面中使用 element popover,设置trigger='click'时点击外部不会触发自动隐藏,但在 element 官网中是可以正常触发的(官方示例),项目中的菜
    2019-01-08
  • 易语言模拟鼠标点击实现方法

    易语言模拟鼠标点击实现方法

    易语言对于初学者而言是一种非常好学的中文编程语言,能够快速地实现很多功能,全汉语编程,简单易上手,易语言功能强大实用,系统全部自行设计开发,且易语言
    2019-01-08
  • Django之模型层多表操作的实现

    Django之模型层多表操作的实现

    一、创建模型 1,一对多关系 一本书只有一个出版社,一个出版社可以出版多本书,从而书与出版社之间就构成一对多关系,书是‘多'的一方,出版社是‘一'的一方
    2019-01-08
  • 易语言统计重复数教学

    易语言统计重复数教学

    比如1 2 3 3 5 4 6 5 4 8 7 3 2这么多数字想取重复数据,并统计重复次数,可以用易语言编程来实现。 1、易语言新建程序 2、新建一个Windows窗口程序 3、如
    2019-01-08
  • 在python3中pyqt5和mayavi不兼容问题的解决方法

    在python3中pyqt5和mayavi不兼容问题的解决方法

    环境: win10 64bit & Linux Mint 18.2 WinPython3.6.1,spyder,qtconsole iep3.7 问题描述: 通过http://www.lfd.uci.edu/~gohlke/pythonlibs/#pyside下载may
    2019-01-08
  • JavaScript学习笔记之图片库案例分析

    JavaScript学习笔记之图片库案例分析

    本文实例讲述了JavaScript图片库。分享给大家供大家参考,具体如下: 一、一个javascript 图片库实例,下面是效果图 点击顶部导航,会在本页面进行刷新图片,
    2019-01-08
  • 详解React中合并单元格的正确写法

    详解React中合并单元格的正确写法

    用表格进行页面布局,页面布局在各种浏览器的的兼容性, 都非常好, 而在react中使用表格布局, 合并单元格的写法比较特殊, 博主查了很久才找到正确的写法, 在这里
    2019-01-08

最新评论