首先介绍下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. 正在开发的JavaScript引擎有哪些？

    正在开发的JavaScript引擎有哪些? V8,用C++编写,开放源代码,由Google丹麦开发,是Google Chrome的一部分,也用于Node.js. JavaScriptCore,开放源代 ...

  2. PHP RSA签名

    /** * RSA签名 * @param $data 待签名数据 * @param $private_key 私钥字符串 * return 签名结果 */function rsaSign($data, ...

  3. SQL Date 时间类型处理

    SQL 日期(Dates)   2019-10-17 22:17:26 当我们处理日期时,最难的任务恐怕是确保插入的日期的格式,与数据库中日期列的格式相匹配. 保存的如果是日期部分,查询不会有太大问题 ...

  4. Flask send_file request

    send_file: send_file( filename_or_fp, mimetype=None, as_attachment=False, attachment_filename=None, ...

  5. 结对编程（Python实现）

    一.Github地址:https://github.com/nullcjm/mypage 项目搭档:3117004662梁子豪 3117004648陈俊铭 二.PSP表格: PSP2.1 Person ...

  6. Spark源码执行逻辑分析【基于案例SparkPi】

    一.案例SparkPi代码 package scala import org.apache.spark.sql.SparkSession import scala.math.random /** Co ...

  7. Centos7 安装配置 Rabbitmq Cluster

    Rabbitmq介绍 RabbitMQ是由 LShift 提供的一个 Advanced Message Queuing Protocol (AMQP) 的开源实现,由以高性能.健壮以及可伸缩性出名的 ...

  8. Linux的httpd服务搭建

    在服务搭建前,还要了解一下httpd的日志. 日志有助有工作人员,查看服务器出错状况,更能统计数据分析网页运行情况. PV和UV两大分析 PV  Page View 页面访问量 UV  User Vi ...

  9. ArmIE的安装

    参考:https://developer.arm.com/tools-and-software/server-and-hpc/arm-architecture-tools/arm-instructio ...

  10. AAC的RTP封装中的AU头分析

      解码器收到一个RTP的AAC流,发现RTP流里的音频里带有4个字节AU头,然后才是AAC的ADTS头.     这种情况之前已经出现过多次,每次我们都告知对方,不要往AAC前面加AU头,解码器不支 ...