1、Document

每个载入浏览器的 HTML 文档都会成为 Document 对象，Document 对象允许我们通过脚本对页面中的所有元素进行访问和设置

注意：Document 对象是 Window 对象的一部分，可通过 window.document 属性对其进行访问

（1）集合

  • all[]：提供对文档中所有 HTML 元素的访问
  • anchors[]：返回对文档中所有 Anchor 对象的引用
  • links[]：返回对文档中所有 Area 和 Link 对象引用
  • forms[]：返回对文档中所有 Form 对象引用
  • images[] ：返回对文档中所有 Image 对象引用

（2）属性

  • body：当前文档的 <body> 元素
  • title：当前文档的标题
  • cookie：与当前文档有关的所有 cookie
  • domain：当前文档的域名
  • URL：当前文档的 URL
  • referrer：载入当前文档的文档的 URL
  • lastModified：当前文档被最后修改的时间

（3）方法

文档输出

  • write()：向文档写 HTML 表达式 或 JavaScript 代码
  • writeln()：向文档写 HTML 表达式 或 JavaScript 代码，并在每个表达式后添加一个换行符

流控制

  • open()：打开一个流，以收集来自 document.write() 或 document.writeln() 方法的输出
  • close()：关闭用 document.open() 方法打开的输出流，并显示选定的数据

获取节点

  • getElementById()：返回带有指定 ID 的节点
  • getElementsByTagName()：返回带有指定标签名称的节点列表
  • getElementsByClassName()：返回带有指定类名的节点列表

2、Element

Element 对象表示 HTML 元素

（1）属性

基本属性

  • nodeName：元素名称
  • nodeType：元素类型
  • nodeValue：元素值

元素属性

  • innerHTML：元素的内容

  • id：元素的 id 属性
  • title：元素的 title 属性
  • style：元素的 style 属性
  • className：元素的 class 名称
  • tagName：元素的 tag 名称

  • attributes：元素属性的 NamedNodeMap（元素属性节点的无序集合）

元素关系

  • ownerDocument：元素的根元素（文档对象）
  • parentNode：元素的父元素
  • firstChild：元素的第一个子元素
  • lastChild：元素的最后一个子元素
  • nextSibling：元素的后一个相邻兄弟元素
  • previousSibling：元素的前一个相邻兄弟元素
  • childNodes：元素子节点的 NodeList

元素显示

  • clientHeight：元素的可见高度
  • clientWidth：元素的可见宽度
  • offsetHeight：元素的高度
  • offsetWidth：元素的宽度
  • offsetLeft：元素的水平偏移位置
  • offsetTop：元素的垂直偏移位置
  • offsetParent：元素的偏移容器
  • tabIndex：元素的 tab 键控制次序
  • accessKey：元素的快捷键

（2）方法

节点操作

  • cloneNode()：克隆节点

  • appendChild()：添加子节点
  • removeChild()：移除子节点
  • replaceChild()：替换子节点
  • insertBefore()：插入新节点
  • hasChildNodes()：元素是否拥有子节点

  • normalize()：合并元素中相邻的文本节点，并移除空的文本节点

属性以及属性节点

  • hasAttribute()：元素是否拥有指定属性

  • hasAttributes()：元素是否拥有属性

  • getAttribute()：返回元素的属性值
  • setAttribute()：设置元素的属性值
  • removeAttribute()：移除元素的属性
  • getAttributeNode()：返回指定的属性节点
  • setAttributeNode()：设置指定的属性节点

  • removeAttributeNode()：移除指定的属性节点，并返回被移除的节点

检查

  • isDefaultNamespace()：检查 namespaceURI 是否为默认的
  • isEqualNode()：检查两个元素是否相等
  • isSameNode()：检查两个元素是否为相同节点
  • isSupported()：检查元素是否支持某一特性

其它

  • toString()：把元素转换为字符串

3、Attribute

Attribute 对象表示 HTML 元素的属性

（1）属性

  • name：属性名称
  • value：属性值
  • length：NamedNodeMap 中的节点数
  • isId：属性是否为 id 类型
  • specified：属性是否为 已指定

（2）方法

  • item()：NamedNodeMap 中位于指定下标的节点

  • getNamedItem()：获取指定的属性节点
  • setNamedItem()：设置指定的属性节点

  • removeNamedItem()：移除指定的属性节点

4、Event

Event 对象表示事件的状态，通常与函数结合使用

（1）事件句柄

鼠标

  • onclick：鼠标点击
  • ondblclick：鼠标双击
  • onmousedown：鼠标按键被按下
  • onmouseup：鼠标按键被松开
  • onmousemove：鼠标被移动
  • onmouseout：鼠标从某元素移开
  • onmouseover：鼠标移到某元素上

键盘

  • onkeydown：键盘按键被按下
  • onkeyup：键盘的键被松开
  • onkeypress：键盘按键被按下或按住

加载

  • onload：加载文档或图像
  • onunload：退出页面
  • onerror：加载文档或图像时发生错误
  • onabort：加载图像时被中断

其它

  • onfocus：获得焦点
  • onblur：失去焦点
  • onselect：文本被选定
  • onsubmit：提交按钮被点击
  • onchange：用户改变域的内容
  • onreset：重置按钮被点击
  • onresize：窗口或框架被调整尺寸

（2）鼠标 / 键盘属性

鼠标属性

  • button：当事件被触发时，鼠标的哪个按钮被点击
  • clientX：当事件被触发时，鼠标指针相对于浏览器页面的水平坐标
  • clientY：当事件被触发时，鼠标指针相对于浏览器页面的垂直坐标
  • screenX：当事件被触发时，鼠标指针相对于屏幕的水平坐标
  • screenY：当事件被触发时，鼠标指针相对于屏幕的垂直坐标

键盘属性

  • ctrlKey：当事件被触发时，"CTRL" 键是否被按下

  • altKey：当事件被触发时，"ALT" 键是否被按下

  • shiftKey：当事件被触发时，"SHIFT" 键是否被按下

  • metaKey：当事件被触发时，"meta" 键是否被按下

（3）标准属性

  • bubbles：事件是否为起泡事件类型
  • cancelable：事件是否可取消默认动作
  • currentTarget：返回其事件监听器触发此事件的元素
  • target：返回触发此事件的元素
  • eventPhase：返回事件传播的当前阶段
  • timeStamp：返回事件生成的时间
  • type：返回事件的名称

（4）标准方法

  • initEvent()：初始化属性
  • preventDefault()：不再执行默认动作
  • stopPropagation()：不再派发事件

参考资料：

http://www.w3school.com.cn/js/index.asp

http://www.w3school.com.cn/jsref/index.asp

JavaScript学习笔记之DOM对象的更多相关文章

  1. JavaScript:学习笔记(9)——Promise对象

    JavaScript:学习笔记(9)——Promise对象 引入Promise Primose是异步编程的一种解决方案,比传统的解决方案回调函数和事件更加合理和强大.如下面为基于回调函数的Ajax操作 ...

  2. JavaScript:学习笔记(10)——XMLHttpRequest对象

    JavaScript:学习笔记(10)——XMLHttpRequest对象 XHR对象 使用XMLHttpRequest (XHR)对象可以与服务器交互.您可以从URL获取数据,而无需让整个的页面刷新 ...

  3. Javascript学习笔记——操作浏览器对象

    Javascript学习笔记 目前尝试利用javascript去对于一个浏览器对象完成一系列的访问及修改, 浏览器是网页显示.运行的平台,常用的浏览器有IE.火狐(Firefox).谷歌(Chrome ...

  4. javascript学习笔记02--面向对象学习

    js面向对象编程 1.  javascript 是一种基于对象的编程    object-based(基于对象):遇到的所有对象都是对象2.javascript没有类class,但是有新的原型对象,习 ...

  5. JavaScript学习笔记之原型对象

    本文是学习<JavaScript高级程序设计>第六章的笔记. JS中,便于批量创建对象的三种模式: 1.工厂模式:用一个函数封装创建对象的细节,传入必要的参数,在函数内部new一个对象并返 ...

  6. javascript学习笔记之DOM与表单

    DOM(文档对象模型),猫叔了一个层次化的节点树 一.DOM NODE相关公共属性与方法 DOM中所有节点都实现了NODE接口,该接口的公共属性和方法如下: 1.节点基本属性 1)NodeType 节 ...

  7. JavaScript 学习笔记-HTML&&DOM

    HTML DOM (文档对象模型) 当网页被加载时,浏览器会创建页面的文档对象模型(Document Object Model). HTML DOM 模型被构造为对象的树. JavaScript 能够 ...

  8. 【JavaScript学习整理】DOM对象(location history screen navigator)

    DOM: 描述网页各个组成部分之间的关系. parentNode: 父节点 childNode: 子节点 firstChild: 第一个子节点 lastChild: 最后一个子节点 nextSibli ...

  9. javascript学习笔记之DOM

    DOM(文档对象模型),描述了一个层次化的节点树 一.DOM NODE相关公共属性与方法 DOM中所有节点都实现了NODE接口,该接口的公共属性和方法如下: 1.节点基本属性 1)NodeType 节 ...

随机推荐

  1. HDU 1159 Common Subsequence (动规+最长公共子序列)

    Common Subsequence Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 65536/32768 K (Java/Other ...

  2. Android指纹识别深入浅出分析到实战

    指纹识别这个名词听起来并不陌生,但是实际开发过程中用得并不多.Google从Android6.0(api23)开始才提供标准指纹识别支持,并对外提供指纹识别相关的接口.本文除了能适配6.0及以上系统, ...

  3. ajax接收处理json格式数据

    ajax在前后端的交互中应用非常广泛,通过请求后台接口接收处理json格式数据展现在前端页面. 下面我们来简单用 ajax在本地做一个接收并处理json的小例子 首先我们要新建一个叫做data的jso ...

  4. LVS上DR和NAT模式的缺陷

    引言 相信一般的小公司用的最多的还是DR和NAT模式,关于DR和NAT模式的原理请看看下图,我们先从lvs的DR和NAT模式特性聊聊一些问题. 问题1.lvs的DR模式和NAT模式核心缺陷有哪些? D ...

  5. Graphics.DrawMeshInstanced

    Draw the same mesh multiple times using GPU instancing. 可以免去创建和管理gameObj的开销 并不是立即绘制,如需:Graphics.Draw ...

  6. [Apple开发者帐户帮助]六、配置应用服务（5.2）推送通知（APN）：使用TLS证书与APN通信

    您的通知服务器可以使用TLS证书与Apple推送通知服务(APN)通信. 首先在开发者帐户中启用推送通知.接下来生成适用于开发和生产环境的APNs客户端TLS证书.然后从Mac导出客户端TLS标识并将 ...

  7. 【BZOJ2595_洛谷4294】[WC2008]游览计划（斯坦纳树_状压DP）

    上个月写的题qwq--突然想写篇博客 题目: 洛谷4294 分析: 斯坦纳树模板题. 简单来说,斯坦纳树问题就是给定一张有边权(或点权)的无向图,要求选若干条边使图中一些选定的点连通(可以经过其他点) ...

  8. 笨拙而诡异的 Oracle

    有这样一段 SQL 代码: 通过 C# 获取查询结果:    SQL 代码中有两个参数,且都是字符串类型,以上的 C# 代码是生成 Oracle SQL 代码所需要的参数.运行结果如下:   居然发生 ...

  9. P1968 美元汇率

    题目背景 此处省略maxint+1个数 题目描述 在以后的若干天里戴维将学习美元与德国马克的汇率.编写程序帮助戴维何时应买或卖马克或美元,使他从100美元开始,最后能获得最高可能的价值. 输入输出格式 ...

  10. dedecms:解析Robots.txt 协议标准

    Robots.txt 是存放在站点根目录下的一个纯文本文件.虽然它的设置很简单,但是作用却很强大.它可以指定搜索引擎蜘蛛只抓取指定的内容,或者是禁止搜索引擎蜘蛛抓取网站的部分或全部内容. 下面我们就来 ...