JavaScriptDOM编程学习笔记（一）DOM概述

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

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

Javascript中的对象拆分为三类

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

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

 1 <!DOCTYPE html>
 2 <html>
 3 <head>
 4     <meta charset="utf-8"/>
 5     <title>Javascript学习笔记</title>
 6 </head>
 7     <body>
 8         <h1>DOM结构图解析</h1>
 9         <p title="a gentle reminder">购物清单</p>
10         <ul id="shopList">
11             <li class="sale">水果</li>
12             <li class="sale">削皮刀</li>
13         </ul>
14     </body>
15 </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方法，所以我们用一个脚本来检测它，如果不支持则使用自定义的函数

 1 function getElementsByClassName(node,classname){
 2     if(node.getElementsByClassName){
 3         return node.getElementsByClassName(classname);
 4     }else{
 5         var result = new new Array();
 6         var elems = node.getElementsByTagName("*");
 7         for(var i = 0;i < elems.length;i++){
 8             if(elems[i].className.indexOf(classname)!=-1){
 9                 result[result.length] = elems[i];
10             }
11         }
12         return result;
13     }
14 }

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

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

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

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

JavaScriptDOM编程学习笔记（一）DOM概述

猜你喜欢