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

猜你喜欢

转载自www.cnblogs.com/wsmrzx/p/10391869.html