Dom

作者: joker731 | 来源:发表于2018-01-18 12:52 被阅读6次

    学习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

    相关文章

      网友评论

          本文标题:Dom

          本文链接:https://www.haomeiwen.com/subject/zxumixtx.html