JSDOM编程艺术(第2版)学习笔记【第三章】

3.1 文档：DOM中的“D”

如果没有document(文档)，DOM也就无从谈起。当创建了一个网页并把它加载到Web浏览器时，DOM就在幕后悄然而生。它把你编写的网页文档转换为一个文档对象。

3.2 对象：DOM中的“O”

JavaScript语言里的对象可以分为三种类型：

用户定义对象：由程序员自行创建的对象

内建对象：内建在JavaScript语言里的对象，如Array、Math和Date

宿主对象：由浏览器提供的对象

document对象的主要功能就是处理网页内容。

3.3 模型：DOM中的“M”

DOM中的“M”代表着“Model”(模型)。DOM把一份文档表示为一棵树。更具体地说，DOM把文档表示为一棵家谱树。家谱树模型非常适合用来表示一份用(X)HTML语言编写出来的文档，不过，与使用“家谱树”这个术语相比，把文档称为“节点树”更准确。

3.4 节点

文档是由节点构成的集合。网页中的所有内容都是节点(标签、属性、文本、注释等)，在DOM中，节点使用node表示。HTML DOM树中的所有节点均可通过JavaScript进行访问，所有HTML元素(节点)均可被修改，也可以创建或删除。一般地，节点至少拥有nodeType(节点类型)，nodeName(节点名称)和nodeValue(节点值)这三个基本属性。在DOM里有许多不同类型的节点：元素节点、文本节点和属性节点

元素节点 nodeType为1

属性节点 nodeType为2

文本节点 nodeType为3（文本节点包含文字、空格、换行等)

3.5 获取元素

有3种DOM方法可获取元素节点，分别是通过元素ID，通过标签名字和通过类名字来获取

1.getElementById

这个方法将返回一个与那个有着给定id属性值的元素节点对应的对象。getElementById方法只有一个参数：你想获得的那个元素的id属性的值，这个id值必须放在单引号或双引号里。

    <div id="time">2020-8-21</div>
    <script>
        // 1.因为文档页面从上往下加载，所以先得有标签 script写到标签的下面
        // 2.get 获得element元素 by 通过 驼峰命名法
        // 3.参数 id是大小写敏感的字符串
        // 4.返回的是一个元素对象
        var time = document.getElementById('time');
        console.log(time);
        console.log(typeof time);
    </script>

2.getElementsByTagName

它与getElementById方法有许多相似之处，但它返回的是一个数组。它的参数是标签的名字

3.getElementsByClassName

与getElementsByTagName方法类似，也只接受一个参数，就是类名。返回一个具有相同类名的元素的数组。

 

3.6 获取和设置元素

通过上述介绍的获取元素方法得到需要的元素以后，我们就可以设法获取或更改它的各个属性。

3.6.1 getAttribute

getAttribute是一个函数，只能用于元素节点。它只有一个参数——打算查询的属性的名字：

object.getAttribute(attribute)

3.6.2 setAttribute

这个方法允许我们对属性节点的值做出修改。与getAttribute一样，它也只能用于元素节点：

object.setAttribute(attribute,value)