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 节 ...
随机推荐
- node.js中的require
初初接触node.js,印象最深刻的就是开头密密麻麻的require了. 这是什么东西? 其实也没啥大惊小怪的.require就是为了引用别的js文件,利于模块化编程,重用.以及避免过多代码挤在同一个 ...
- XAML实例教程系列 - 依赖属性和附加属性（四）
XAML实例教程系列 - 依赖属性和附加属性 2012-06-07 13:11 by jv9, 1479 阅读, 5 评论, 收藏, 编辑 微软发布Visual Studio 2012 RC和Wind ...
- getElementByTagName的使用
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
- bzoj4082
贪心+倍增 首先如果这个问题在序列上,好像可以按右端点排序,然后从起点开始向能到的最远的地方走. 但是环上不可以,因为随即一个起点可能不是最小的. 然后神思路来了:我们先将环展开倍增,再将区间按右端点 ...
- setings.py配置文件详解
BASE_DIR指的是项目的根目录.SECRET_KEY是安全码. # SECURITY WARNING: don't run with debug turned on in production! ...
- 关于pycharm中pip版本10.0无法使用的解决办法
背景: 近期在利用 pycharm 安装第三方库时会提示 pip 不是最新版本, 因此对 pip 进行更新,但是生成最新版本之后, pip 中由于缺少 main 函数,导致在 pycharm 中无法自 ...
- Gym - 101972B Arabella Collegiate Programming Contest (2018) B. Updating the Tree 树DFS
题面 题意:T组数据,每次给你1e5个点的树(1为根),每个点有一权值,询问1-n每个节点的子树中, 至少修改几个点的权值(每次都可以任意修改),才能让子树中任意2点的距离==他们权值差的绝对值 无解 ...
- [Swift通天遁地]四、网络和线程-(13)创建一个Socket客户端
★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★➤微信公众号:山青咏芝(shanqingyongzhi)➤博客园地址:山青咏芝(https://www.cnblogs. ...
- 使用Visual Studio Code + Node.js搭建TypeScript开发环境
Visual Studio Code搭建Typescript开发环境 —— 相关文章: http://www.cnblogs.com/sunjie9606/p/5945540.html [注意:这里仅 ...
- POJ 3855 计算几何·多边形重心
思路: 多边形面积->任选一个点,把多边形拆成三角,叉积一下 三角形重心->(x1+x2+x3)/3,(y1+y2+y3)/3 多边形重心公式题目中有,套一下就好了 计算多边形重心方法: ...