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)

原文地址:https://www.cnblogs.com/Small-Windmill/p/13944061.html