发表于: 2018-05-21 22:24:41
1 530
今天完成的事情:
制作轮播图
明天计划的事情:
完成轮播图
遇到的问题:
轮播图无法实现,明天好好研究
收获:
什么是 DOM?
文档对象模型 (DOM) 是HTML和XML文档的编程接口。
它提供了对文档的结构化的表述,并定义了一种方式可以使从程序中对该结构进行访问,从而改变文档的结构,样式和内容。
DOM 将文档解析为一个由节点和对象(包含属性和方法的对象)组成的结构集合。简言之,它会将web页面和脚本或程序语言连接起来。
DOM 和 JavaScript的关系
DOM 并不是一个编程语言,但如果没有DOM,JavaScript 语言也不会有任何网页,XML页面以及涉及到的元素的概念或模型。
在文档中的每个元素— 包括整个文档,文档头部, 文档中的表格,表头,表格中的文本 — 都是文档所属于的文档对象模型(DOM)的一部分,因此它们可以使用DOM和一个脚本语言如 JavaScript,来访问和处理。
开始的时候,JavaScript和DOM是交织在一起的,但它们最终演变成了两个独立的实体。
JavaScript可以访问和操作存储在DOM中的内容,因此我们可以写成这个近似的等式:
API (web 或 XML 页面) = DOM + JS (脚本语言)
DOM 被设计成与特定编程语言相独立,使文档的结构化表述可以通过单一,一致的API获得。
如何访问 DOM?
在使用DOM时,不需要做任何其他特殊的操作。不同的浏览器都有对DOM不同的实现,
这些实现对当前的DOM标准而言,都会呈现出不同程度的一致性,每个web浏览器都会使用一些文档对象模型,
从而使页面可以被脚本语言访问。
在创建一个脚本时-无论是使用内嵌 <script>元素或者使用在web页面脚本加载的方法— 都可以使用 document 或 window 元素的API来操作文档本身或获取文档的子类(web页面中的各种元素)。
重要的数据类型
本参考文档会试图以尽可能简单的方式描述各种对象和类型。但在API中传入的不同的数据类型需要我们去注意。
为简单起见,在API参考文档中的语法实例通常会使用element(s) 指代节点,使用nodeList(s)或 element(s)来指代节点数组,使用 attribute(s)来指代属性节点。
下面的表格简单则描述了这些数据类型。
document:
当一个成员返回 document 对象 (例如,元素的 ownerDocument 属性返回 它所属于 document) ,这个对 象就是 document 对象本身。 DOM document Reference 一章对 document 对象进行了描述。
element:
element 是指由 DOM API 中成员返回的类型为 element 的一个元素或节点。
element 对象实现了 DOM Element 接口以及更基本的 Node 接口。
nodeList:
nodeList 是一个元素的数组,如从 document.getElementsByTagName()方法返回的就是这种类型。
nodeList 中的条目由通过下标有两种方式进行访问:
list.item(1)
list[1]
两种方式是等价的,第一种方式中 item() 是 nodeList 对象中的单独方法。
后面的方式则使用了经典的数组语法来获取列表中的第二个条目。
attribute:
当 attribute 通过成员函数 (例如,通过 createAttribute()方法) 返回时,它是一个为属性暴露出专门接口的对象引用。
DOM中的属性也是节点,就像元素一样,只不过您可能会很少使用它。
namedNodeMap:
namedNodeMap 和数组类似,但是条目是由name或index访问的,虽然后一种方式仅仅是为了枚举方便,因为在 list 中本来就没有特定的顺序。 出于这个目的, namedNodeMap 有一个 item() 方法,你也可以从 namedNodeMap 添加或移除条目。
DOM中核心接口
下面是在web和XML页面脚本中使用DOM时,一些常用的API简要列表。
- document.getElementById(id)
- document.getElementsByTagName(name)
- document.createElement(name)
- parentNode.appendChild(node)
- element.innerHTML
- element.style.left
- element.setAttribute()
- element.getAttribute()
- element.addEventListener()
- window.content
- window.onload
- window.dump()
- window.scrollTo()
评论