DOM对象结构图
一、Document 对象
理解: Document 对象是 HTML 文档的根节点,使我们可以对 HTML 页面中的所有元素进行访问。
使用Document对象查找对象
属性/方法 | 作用 |
---|---|
getElementById ( ) | 通过节点的id属性,查找拥有指定 id 的第一个节点 |
getElementsByName ( ) | 返回带有指定名称的对象集合 |
getElementsByTagName ( ) | 返回带有指定标签名的对象集合 |
getElementsByClassName ( ) | 返回文档中所有指定类名的元素集合,作为 NodeList 对象 |
querySelector ( ) | 返回文档中匹配指定的CSS选择器的第一元素 |
querySelectorAll ( ) | HTML5新特性,返回文档中匹配的CSS选择器的所有元素节点列表 |
使用Document对象的方法创建节点
属性/方法 | 参数 | 作用 |
---|---|---|
createElement (nodename) | 元素的名称 | 创建元素节点 |
createTextNode (text) | 文本节点的文本内容 | 创建文本节点 |
createAttribute (attributeName) | 属性名称 | 创建一个属性节点 |
其他常用
属性/方法 | 作用 |
---|---|
addEventListener ( ) | 事件监听 |
removeEventListener ( ) | 移除事件监听 |
cookie | 设置或返回与当前文档有关的所有cookie |
domain | 返回当前文档的域名 |
referrer | 返回跳转进当前文档的文档的URL(通常用来统计网站访客来源) |
title | 返回当前文档的标题 |
URL | 返回文档完整的URL |
补充知识:
document.body.scrollTop
作用: 获取滚动条高度(Chrome)
document.documentElement.scrollTop
作用: 获取滚动条高度(IE)
二、元素对象Element
理解: Element元素对象代表着一个 HTML 元素。
属性/方法 | 作用 |
---|---|
parentNode | 返回元素的父节点 |
childNodes | 批量获取所有子节点(包括文本节点) |
children | 批量获取所有元素节点(不包括文本节点) |
firstElementChild | 返回元素的第一个子节点 |
lastElementChild | 返回元素的最后一个子节点 |
nextElementSibling | 返回指定元素之后的下一个兄弟节点 |
previousElementSibling | 返回指定元素之前的上一个兄弟节点 |
nodeType | 返回元素的节点类型(元素节点:1,属性节点:2,文本节点:3) |
appendChild( 新节点 ) | 为元素添加一个新的子节点( 在子节点最末端添加 ) |
insertBefore( 新节点,参照节点 ) | 将新节点插入到参照节点之前 |
removeChild( node ) | 删除指定的子节点 |
remove( ) | 删除当前节点 |
replaceChild( 新节点,旧节点 ) | 替换节点 |
innerHTML | 返回元素的所有内容( 包括HTML标签但是不包括自身标签 ) |
innerText | 返回元素的内容( 不包括HTML标签 ) |
outerHTML | 返回元素的所有内容( 包括HTML标签和自身标签 ) |
offsetWidth | 返回元素的宽度,包括border和padding,不包含margin |
offsetHeight | 返回元素的高度,包括border和padding,不包含margin |
offsetLeft | 返回当前元素的相对水平偏移位置(不同浏览器有差别) |
offsetTop | 返回当前元素的相对垂直偏移位置(不同浏览器有差别) |
getAttribute( 属性名称 ) | 返回元素指定属性名称的属性值 |
setAttribute( 属性名称,属性值) | 设置或者改变指定属性并指定值(可以通过此API设置自定义属性) |
style | 设置或返回元素的样式属性 |
补充知识:
getComputedStyle( 类名 , false )[ 属性名 ]
作用: 读取非行内样式
类名 . style . 属性名 = 属性值
作用: 写非行内样式 ##
三、属性对象Attr
理解: Attr 对象 代表一个 HTML 属性。
属性/方法 | 作用 |
---|---|
attr.isId | co如果属性是 ID 类型,则 isId 属性返回 true,否则返回 falsentent2 |
attr.name | 返回属性名称 |
attr.value | 设置或者返回属性值 |
attr.specified | 如果属性被指定返回 true ,否则返回 false |
nodemap.getNamedItem() | 从节点列表中返回的指定属性节点 |
nodemap.item() | 返回节点列表中处于指定索引号的节点 |
nodemap.length | 返回节点列表的节点数目 |
nodemap.removeNamedItem() | 删除指定属性节点 |
nodemap.setNamedItem() | 设置指定属性节点(通过名称) |
四、事件对象
理解: 事件对象允许Javascript在HTML文档元素中注册不同事件处理程序。
鼠标事件
属性 | 作用 |
---|---|
onclick | 当用户点击某个对象时调用的事件句柄 |
oncontextmenu | 在用户点击鼠标右键打开上下文菜单时触发 |
ondblclick | 当用户双击某个对象时调用的事件句柄 |
onmousedown | 鼠标按钮被按下。 |
onmouseenter | 当鼠标指针移动到元素上时触发(内部已经阻止事件冒泡,不会触发父元素事件) |
onmouseleave | 当鼠标指针移出元素时触发(内部已经阻止事件冒泡,不会触发父元素事件) |
onmousemove | 鼠标被移动 |
onmouseover | 鼠标移到某元素之上(会通过事件冒泡触发父元素事件) |
onmouseout | 鼠标从某元素移开(会通过事件冒泡触发父元素事件) |
onmouseup | 鼠标按键被松开 |
键盘事件
属性 | 作用 |
---|---|
onkeydown | 某个键盘按键被按下 |
onkeypress | 某个键盘按键被按下并松开 |
onkeyup | 某个键盘按键被松开 |
表单事件
属性 | 作用 |
---|---|
onblur | 元素失去焦点时触发 |
onchange | 该事件在表单元素的内容改变时触发 |
onfocus | 元素获取焦点时触发 |
onfocusin | 元素即将获取焦点时触发 |
onfocusout | 元素即将失去焦点时触发 |
oninput | 元素获取用户输入时触发 |
onreset | 表单重置时触发 |
onsearch | 用户向搜索域输入文本时触发 ( <input=“search”>) |
onselect | 用户选取文本时触发 |
onsubmit | 表单提交时触发 |
五、Console对象
理解: Console 对象提供了访问浏览器调试模式的信息到控制台
© 著作权归作者所有
举报
发表评论
0/200