《DOM编程艺术》一、DOM

最新推荐文章于 2019-06-24 16:35:59 发布

PJ_Yu

最新推荐文章于 2019-06-24 16:35:59 发布

阅读量182

点赞数

分类专栏：《DOM编程艺术》

本文链接：https://blog.csdn.net/qq_33837446/article/details/77523335

版权

《DOM编程艺术》专栏收录该内容

6 篇文章 0 订阅

订阅专栏

title: 《DOM编程艺术》一、DOM
date: 2017-04-13 22:27:25
tags: DOM编程艺术

1、DOM的含义

文档(D)，指的是document，当创建了一个网页并把它加载到web浏览器中时，DOM就在幕后悄然而生，DOM把我们编写的网页文档转换为一个文档对象。
对象(O)，指的就是javascript中的三种对象，用户定义对象、内建对象、宿主对象。
模型(M)，可以理解为模型Model或者地图Map，我们可以通过javascript代码来读取这张地图。

要理解模型或者地图的概念，首先我们要理解DOM是把一份文档表示为一棵树。以下面文档为例。

<!DOCTYPE html>
<html lang = "en">
    <head>
        <meta charset = "utf-8">
        <title>Shopping list</title>
    </head>
    <body>
        <h1>What to buy</h1>
        <p title = "a gentle reminder">Don't forget to buy this stuff</p>
        <ul id = "purchases">
            <li>A tin of beans</li>
            <li class = "sale">Cheese</li>
            <li class = "sale">Milk</li>
        </ul>
    </body>
</html>

上面的一长串代码可以理解为以下的DOM树

image

从上图可以看出，html永远是一个文档的开始，可以看作是树根，再深一层就是head和body，它们位于一层，所以是兄弟关系(sibling)，它们都有各自的子元素(child)，有着共同的父元素(parent)。

实际上用parent、silbling、child就可以代表整个DOM树的结构，比如ul是ul是body的child元素，而ul又是li的parent元素，ul和p是sibling元素，并且这棵树上的每个元素都是一个DOM节点。

2、节点

上面介绍了DOM的概念，由图也可以看出，DOM树是由一个个节点组成的，这些就是DOM节点。分为三种类型。

元素节点
标签的名字就是元素节点，例如"p"、"ul"、"body"等等。
文本节点
被元素包括的文本内容就是文本节点，比如上面文档中被
包含的"A tin of beans"。
属性节点
属性节点用来对元素做出更具体的描述，比如

的title属性，也包括id和class属性，属性节点也总是被包含在元素节点内部。

那么我们如何区分这三种节点呢？可以使用nodeType属性。
nodeType属性总共有12种可取值，但其中仅有3种有实用价值。

元素节点的nodeType属性值是1
属性节点的nodeType属性值是2
文本节点的nodeType属性值是3

实际使用中可以通过元素对象的nodeType属性值来判断节点类型。

3、获取元素

有3种DOM方法可以获取元素节点，分别是通过元素id、通过标签名、通过class获取。

通过id名获取

这个方法将返回一个与给定id属性值的元素节点对应的元素对象，它是document对象特有函数。

document.getElementById('box');

获取id属性值是'box'的元素对象。

这里一直再说元素对象这个概念，其实就是指的html元素，但是在DOM里html元素都是DOM节点。而DOM节点本身就是一个对象，所以叫做元素对象。
另外函数和方法其实也是一个概念，对象的方法其实就是一个函数。

通过标签名获取

这个方法返回一个对象数组，与getElementById不同的是，这个返回的是一个数组，返回的数组中，每个元素都是获取到的元素对象，可以用length属性查出这个数组的长度。

document.getElementsByTagName('li');

这个方法允许把一个通配符作为它的参数，可以获取文档里的所有元素，也可以和getElementById结合使用

var box = document.getElementById('box');
var lis = box.getElementsByTagName('*');

这样可以获取id为box的元素下的所有元素对象。

通过class获取

这是HTML5中新增的方法，可以通过class名获取元素，返回的也是一个对象数组。

document.getElementsByClassName('sale important');

获取class属性为sale和important的元素对象，这个元素必须同时有这两个class名，顺序无所谓。也可以和getElementById结合使用。

var box = document.getElementById('box');
var sales = box.getElementsByClassName('sale');

获取id值为box的元素下的所有class名为sale的元素。

需要注意的是这个方法比较新，所以用的时候要小心，为了弥补这个不足，我们可以自己封装一个获取class名的方法以适用于旧版浏览器。

获取class名的兼容性处理

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

这个函数接收两个参数，node表示搜索起点，className是要搜索的class名，这个方法不足的地方是不适用多个class名。

4、获取和设置属性

已经了解了三种获取元素节点的方法，现在可以去获取它们的属性。

获取属性

var paras = document.getElementsByTagName('p');
for(var i = 0;i < paras.length;i++){
    var title_text = paras[i].getAttribute('title');
    if(title_text != null){
        alert(title_text);
    }
}

getAttribute用于获取属性，需要用元素节点去调用，参数是要获取的属性名，如果调用的元素节点里没有要查找的属性就会返回null。

设置属性

var paras = document.getElementsByTagName('p');
for(var i = 0;i < paras.length;i++){
    paras[i].setAttribute('title','brand new title text');
    alert(paras[i].getAttribute('title'));
}

setAttribute用于设置属性，不管调用的元素原来有没有设置的属性，最终都会被设置上，用setAttribute对文档做出修改后，在浏览器中查看源代码仍是改变前的属性，这就是DOM的工作模式，对页面内容更新却不需要在浏览器里刷新。

PJ_Yu

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
《DOM编程艺术》一、DOM

title: 《DOM编程艺术》一、DOMdate: 2017-04-13 22:27:25tags: DOM编程艺术1、DOM的含义文档(D)，指的是document，当创建了一个网页并把它加载到web浏览器中时，DOM就在幕后悄然而生，DOM把我们编写的网页文档转换为一个文档对象。对象(O)，指的就是javascript中的三种对象，用户定义对象、内建对象、宿主对象。模型
复制链接

扫一扫

专栏目录