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

标签: DOM 读书笔记
14人阅读 评论(0) 收藏 举报
分类:

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 小结


查看评论

Javascript DOM操作

-
  • 1970年01月01日 08:00

《JavaScript DOM编程艺术(第2版)》配套源码

  • 2012年02月01日 14:09
  • 2.12MB
  • 下载

JavaScript_DOM编程艺术第二版学习笔记-第8章

上一章节学会利用DOM方法和属性来动态创建标记,这一章节,我们将继续在实践中利用这些技术。 8.1 不应该做什么理论上,我们可以用JS把一些重要的内容添加到网页上。事实上这是一个坏主意,因为这样一来J...
  • sofia92
  • sofia92
  • 2015-12-18 09:40:48
  • 624

《Javascript DOM编程艺术》读书笔记

最近在学习javascript,于是知乎大神告诉我基础可以先看一下《javascript DOM编程艺术》,说实话,我的水平是知道getElementById,getElementsByTagName...
  • qq_31756443
  • qq_31756443
  • 2017-08-26 15:37:07
  • 118

【我的JS第三本】JavaScript_DOM编程艺术第二版读书笔记

经过前一段时间HTML&CSS的学习,感觉视频加读书是一个比较不错的学习方法,两者相辅相成,互相补充,所以也准备看看关于JavaScript的书。       2015年12月14日,之前使用韩顺平老...
  • Creabine
  • Creabine
  • 2015-12-14 21:12:44
  • 3585

javascript DOM编程艺术 读后感与笔记

书评: 一开始接触前端的时候就在各个社区都听说过这本书,不愧为js最广为推荐的入门书,整本书读起来通畅易懂,对一个新手来说几乎不存在什么门槛,让人易于接受,该书通过一个个实例循序渐进,学到新的知识后...
  • m0_37506557
  • m0_37506557
  • 2017-02-25 16:30:06
  • 880

JavaScript DOM编程艺术源代码

  • 2010年05月07日 13:18
  • 1.6MB
  • 下载

JavaScript DOM编程艺术(第2版)-源代码

  • 2016年10月23日 23:07
  • 1.68MB
  • 下载

JavaScript_DOM编程艺术第二版学习笔记-第7章

动态创建标记 传统技术:document.write和innerHTML 深入剖析DOM方法:createElement、createTextNode、appendChild和insert...
  • sofia92
  • sofia92
  • 2015-12-16 09:20:53
  • 889

JavaScript DOM编程艺术-JavaScript图片库

通过点击链接可在一个网页上变换显示的图片。 test.html文件 image show my picture aaaa bbbb ...
  • u013806814
  • u013806814
  • 2015-11-17 20:10:30
  • 940
    个人资料
    等级:
    访问量: 63
    积分: 110
    排名: 137万+
    文章分类
    文章存档