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

 更新时间:2019年01月08日 11:09:19   作者:致Great  
这篇文章主要介绍了JavaScript学习笔记之DOM操作,结合实例形式分析了javascript针对dom元素的获取、设置相关操作常用函数使用技巧,需要的朋友可以参考下

本文实例讲述了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程序设计有所帮助。

相关文章

  • es6 字符串String的扩展(实例讲解)

    es6 字符串String的扩展(实例讲解)

    下面小编就为大家带来一篇es6 字符串String的扩展(实例讲解)。小编觉得挺不错的,现在就分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2017-08-08
  • js事件源window.event.srcElement兼容性写法(详解)

    js事件源window.event.srcElement兼容性写法(详解)

    下面小编就为大家带来一篇js事件源window.event.srcElement兼容性写法(详解)。小编觉得挺不错的,现在就分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2016-11-11
  • 改变checkbox默认选中状态及取值的实现代码

    改变checkbox默认选中状态及取值的实现代码

    下面小编就为大家带来一篇改变checkbox默认选中状态及取值的实现代码。小编觉得挺不错的,现在就分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2016-05-05
  • JS实现随机颜色的3种方法与颜色格式的转化

    JS实现随机颜色的3种方法与颜色格式的转化

    随机颜色和颜色格式是我们在开发中经常要用到的一个小功能,网上相关的资料也很多,想着有必要总结一下自己的经验。所以这篇文章主要介绍了JS实现随机颜色的3种方法与颜色格式的转化,需要的朋友可以参考借鉴,下面来一起看看吧。
    2017-01-01
  • js控制分页打印、打印分页示例

    js控制分页打印、打印分页示例

    分页打印的实现方法有很多,本文为大家介绍的使用js来完成这个需求,感兴趣的朋友可以参考下
    2014-02-02
  • 用js实现拼图小游戏

    用js实现拼图小游戏

    这篇文章主要为大家详细介绍了用js实现拼图小游戏,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2021-03-03
  • JS中的算法与数据结构之队列(Queue)实例详解

    JS中的算法与数据结构之队列(Queue)实例详解

    这篇文章主要介绍了JS中的算法与数据结构之队列(Queue),结合实例形式详细分析了javascript中队列的概念、原理、定义及常见操作技巧,需要的朋友可以参考下
    2019-08-08
  • JavaScript中六种面试常考继承方式总结

    JavaScript中六种面试常考继承方式总结

    js的几种继承方式在我们面试的时候经常会被问到,所以深入理解js几种继承方式以及它们的优缺点是非常有必要的。本文为大家整理了JavaScript中面试常考的六种继承方式,需要的可以参考一下
    2023-02-02
  • 利用Blob进行文件上传的完整步骤

    利用Blob进行文件上传的完整步骤

    BLOB (binary large object),二进制大对象,是一个可以存储二进制文件的容器。下面这篇文章主要给大家介绍了关于利用Blob进行文件上传的相关资料,文中通过示例代码介绍的非常详细,需要的朋友可以参考下
    2018-08-08
  • JavaScript原生实现观察者模式的示例

    JavaScript原生实现观察者模式的示例

    下面小编就为大家分享一篇JavaScript原生实现观察者模式的示例,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2017-12-12

最新评论