首先介绍下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. 深入理解react-native

    欢迎转载,请支持原创,保留原文链接:http://blog.ilibrary.me http://blog.ilibrary.me/2016/12/25/react-native-internal ( ...

  2. 可落地的DDD(5)-战术设计

    摘要 本篇是DDD的战术篇,也就是关于领域事件.领域对象.聚合根.实体.值对象的讨论.也是DDD系列的完结篇. 这一部分在我们团队争论最多的,也有很多月经贴,比如对资源库的操作应该放在领域服务还是领域 ...

  3. PHP 垃圾回收机制详解

    前言:之前对PHP的GC只是了解了个大概,这次详细了解下PHP的垃圾回收机制(GC). 介于网上大部分都是PHP5.X的GC,虽然 php5 到 php7 GC部分做出的改动较小,但我觉得还是一起写下 ...

  4. 2019-11-29-WPF-绑定命令在-MVVM-的-CanExecute-和-Execute-在按钮点击都没触发可能的原因...

    原文:2019-11-29-WPF-绑定命令在-MVVM-的-CanExecute-和-Execute-在按钮点击都没触发可能的原因... title author date CreateTime c ...

  5. 我为什么学习Haskell

    说起来,Haskell真是相当冷门而小众的一门语言.在我工作第一年的时候,我平时从网络的一些学习资料上时不时看到有人提到这门语言.那时候的认识就是除了我们平时用的“面向对象语言 (OOP: Objec ...

  6. Java 多线程编程——多线程

    如果要想在Java之中实现多线程的定义,那么就需要有一个专门的线程主体类进行线程的执行任务的定义,而这个主体类的定义是有要求的,必须实现特定的接口或者继承特定的父类才可以完成. 1. 继承Thread ...

  7. Redis安装和基本使用

    目录 Redis安装和基本使用 安装 配置 启动服务端 启动客户端 Redis键(key) 与键相关的基本命令 Redis字符串 常用字符串命令: Redis哈希 常用Hash命令 Redis 列表( ...

  8. android studio学习----构建（gradle ）依赖时使用动态依赖的问题

    今天在看Dan Lew大神的博客发现最新的文章就是 “Don't use dynamic versions for your dependencies” Everyone, please, to st ...

  9. JSP JSTL

    JSTL是Sun给JSP制定的一套标准标签库,JS代表JSP,TL即Tag Library. JSTL是一套很古老的标签库了,很多东西都不再适用,这里只介绍几个常用的标签. 使用JSTL需下载添加以下 ...

  10. centos7.2下安装python3.6.5

    yum groupinstall 'Development Tools' 出现错误 系统 centos 7.3 使用命令 yum groupinstall 'Development Tools' 出现 ...