首先介绍下DOM，一套对文档的内容进行抽象和概念化的方法。即Document Object Model，当创建了一个网页并加载到Web浏览器中时，DOM就把编写的网页转换为一个文档对象，而通过浏览器提供的网页模型，就能通过Javascript去读取这张地图。

举个例子来说，DOM对于浏览器加载的网页，就像城市地图上的标识物映射城市，按图索骥即可找到你需要的地方。

Javascript中的对象拆分为三类

  • 用户自定义对象：由开发者自行创建的对象；
  • 内建对象：内建在Javascript语言中的对象，比如Array,Math以及Date等等；
  • 宿主对象：由浏览器提供的对象，比如Window（窗口对象模型）

DOM把网页表示为一棵家谱树（节点树）【由n（n>=1）个有限节点组成一个具有层次关系的集合】，下面看个Demo示例

 <!DOCTYPE html>
 <html>
 <head>
     <meta charset="utf-8"/>
     <title>Javascript学习笔记</title>
 </head>
     <body>
         <h1>DOM结构图解析</h1>
         <p title="a gentle reminder">购物清单</p>
         <ul id="shopList">
             <li class="sale">水果</li>
             <li class="sale">削皮刀</li>
         </ul>
     </body>
 </html>

<!DOCTYPE html>告知浏览器应该使用那种HTML或XHTML规范，然后从一个打开的html标签标识整个文档的开始，这个网页里所有的内容都在其内部，所以<html>标签既没有父亲，也没有兄弟，这个标签就是根元素，代表了整个文档。

接下来深入一层发现，html下有head和body两个分支，它们位于同一层次且互不包含，所以称之为兄弟关系，有着共同的父元素html，但又各有各自的子元素。依次类推，我们画出Demo的文档结构图

DOM解析的家谱树又称为节点树，节点这个词是网络术语，表示网络中的一个连接点。一个网络就是由一些节点构成的集合。而在DOM中也包含很多类型的节点，其中最常见的节点有三种：

  • 元素节点：DOM的原子是元素节点，标签的名字就是元素的名字，比如“P”或者"LI"都是；
  • 文本节点：在内容为王的互联网上，绝大多数内容都是文本提供的，文本节点总是被包含在元素节点内部，但不是所有元素节点都包含文本节点；
  • 属性节点：属性节点用于具体描述元素节点，所有的属性节点都包含在元素节点内部，但不是所有的元素节点都包含属性节点；

获取网页上的元素节点通过JS的获取方法有三种(Javascript是区分大小写的)：

    • getElementById

      • 　　document.getElementById(id)：返回给定id属性的元素节点对应的对象
    • getElementsByTagName
      • 　　document.getElementsByTagName(tag)：返回对象数组，分别对应文档里面有给定标签的一个元素
      • 　　getElementsByTagName允许传通配符*
    • getElementsByClassName
      • 　　document.getElementsByClassName(class)：通过class属性中的类名来访问元素

不过getElementsByClassName虽然很好用，但是只有较新的浏览器才支持这个DOM方法，所以我们用一个脚本来检测它，如果不支持则使用自定义的函数

 function getElementsByClassName(node,classname){
     if(node.getElementsByClassName){
         return node.getElementsByClassName(classname);
     }else{
         var result = new new Array();
         var elems = node.getElementsByTagName("*");
         for(var i = 0;i < elems.length;i++){
             if(elems[i].className.indexOf(classname)!=-1){
                 result[result.length] = elems[i];
             }
         }
         return result;
     }
 }

这个getElementsByClassName函数接受两个参数，node表示DOM树中的搜索起点，第二个classname就是要搜索的类名了，，但是很遗憾不适合多个类名的情况。

看完了如何获取元素后，接下来就是设置属性了，在得到需要的元素后，我们就可以获取它的各个属性，getAttribute就是这样一个方法，相应的，setAttribute用于更改属性节点的值。值得注意的是，set/getAttribute方法属于元素节点对象，不能用document来调用

    • getAttribute

      • 　　object.getAttribute(attribute)
    • setAttribute
      • 　　object.setAttribute(attribute,value)

DOM提供了很多的属性和方法，有需要的可以查阅专门的文档进行了解。有错误的地方欢迎指正，有问题欢迎评论区留言

JavaScriptDOM编程学习笔记（一）DOM概述的更多相关文章

  1. JavaScriptDOM编程学习笔记（二）图片库案例

    <JavascriptDOM编程艺术>提供一个图片库的demo,主要讲解如何更好的使用JavaScript在网页中,跟随作者的思路来分析一下这个案例 首先需求是将图片发布到网上,但是如果发 ...

  2. DOM编程 学习笔记（一）

    PS:虽然自己JS基本语法算是掌握了,但是其实在JS掌握的只是远远还不够,网页上有太多好看的动态效果都是用JS 做出来的,自己也就仅仅会那么一两个动态的效果,学的只是皮毛...等有空的时候一定要好好的 ...

  3. JAVA GUI编程学习笔记目录

    2014年暑假JAVA GUI编程学习笔记目录 1.JAVA之GUI编程概述 2.JAVA之GUI编程布局 3.JAVA之GUI编程Frame窗口 4.JAVA之GUI编程事件监听机制 5.JAVA之 ...

  4. 并发编程学习笔记(14)----ThreadPoolExecutor（线程池）的使用及原理

    1. 概述 1.1 什么是线程池 与jdbc连接池类似,在创建线程池或销毁线程时,会消耗大量的系统资源,因此在java中提出了线程池的概念,预先创建好固定数量的线程,当有任务需要线程去执行时,不用再去 ...

  5. MySQL基础之事务编程学习笔记

    MySQL基础之事务编程学习笔记 在学习<MySQL技术内幕:SQL编程>一书,并做了笔记.本博客内容是自己学了<MySQL技术内幕:SQL编程>事务编程一章之后,根据自己的理 ...

  6. Python--网络编程学习笔记系列02 附：tcp服务端，tcp客户端

    Python--网络编程学习笔记系列02 TCP和UDP的概述: udp通信模型类似于写信,不需要建立相关链接,只需要发送数据即可(现在几乎不用:不稳定,不安全) tcp通信模型类似于打电话,一定要建 ...

  7. Linux Shell编程学习笔记——目录（附笔记资源下载)

    LinuxShell编程学习笔记目录附笔记资源下载 目录(?)[-] 写在前面 第一部分 Shell基础编程 第二部分 Linux Shell高级编程技巧 资源下载 写在前面 最近花了些时间学习She ...

  8. DirectX 11游戏编程学习笔记之8: 第6章Drawing in Direct3D(在Direct3D中绘制)(习题解答)

            本文由哈利_蜘蛛侠原创,转载请注明出处.有问题欢迎联系2024958085@qq.com         注:我给的电子版是700多页,而实体书是800多页,所以我在提到相关概念的时候 ...

  9. OGG学习笔记01-基础概述

    OGG学习笔记01-基础概述 OGG(Oracle Golden Gate),最近几年在数据同步.容灾领域特别火,甚至比Oracle自己的原生产品DataGuard还要风光,主要是因为其跨平台.跨数据 ...

随机推荐

  1. RC4算法

    RC4算法简介:https://baike.baidu.com/item/RC4%E7%AE%97%E6%B3%95/9686396?fr=aladdin RC4算法java实现: /** * RC4 ...

  2. Elasticsearch Field Options Norms

    Elasticsearch 定义字段时Norms选项的作用 本文介绍ElasticSearch中2种字段(text 和 keyword)的Norms参数作用. 创建ES索引时,一般指定2种配置信息:s ...

  3. 深入学习OpenCV中图像灰度化原理，图像相似度的算法

    最近一段时间学习并做的都是对图像进行处理,其实自己也是新手,各种尝试,所以我这个门外汉想总结一下自己学习的东西,图像处理的流程.但是动起笔来想总结,一下却不知道自己要写什么,那就把自己做过的相似图片搜 ...

  4. 使用Jenkins来实现内部的持续集成流程（下）

    目录 配置项目构建 添加任务 添加源代码地址和登录凭据 添加构建触发器  TFS添加WebHook  添加构建步骤 后端UI  API端  配置项目构建 1.添加任务 2.添加源代码地址和登录凭据 添 ...

  5. 【POI】java服务生成List数据集合，后台服务生成xlsx临时文件，并将临时文件上传到腾讯云上

    场景: java服务生成List数据集合,后台服务生成xlsx临时文件,并将临时文件上传到腾讯云上 今日份代码: 1.先是一个变量,作为文件名 private static final String ...

  6. 初识Markdown

    目录 一.基础语法 二.语法规则 1.标题 2.列表 3.文字格式 4.链接 5.图片 6.引用 7.水平分隔线 8.代码块 9.表格 10.文档目录 11.转义定义 写在前面 Markdown(简称 ...

  7. netcore添加api帮助文档页-Swagger

    1. 添加NuGet包 1)最基本的包:Swashbuckle.AspNetCore.Swagger 2)扩展包:Swashbuckle.AspNetCore.SwaggerGen和Swashbuck ...

  8. 斐波那契查找（Fibonacci Search）

    斐波那契查找 斐波那契查找就是在二分查找的基础上根据斐波那契数列进行分割的.   在斐波那契数列找一个等于略大于查找表中元素个数的数F[n],将原查找表扩展为长度为F[n](如果要补充元素,则补充重复 ...

  9. https网站部署成功 CA证书申请 IIS配置

    https://www.cnblogs.com/lichunting/p/9274422.html#4276645 参考文档解决方案

  10. java--修饰符与常用规则

    修饰符总结 修饰符 类 成员变量 成员方法 构造方法 public Y Y Y Y default Y Y Y Y protected Y Y Y private Y Y Y abstract Y Y ...