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. nodejs初步

    nodejs是啥? 看名字,很容易认为它是一种开发语言,实质上,它更像是一种WEB服务器,一种工具.因为nodejs的作用,在于在服务器端解释.运行javascript.node.js本身不是开发语言 ...

  2. 【Ubuntu】某灯图标过大

    发现某灯在桌面上图标过大,点击resize拖动没反应,遂查找原因 发现是它图标只有128x128的版本,所以显得比别的图标大 打开lantern.desktop(不知道.desktop请看https: ...

  3. xshell暂停串口的打印【转】

    本文转载自:http://www.360doc.com/content/16/0311/10/7821691_541261680.shtml xshell不想CRT可以断开而停止打印,看这停下的打印信 ...

  4. AngularJS 1.x 国际化——Angular-translate例子

    可运行代码如下: <!DOCTYPE html> <html ng-app="MyApp"> <head> <meta http-equi ...

  5. cas4.2的安装

    cas4.2使用的是gradle来构建项目的,项目代码在https://github.com/Jasig/cas下载. 然后之后进入项目的根目录,然后执行gradle来编译项目,如下: gradle ...

  6. PCB SQL SERVER 邮箱配置与发邮件

    一.开启SQL SERVER发邮件功能 --开启发邮件功能 reconfigure with override go reconfigure with override go 二.邮箱配置 1.代码创 ...

  7. cogs750栅格网络流（最小割）

    750. 栅格网络流 ★★☆   输入文件:flowa.in   输出文件:flowa.out   简单对比时间限制:1 s   内存限制:128 MB [问题描述] Bob 觉得一般图的最大流问题太 ...

  8. 利用Kibana来查看和管理Elasticsearch的索引（Kibana使用篇）

    经过前面几篇的学习,我们已经知道如何在Kibana里边对Elasticsearch进行操作了,那么如何查看已存在的索引呢,我们来看, 在Management里边可以看到我们刚刚创建的sdb索引.另外还 ...

  9. mysql视图的操作

    一.创建视图的语法形式 CREATE VIEW view_name AS 查询语句 ; 使用视图 SELECT * FROM view_name ; 二.创建各种视图 1.封装实现查询常量语句的视图, ...

  10. Java中 == 和 equals（）

    记住三句话 1. 语义上:==指的是内存引用一样.equals是指的是逻辑相等.逻辑相等具体的意思由编写者决定(即在引用类型中,"=="是比较两个引用是否指向堆内存里的同一个地址( ...