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 节 ...
随机推荐
- python lambda表达式&map/filter/reduce
习条件运算时,对于简单的 if else 语句,可以使用三元运算来表示,即: 1 2 3 4 5 6 7 8 # 普通条件语句 if 1 == 1: name = 'wupeiqi' else ...
- 将本地文件复制到hadoop文件系统
package com.yoyosys.cebbank.bdap.service.mr; import java.io.BufferedInputStream; import java.io.File ...
- CSS样式适配杂记
1.问:input框的对齐,制作类似百度搜索框的时候,发现IE下前面输入框和后面按钮总是不能对齐. 解答:给input框增加vertical-align:bottom; 2.问:IE下display: ...
- 【转】vue.js三种安装方式
Vue.js(读音 /vjuː/, 类似于 view)是一个构建数据驱动的 web 界面的渐进式框架.Vue.js 的目标是通过尽可能简单的 API 实现响应的数据绑定和组合的视图组件.它不仅易于上手 ...
- 【洛谷3321_BZOJ3992】[SDOI2015]序列统计（原根_多项式）
题目: 洛谷3321 分析: 一个转化思路比较神(典型?)的题-- 一个比较显然的\(O(n^3)\)暴力是用\(f[i][j]\)表示选了\(i\)个数,当前积在模\(m\)意义下为\(j\)的方案 ...
- Linux-fork()函数详解，附代码注释
// // main.c // Project_C // // Created by LiJinxu on 16/8/13. // Copyright © 2016年 LiJinxu-NEU. All ...
- cocos2d-js 添加广告
http://www.cocoachina.com/bbs/read.php?tid=225655
- C# asp.net repeater实现排序功能,自动排序，点击头部排序，点击列排序
在网上看到好多关于repeater排序的,自己动手用了,发现一些问题,贴源码后把发现的问题以及解决方法给出 repeater实现排序功能(单击升序排列,再单击降序排列).原理很简单,在<TD&g ...
- Laravel5.1学习笔记18 数据库4 数据填充
简介 编写数据填充类 使用模型工厂类 调用额外填充类 执行填充 #简介 Laravel includes a simple method of seeding your database with t ...
- Jquery 多行拖拽图片排序 jq优化
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...