【读书笔记】Javascript DOM编程艺术(三)DOM

版权声明:本文为博主原创文章,转载请附上原文连接。 https://blog.csdn.net/luck007008009/article/details/79974422

3.1 文档:DOM中的“D”

        (1)当创建了一个网页并把它加载到Web浏览器中时,DOM把你编写的网页文件转换成一个文档对象。

3.2 对象:DOM中的“O”

        (1)“对象”是一种自足的数据集合。

        (2)与某个特定对象相关联的变量被称为这个对象的属性。

        (3)只能通过某个特定对象去调用的函数被称为这个对象的方法。

        (4)JavaScript语言里的对象可以分为三种类型:

                <1>用户定义对象:由程序员自行创建的对象。

                <2>内建对象:内建在JavaScript语言里的对象。

                <3>宿主对象:由浏览器提供的对象。

        (5)window对象对应着浏览器窗口本身,这个对象的属性和方法通常统称为BOM。

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

3.3 模型:DOM中的“M”

        (1)DOM中的“M”代表着“Model”,也可以说代表着“Map”,含义都是某种事物的表现形式。

        (2)DOM代表着加载到浏览器窗口的当前网页。浏览器提供网页的Model(或者说Map),而我们可以通过JavaScript去读取这个Model。

        (3)DOM把一份文档表示为一棵家谱树。

3.4 节点

    3.4.1 元素节点

        (1)DOM的原子是元素节点。

    3.4.2 文本节点

        (1)在XHTML文档里,文本节点总是被包含在元素节点的内部。但并非所有的元素节点都包含有文本节点。

    3.4.3 属性节点

        (1)属性节点用来对元素节点做出更具体的描述。

        (2)因为属性节点总是被放在起始标签里,所以属性节点总是被包含在元素节点中。

        (3)并非所有的元素节点都包含属性节点,但所有的属性节点都被元素节点包含。

    3.4.4 CSS

        (1)可以通过CSS告诉浏览器应该如何显示一份文档的内容。

        (2)CSS声明元素样式的语法:

                selector{ 

                    property: value; 

                }

        (3)继承是CSS技术中的一项强大功能,CSS也把文档的内容视为一棵节点树,节点树上的各个元素将继承其父元素的样式属性。

        (4)为了把某一个或某一些元素与其他元素区别开来,需要使用id属性或class属性。

    3.4.5 获取元素

        (1)有3种DOM方法可获取元素节点,分别通过元素id、通过标签名字和通过类名字:

                <1>getElementById,这个方法将返回一个与那个有着给定id属性值的元素节点对应的对象。

                        document.getElementById(id)

                    注:事实上,文档中的每一个元素都是一个对象。

                <2>getElementByTagName,这个方法返回一个对象数组,每个对象分别对应着文档里有着给定标签的一个元素。

                        element.getElementByTagName(tag)

                <3>getElementByClassName,这个方法让我们能够通过class属性中的类名来访问元素。

                        element.getElementByTagName(tag)

    3.4.6 盘点知识点

3.5 获取和设置属性

    3.5.1 getAttribute

        (1)getAttribute是一个函数,它只有一个参数——你打算查询的属性名字:

                object.getAttribute(attribute)

        (2)getAttribute方法不属于document对象,所以不能通过document对象调用,它只能通过元素节点对象调用。

    3.5.2 setAttribute

        (1)setAttrsibute与getAttrsibute一样,只能用于元素节点。setAttrsibute允许我们对于属性节点的值做出修改。

                object.setAttribute(attribute, value)

        (2)一个值得注意的细节:通过setAttribute对文档做出修改后,在通过浏览器的view source选项去查看文档源码时看到的仍是改变前的属性值,也就是说,setAttribute做出的修改不会反映在文档本身的源代码里。

        (3)DOM的工作模式:先加载文档的静态内容,再动态刷新,动态刷新不影响文档的静态内容。这正是DOM真正的威力:对页面内容进行刷新却不需要在浏览器里刷新页面。

3.6 小结


阅读更多

没有更多推荐了,返回首页