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 节 ...
随机推荐
- 数组方法-->map()
map()方法: Array.map((数组元素, 数组元素的下标, 数组本身)=>{}[,thisArray]) 1.调用时在数组内部发生了一次从 0 到 length-1 的循环: 2.返回 ...
- Ubuntu 16.04 安装CodeBlocks
首先将软件源添加进来,就是运行以下命令 sudo add-apt-repository ppa:damien-moore/codeblocks-stable sudo apt-get update 完 ...
- HDU3487 Play with Chain splay 区间反转
HDU3487 splay最核心的功能是将平衡树中的节点旋转到他的某个祖先的位置,并且维持平衡树的性质不变. 两个操作(数组实现) cut l,r, c把[l,r]剪下来放到剩下序列中第c个后面的位置 ...
- unsigned 赋值负数输出情况 & printf输出格式
%d 有符号10进制整数 %ld 长整型 %hd短整型 %i 有符号10进制整数 %o 无符号8进制整数 %u 无符号10进制整数 %x 无符号的16进制数字,并以小写abcdef表示 %X 无符号的 ...
- 我眼中的SEO——略读一些SEO书后
近些日子一直在看一些SEO方面的书.为人有些浮躁,读SEO实在读不出太大营养,除了第一本书外,之后的书就是在不停地向后翻页.没有过太具体的实践,现在就来写一下我眼中的SEO.还希望各位多多指教. 1. ...
- robotframework - 介绍&应用
一.参考简书链接 :https://www.jianshu.com/p/c3a9d20db4e5 二.介绍 Robot Framework是一个基于Python的,可扩展的关键字驱动的测试自动化框架, ...
- vue---思维导图
持续更新啦啦啦啦
- Sum It Up -- 深搜 ---较难
每一行都是一组测试案例 第一个数字 表示总和 第二个数字表示 一共有几个可用数据 现在 按照从小到大的顺序 输出 那些数字中若干数字之和为总和的 信息 /. 很好很明显的 遍历痕迹 , ...
- Spark SQL入门案例之人力资源系统数据处理
通过该案例,给出一个比较完整的.复杂的数据处理案例,同时给出案例的详细解析. 人力资源系统的管理内容组织结构图 1) 人力资源系统的数据库与表的构建. 2) 人力资源系统的数据的加载. 3) 人力资源 ...
- Jquery 多行拖拽图片排序 jq优化
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...