Dom
2018-01-18 本文已影响6人
joker731
学习dom(文档对象模型)就是window对象,里面的document对象提供的属性有哪些,怎么用.
- Window里面分两种对象,JavaScript标准的,和浏览器私自提供的,dom就是浏览器提供的.
- 一个页面里面的html节点都对应浏览器里面的document的对象.
在前面的章节学习中,我们知道别人提供的可以用的工具代码都是APi
dom就是文档对象模型,这种文档指的是xml文档,
开始了
- 程序员的工作主要是操作内存,html文档就是一个树形数据结构,这棵树是如何存在于内存中的呢? 把文档变成对象这种模型,这就是dom; 就像木偶一样,一根根不同的线对应着不同的木偶,这样就可以通过线去操作木偶.操作木偶的手指就是JavaScript的对象,所以叫对象模型/
那么dom的标准是什么呢?
- html标签由document构造函数来造
- 元素由element构造函数来造
- 文本由text标签来造.......还有很多对象,所有对象的顶端就是Node对象
这种树形的对象原型链,和之前学习的对象原型链的结构形式是一模一样的.只是名字不同了
一句话说完,Dom是操作页面的接口,Dom就是把页面中的节点,通过构造函数生成对应的对象,这就是Dom的主要功能. 然后通过JavaScript这个胶水语言,操作这些对象.
- Node相当于Object的地位,但是Node毕竟还是对象,原型链最终也是指向Object.
注意这句话:一个对象有属性+方法//本质来说方法也是属性,只不过是函数属性,所以叫方法不叫属性了.
以下是实际属性的笔记
- 在dom中有个小坑,回车是属于text对象的.
- 注意child和childNode的区别,多用才知道dom之间的实际区别,虽然靠英文就可以知道大概的用法.
构造函数就是一个返回对象的函数,这句话很重要//
DOM的最小组成单位叫做节点（node）。文档的树形结构（DOM树）,就是由各种不同类型的节点组成。每个节点可以看作是文档树的一片叶子。
- 节点有七种类型,
Document：整个文档树的顶层节点,他代表了整个文档,文档里面最高一层的HTML标签，一般是<html>//也就是说,也可以是其他标签
DocumentType：doctype标签（比如<!DOCTYPE html>）
Element：网页的各种HTML标签（比如<body>、<a>等）
Attribute：网页元素的属性（比如class="right"）
Text：标签之间或标签包含的文本
Comment：注释
DocumentFragment：文档的片段 - 这七种节点都属于浏览器原生提供的节点对象的派生对象，具有一些共同的属性和方法。也就是说elment 对象,text对象.......的原型链指向node对象(node的原型也最终指向Object//所以说数据结构很重要)
- 所有节点对象都是浏览器内置的Node对象的实例，继承了Node属性和方法。这是所有节点的共同特征。
- 除了根节点以外，其他节点对于周围的节点都存在三种关系。父-子-同级
- nodeName属性返回节点的名称，nodeType属性返回节点类型的常数值。具体的返回值，可查阅下方的表格。
类型 nodeName nodeType
ELEMENT_NODE 大写的HTML元素名 1
ATTRIBUTE_NODE 等同于Attr.name 2
TEXT_NODE #text 3
COMMENT_NODE #comment 8
DOCUMENT_NODE #document 9
DOCUMENT_FRAGMENT_NODE #document-fragment 11
DOCUMENT_TYPE_NODE 等同于DocumentType.name 10
