DOM常用的四大对象是什么?

一、总结

一句话总结:

1、关注结构,关注主干

2、从主干处着手的话,可以发现dom就是四个东西,document(文档),element,attribute,event(事件)。

1、在 HTML DOM (文档对象模型)中,是否是每个部分都是节点?

解答:是

2、所有 HTML 属性都是是属性节点么?

解答:是

3、HTML的文档本身是什么节点?

解答:文档节点

4、HTML的注释是什么节点:

解答:注释节点

5、HTML文档怎么变成Document 对象?

解答:载入浏览器。每个载入浏览器的 HTML 文档都会成为 Document 对象。

6、Document对象的主要作用是什么?

解答:Document 对象使我们可以从脚本中对 HTML 页面中的所有元素进行访问。

7、Element 对象可以拥有哪些子节点?

解答:Element 对象可以拥有类型为元素节点、文本节点、注释节点、属性节点的子节点。

8、HTML中的NodeList 对象是什么?

解答:NodeList 对象表示节点列表,比如 HTML 元素的子节点集合。

9、在 HTML DOM 中,Attr 对象表示 HTML 属性。 这句话对么?

解答:对

10、HTML 属性始终属于 HTML 元素。这句话对么?

解答:对

11、HTML中的NamedNodeMap 对象是什么?

解答:在 HTML DOM 中,NamedNodeMap 对象表示元素属性节点的无序集合。NamedNodeMap 中的节点可通过名称或索引(数字)来访问。

12、事件和函数的关系是什么?

解答:事件通常与函数结合使用,函数不会在事件发生前被执行!

二、简介

0、dom对象

HTML DOM 节点

在 HTML DOM (文档对象模型)中,每个部分都是节点:

  • 文档本身是文档节点
  • 所有 HTML 元素是元素节点
  • 所有 HTML 属性是属性节点
  • HTML 元素内的文本是文本节点
  • 注释是注释节点

1、document对象

Document 对象

每个载入浏览器的 HTML 文档都会成为 Document 对象。

Document 对象使我们可以从脚本中对 HTML 页面中的所有元素进行访问。

提示:Document 对象是 Window 对象的一部分,可通过 window.document 属性对其进行访问。

2、element对象

Element 对象

在 HTML DOM 中,Element 对象表示 HTML 元素。

Element 对象可以拥有类型为元素节点、文本节点、注释节点的子节点。

NodeList 对象表示节点列表,比如 HTML 元素的子节点集合。

元素也可以拥有属性。属性是属性节点(参见下一节)。

3、attribute对象

Attr 对象

在 HTML DOM 中,Attr 对象表示 HTML 属性。

HTML 属性始终属于 HTML 元素。

NamedNodeMap 对象

在 HTML DOM 中,NamedNodeMap 对象表示元素属性节点的无序集合。

NamedNodeMap 中的节点可通过名称或索引(数字)来访问。

4、event对象

Event 对象

Event 对象代表事件的状态,比如事件在其中发生的元素、键盘按键的状态、鼠标的位置、鼠标按钮的状态。

事件通常与函数结合使用,函数不会在事件发生前被执行!

三、测试题-简答题

1、在 HTML DOM (文档对象模型)中,是否是每个部分都是节点?

解答:是

2、所有 HTML 属性都是是属性节点么?

解答:是

3、HTML的文档本身是什么节点?

解答:文档节点

4、HTML的注释是什么节点:

解答:注释节点

5、HTML文档怎么变成Document 对象?

解答:载入浏览器。每个载入浏览器的 HTML 文档都会成为 Document 对象。

6、Document对象的主要作用是什么?

解答:Document 对象使我们可以从脚本中对 HTML 页面中的所有元素进行访问。

7、Element 对象可以拥有哪些子节点?

解答:Element 对象可以拥有类型为元素节点、文本节点、注释节点、属性节点的子节点。

8、HTML中的NodeList 对象是什么?

解答:NodeList 对象表示节点列表,比如 HTML 元素的子节点集合。

9、在 HTML DOM 中,Attr 对象表示 HTML 属性。 这句话对么?

解答:对

10、HTML 属性始终属于 HTML 元素。这句话对么?

解答:对

11、HTML中的NamedNodeMap 对象是什么?

解答:在 HTML DOM 中,NamedNodeMap 对象表示元素属性节点的无序集合。NamedNodeMap 中的节点可通过名称或索引(数字)来访问。

12、事件和函数的关系是什么?

解答:事件通常与函数结合使用,函数不会在事件发生前被执行!

 

DOM常用的四大对象是什么?的更多相关文章

  1. 【repost】Javascript操作DOM常用API总结

    Javascript操作DOM常用API总结 文本整理了javascript操作DOM的一些常用的api,根据其作用整理成为创建,修改,查询等多种类型的api,主要用于复习基础知识,加深对原生js的认 ...

  2. SVG DOM常用属性和方法介绍(1)

    12.2  SVG DOM常用属性和方法介绍 将以Adobe SVG Viewer提供的属性和方法为准,因为不同解析器对JavaScript以及相关的属性和方法支持的程度不同,有些方法和属性是某个解析 ...

  3. DOM创建和删除节点、HTML DOM常用对象[转]

    创建和删除节点:——核心DOM   1. 创建单个元素节点:3步:      1. 创建空元素节点对象:         var elem=document.createElement("标 ...

  4. JS操作DOM常用API总结

    <JS高程>中的DOM部分写的有些繁琐,还没勇气整理,直到看到了这篇博文 Javascript操作DOM常用API总结,顿时有了一种居高临下,一览全局的感觉.不过有时间还是得自己把书里面的 ...

  5. [js高手之路] dom常用API【appendChild,insertBefore,removeChild,replaceChild,cloneNode】详解与应用

    本文主要讲解DOM常用的CURD操作,appendChild(往后追加节点),insertBefore(往前追加节点),removeChild(移除节点),replaceChild(替换节点),clo ...

  6. DOM常用的属性和方法

    之前一直傻傻分不清DOM和JavaScript究竟有什么区别,随着相关工作时间的增长,开始逐渐区分DOM和JavaScript了,最近,也一直在复习有关DOM方面的知识,<JavaScript ...

  7. 添加/删除-HTML DOM 常用对象 -BOM-打开和关闭窗口- history-location

    1. 添加/删除 3步: 1. 添加一个空元素 var a=document.createElement("a"); <a></a> 2. 定义元素的关键属 ...

  8. Javascript操作DOM常用API总结

    基本概念 在讲解操作DOM的api之前,首先我们来复习一下一些基本概念,这些概念是掌握api的关键,必须理解它们. Node类型 DOM1级定义了一个Node接口,该接口由DOM中所有节点类型实现.这 ...

  9. JavaScript 操作 DOM 常用 API 总结

    文本整理了javascript操作DOM的一些常用的api,根据其作用整理成为创建,修改,查询等多种类型的api,主要用于复习基础知识,加深对原生js的认识. 基本概念 在讲解操作DOM的api之前, ...

随机推荐

  1. Android抖动的EditText

    Java代码:启动动画 Animation shake = AnimationUtils.loadAnimation(this, R.anim.shake); findViewById(R.id.pw ...

  2. Nginx配置GZIP

    记录一次解决网站加载慢的问题 一. nginx配置 gzip on;gzip_min_length  1k;gzip_buffers     4 16k;gzip_http_version 1.1;g ...

  3. 【习题 6-11 UVA - 10410】Tree Reconstruction

    [链接] 我是链接,点我呀:) [题意] 在这里输入题意 [题解] 可以先确定当前这棵子树的dfs序的范围. 然后第一个元素肯定是这棵子树的根节点. 那么只要在这棵子树的范围里面枚举节点. 看看有没有 ...

  4. [React & Debug] Quick way to debug Stateless component

    For example we have the following code: const TodoList = (props) => ( <div className="Tod ...

  5. [React] Theme your application with styled-components and "ThemeProvider"

    In this styled-components lesson, we set a "primary color" within a UI "theme" o ...

  6. JS学习笔记 - fgm练习 2-5 - 函数传参 设置div样式

    练习地址:http://www.fgm.cc/learn/lesson2/05.html <script> window.onload = function(){ var oDiv = d ...

  7. StackExchange.Redis 官方文档

    原文:StackExchange.Redis 官方文档 时隔多年的翻译终于完成了第六个,也是很重要的的官方文档,是介绍有关链接管理,管道流水线和多路复用的 官方地址在这里:官方文档 下面做个汇总: S ...

  8. 常用到的Linux命令

    记录一下日常用到的Linux命令,就当做日志了 1.查看Linux 端口号  netstat -apn | grep 80 2.杀死进程   kill -s 9 pid (tomcat 启动不起来有可 ...

  9. Mysql从入门到精通整理

    目录 mysql基础 mysql进阶 mysql高级 mysql优化 正文 数据库是信息化产业的最基础的软件之一,各种管理系统,网站,在线游戏,背后基本都会有数据库的支持. 回到顶部 mysql基础 ...

  10. ThreadLocal深入理解与内存泄露分析

    ThreadLocal 当使用ThreadLocal维护变量时,ThreadLocal为每个使用该变量的线程提供独立的变量副本.所以每个线程都能够独立地改变自己的副本.而不会影响其他线程所相应的副本. ...