JavaScript学习笔记之DOM对象
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对象的更多相关文章
- JavaScript:学习笔记(9)——Promise对象
JavaScript:学习笔记(9)——Promise对象 引入Promise Primose是异步编程的一种解决方案,比传统的解决方案回调函数和事件更加合理和强大.如下面为基于回调函数的Ajax操作 ...
- JavaScript:学习笔记(10)——XMLHttpRequest对象
JavaScript:学习笔记(10)——XMLHttpRequest对象 XHR对象 使用XMLHttpRequest (XHR)对象可以与服务器交互.您可以从URL获取数据,而无需让整个的页面刷新 ...
- Javascript学习笔记——操作浏览器对象
Javascript学习笔记 目前尝试利用javascript去对于一个浏览器对象完成一系列的访问及修改, 浏览器是网页显示.运行的平台,常用的浏览器有IE.火狐(Firefox).谷歌(Chrome ...
- javascript学习笔记02--面向对象学习
js面向对象编程 1. javascript 是一种基于对象的编程 object-based(基于对象):遇到的所有对象都是对象2.javascript没有类class,但是有新的原型对象,习 ...
- JavaScript学习笔记之原型对象
本文是学习<JavaScript高级程序设计>第六章的笔记. JS中,便于批量创建对象的三种模式: 1.工厂模式:用一个函数封装创建对象的细节,传入必要的参数,在函数内部new一个对象并返 ...
- javascript学习笔记之DOM与表单
DOM(文档对象模型),猫叔了一个层次化的节点树 一.DOM NODE相关公共属性与方法 DOM中所有节点都实现了NODE接口,该接口的公共属性和方法如下: 1.节点基本属性 1)NodeType 节 ...
- JavaScript 学习笔记-HTML&&DOM
HTML DOM (文档对象模型) 当网页被加载时,浏览器会创建页面的文档对象模型(Document Object Model). HTML DOM 模型被构造为对象的树. JavaScript 能够 ...
- 【JavaScript学习整理】DOM对象(location history screen navigator)
DOM: 描述网页各个组成部分之间的关系. parentNode: 父节点 childNode: 子节点 firstChild: 第一个子节点 lastChild: 最后一个子节点 nextSibli ...
- javascript学习笔记之DOM
DOM(文档对象模型),描述了一个层次化的节点树 一.DOM NODE相关公共属性与方法 DOM中所有节点都实现了NODE接口,该接口的公共属性和方法如下: 1.节点基本属性 1)NodeType 节 ...
随机推荐
- 【OI】向量&矩阵乘法
何为向量? 在初中课本中,我们知道: 向量是有大小和方向的量. 这样解释太笼统了,现在我们只讨论平面上的向量. 那么,我们约定:在平面上的向量,由一个二元组组成:如α(c1,c2). 在此平面上建立一 ...
- Linux中grep命令的12个实践例子
grep是每个Linux发行版都预装的一个强有力的文件模式搜索工具.无论何种原因,如果你的系统没有预装它的话,你可以很容易的通过系统的包管理器来安装它(Debian/Ubuntu系中的apt-get和 ...
- hdoj--1205--吃糖果（规律）
吃糖果 Time Limit: 6000/3000 MS (Java/Others) Memory Limit: 65535/32768 K (Java/Others) Total Sub ...
- P2657 [SCOI2009]windy数 数位dp
数位dp之前完全没接触过,所以NOIP之前搞一下.数位dp就是一种dp,emm……用来求解区间[L,R]内满足某个性质的数的个数,且这个性质与数的大小无关. 在这道题中,dp[i][j]代表考虑了i位 ...
- CSS3径向渐变实现优惠券波浪造型
效果看下图: 左右的波浪边框用CSS搞定这个效果.利用CSS radial-gradient() 函数 CSS 语法: background: radial-gradient(shape size a ...
- PCB genesis大孔加小孔(即卸力孔)实现方法
一.为什么 大孔中要加小孔(即卸力孔) 这其实跟钻刀的排屑有关了,当钻刀越大孔,排屑量也越大(当然这也得跟转速,下刀速的参数有关系),通常当钻刀越大,转速越慢,下刀速也越慢(因为要保证它的排屑通畅). ...
- E20171005-ts
collapse n. 垮台; (身体的) 衰弱; vt. 使倒塌; 使坍塌; 使瓦解; vi. 崩溃; 倒塌; 折叠; (尤指工作劳累后) 坐 ...
- hastable 用法
一,哈希表(Hashtable)简述 在.NET Framework中,Hashtable是System.Collections命名空间提供的一个容器,用于处理和表现类似keyvalue的键值对,其中 ...
- strupr函数
2019-06-03 15:13:39 strupr()函数! strupr,函数的一种,将字符串s转换为大写形式. 说明:只转换s中出现的小写字母,不改变其它字符.返回指向s的指针. 兼容性说明:s ...
- Python/Django 下载Excel2003
一.安装 目前支持Excel2003的第三方库多少还有几个,本文使用的是xlwt,安装方式命令行:pip install xlwt 二.使用 首先.引入该库,例如:from xlwt import * ...