DOM学习

清风竹间过
241 阅读9分钟

自己的学习记录，有什么不对的望指正。

DOM节点

一、节点介绍

  1. 文本节点(3)，IE8以下空格节点获取不到。

  2. 元素节点(1) div。

  3. 属性节点(2) class、id、value。

  4. 注释节点(8)

二、获取节点

  1. 获取节点

    • document.querySelector() 方法返回文档中与给定选择器组匹配的第一个元素。
    • document.querySelectorAll() 返回与给定选择器组匹配的文档中的元素列表。
    • document.getElementsByTagName() 方法可返回带有指定标签名的对象的集合。
    • document.getElementsByClassName() 方法返回文档中所有指定类名的元素集合。
    • document.getElementById() 方法可返回对拥有指定 ID 的第一个对象的引用。

  2. 子代节点

    • ele.childNodes：文本节点、元素节点。
    • ele.children：只获取元素节点。
    • ele.firstChild：返回第一个包括文本节点和注释节点。
    • ele.firstElementChild：获取第一个元素节点。
    • ele.lastChild：获取到文本和注释节点。
    • ele.lastElementChild：获取最后一个元素节点。
    • ele.childElementCount：获取子元素节点的数量
    • ele.hasChildNodes() 判断一个元素是否具有任何子元素

  3. 父亲节点

    • ele.parentNode：获取父亲节点。
    • ele.offsetParent：找到定位父级。

  4. 兄弟节点

    • ele.nextSibling：获取到下一个节点，包括文本、注释节点。
    • ele.nextElementSibling：只获取元素节点。
    • ele.previousSibling：获取到上一个节点，包括文本、注释节点。
    • ele.previousElementSibling：只获取元素节点。

三、节点的操作

  1. 创建节点：

    • document.createElement('nodename')，放标签名，创建元素节点，创建节点是document的方法，创建完的节点可以直接进行dom操作。

  2. 创建文本节点：

    • createTextNode。

  3. 删除节点：

    • parentNode.removeChild(node)，删除节点只能从父级开始删除，不能自己删除自己。

  4. 克隆节点：

    • node.cloneNode()，克隆只克隆元素本身还有元素节点，不会克隆事件，可以接受一个布尔类型，若是true，则克隆子孙元素。

  5. 添加节点：

    • parentNode.appendChild(node)，只能从父级节点开始添加，添加位置在最后的子节点后面。

  6. 替换节点：

    • parentNode.replaceChild(new, old)，第一个用来替换新元素，第二个被替换元素。

  7. 在节点前添加节点：

    • parentNode.insertBefore(new, old)，第一个用来插入的新元素，第二个在这个元素前插入。

四、节点属性

  1. 获取节点属性:

    • ele.attributes 返回一个元素的属性数组
    • ele.getAttribute(key)，获取节点属性名称，直接返回值。
    • ele.getAttributeNode，返回节点对象。
    • ele.className 赋值则设置calss属性值、直接则返回元素的class属性值
    • ele.classList 返回元素的类名

  2. 设置节点属性:

    • ele.setAttribute(key, value)，不要用数字来当做key。
    • ele.setAttributeNode(node)，node是一个节点对象。

  3. 判断节点:

    • ele.hasAttribute(key) 如果元素中存在指定的属性返回 true，否则返回false。
    • ele.hasAttributes() 如果元素有任何属性返回true，否则返回false。

  4. 创建节点对象:

    • document.createAttribute("nodeName")，创建完之后要设置value值。

  5. 删除节点对象:

    • ele.removeAttribute(key)

  6. 节点类型: 1--element--元素节点、2--属性节点、3--#text--文本节点、8--#comment--注释节点、9--document--文档节点。

  7. tagName是只有元素节点才有，nodeName是所有节点都有。

五、其它操作

  1. ele.nodeName 返回元素的标记名（大写）

  2. ele.nodeType 返回元素的节点类型

  3. ele.nodeValue 返回元素的节点值

  4. ele.hasFocus() 返回布尔值，检测文档或元素是否获取焦点

  5. ele.innerHTML 设置或者返回元素的内容

  6. ele.isContentEditable 如果元素内容可编辑返回 true，否则返回false

  7. ele.isEqualNode() 检查两个元素是否相等

  8. ele.isSameNode() 检查两个元素所有有相同节点。

  9. ele.offsetHeight 返回任何一个元素的高度包括边框和填充，但不是边距

  10. ele.offsetWidth 返回元素的宽度，包括边框和填充，但不是边距

  11. ele.offsetLeft 返回当前元素的相对水平偏移位置的偏移容器

  12. ele.offsetTop 返回当前元素的相对垂直偏移位置的偏移容器

  13. ele.offsetParent 返回元素的偏移容器

  14. ele.addEventListener() 向指定元素添加事件句柄

  15. ele.removeEventListener() 移除由 addEventListener() 方法添加的事件句柄

  16. ele.textContent 设置或返回一个节点和它的文本内容

  17. ele.clientHeight 在页面上返回内容的可视高度（不包括边框，边距或滚动条）

  18. ele.clientWidth 在页面上返回内容的可视宽度（不包括边框，边距或滚动条）

  19. ele.scrollHeight 返回整个元素的高度（包括带滚动条的隐蔽的地方）

  20. ele.scrollLeft 返回当前视图中的实际元素的左边缘和左边缘之间的距离

  21. ele.scrollTop 返回当前视图中的实际元素的顶部边缘和顶部边缘之间的距离

  22. ele.scrollWidth 返回元素的整个宽度（包括带滚动条的隐蔽的地方）

DOM事件

鼠标事件

  1. onclick 当用户点击某个对象时调用的事件句柄。

  2. oncontextmenu 在用户点击鼠标右键打开上下文菜单时触发。

  3. ondblclick 当用户双击某个对象时调用的事件句柄。

  4. onmousedown 鼠标按钮被按下。

  5. onmouseenter 当鼠标指针移动到元素上时触发。

  6. onmouseleave 当鼠标指针移出元素时触发

  7. onmousemove 鼠标被移动。

  8. onmouseover 鼠标移到某元素之上。

  9. onmouseout 鼠标从某元素移开。

  10. onmouseup 鼠标按键被松开。

键盘事件

  1. onkeydown 某个键盘按键被按下。

  2. onkeypress 某个键盘按键被按下并松开。

  3. onkeyup 某个键盘按键被松开。

框架/对象（Frame/Object）事件

  1. onabort 图像的加载被中断。 ( <object>)

  2. onbeforeunload 该事件在即将离开页面（刷新或关闭）时触发

  3. onerror 在加载文档或图像时发生错误。 ( <object>, <body>和 <frameset>)

  4. onhashchange 该事件在当前 URL 的锚部分发生修改时触发。

  5. onload 一张页面或一幅图像完成加载。

  6. onpageshow 该事件在用户访问页面时触发

  7. onpagehide 该事件在用户离开当前网页跳转到另外一个页面时触发

  8. onresize 窗口或框架被重新调整大小。

  9. onscroll 当文档被滚动时发生的事件。

  10. onunload 用户退出页面。 ( <body> 和 <frameset>)

表单事件

  1. onblur 元素失去焦点时触发

  2. onchange 该事件在表单元素的内容改变时触发( <input>, <keygen>, <select>, 和 <textarea>)

  3. onfocus 元素获取焦点时触发

  4. onfocusin 元素即将获取焦点时触发

  5. onfocusout 元素即将失去焦点时触发

  6. oninput 元素获取用户输入时触发

  7. onreset 表单重置时触发

  8. onsearch 用户向搜索域输入文本时触发 ( <input="search">)

  9. onselect 用户选取文本时触发 ( <input> 和 <textarea>)

  10. onsubmit 表单提交时触发

剪贴板事件

  1. oncopy 该事件在用户拷贝元素内容时触发

  2. oncut 该事件在用户剪切元素内容时触发

  3. onpaste 该事件在用户粘贴元素内容时触发

打印事件

  1. onafterprint 该事件在页面已经开始打印，或者打印窗口已经关闭时触发

  2. onbeforeprint 该事件在页面即将开始打印时触发

拖动事件

  1. ondrag 该事件在元素正在拖动时触发

  2. ondragend 该事件在用户完成元素的拖动时触发

  3. ondragenter 该事件在拖动的元素进入放置目标时触发

  4. ondragleave 该事件在拖动元素离开放置目标时触发

  5. ondragover 该事件在拖动元素在放置目标上时触发

  6. ondragstart 该事件在用户开始拖动元素时触发

  7. ondrop 该事件在拖动元素放置在目标区域时触发

多媒体（Media）事件

  1. onabort 事件在视频/音频（audio/video）终止加载时触发。

  2. oncanplay 事件在用户可以开始播放视频/音频（audio/video）时触发。

  3. oncanplaythrough 事件在视频/音频（audio/video）可以正常播放且无需停顿和缓冲时触发。

  4. ondurationchange 事件在视频/音频（audio/video）的时长发生变化时触发。

  5. onemptied 当期播放列表为空时触发

  6. onended 事件在视频/音频（audio/video）播放结束时触发。

  7. onerror 事件在视频/音频（audio/video）数据加载期间发生错误时触发。

  8. onloadeddata 事件在浏览器加载视频/音频（audio/video）当前帧时触发触发。

  9. onloadedmetadata 事件在指定视频/音频（audio/video）的元数据加载后触发。

  10. onloadstart 事件在浏览器开始寻找指定视频/音频（audio/video）触发。

  11. onpause 事件在视频/音频（audio/video）暂停时触发。

  12. onplay 事件在视频/音频（audio/video）开始播放时触发。

  13. onplaying 事件在视频/音频（audio/video）暂停或者在缓冲后准备重新开始播放时触发。

  14. onprogress 事件在浏览器下载指定的视频/音频（audio/video）时触发。

  15. onratechange 事件在视频/音频（audio/video）的播放速度发送改变时触发。

  16. onseeked 事件在用户重新定位视频/音频（audio/video）的播放位置后触发。

  17. onseeking 事件在用户开始重新定位视频/音频（audio/video）时触发。

  18. onstalled 事件在浏览器获取媒体数据，但媒体数据不可用时触发。

  19. onsuspend 事件在浏览器读取媒体数据中止时触发。

  20. ontimeupdate 事件在当前的播放位置发送改变时触发。

  21. onvolumechange 事件在音量发生改变时触发。

  22. onwaiting 事件在视频由于要播放下一帧而需要缓冲时触发。

动画事件

  1. animationend 该事件在 CSS 动画结束播放时触发

  2. animationiteration 该事件在 CSS 动画重复播放时触发

  3. animationstart 该事件在 CSS 动画开始播放时触发

过渡事件

  1. transitionend 该事件在 CSS 完成过渡后触发。

其他事件

  1. onmessage 该事件通过或者从对象(WebSocket, Web Worker, Event Source 或者子 frame 或父窗口)接收到消息时触发

  2. onmousewheel 已废弃。 使用 onwheel 事件替代

  3. ononline 该事件在浏览器开始在线工作时触发。

  4. onoffline 该事件在浏览器开始离线工作时触发。

  5. onpopstate 该事件在窗口的浏览历史（history 对象）发生改变时触发。

  6. onshow 该事件当 <menu> 元素在上下文菜单显示时触发

  7. onstorage 该事件在 Web Storage(HTML 5 Web 存储)更新时触发

  8. ontoggle 该事件在用户打开或关闭 <details> 元素时触发

  9. onwheel 该事件在鼠标滚轮在元素上下滚动时触发

DOM Console 对象

  1. cosnole.count() 记录 count() 调用次数，一般用于计数。

  2. console.time() 计时器，开始计时间，与 timeEnd() 联合使用，用于算出一个操作所花费的准确时间。

  3. console.timeEnd() 计时结束

  4. console.info() 控制台输出一条信息

CSS 样式声明对象(CSSStyleDeclaration)

CSSStyleDeclaration 对象属性

  1. cssText 设置或返回样式声明文本，cssText 对应的是 HTML 元素的 style 属性。

  2. length 返回样式中包含多少条声明。

  3. parentRule 返回包含当前规则的规则。

CSSStyleDeclaration 对象方法

  1. getPropertyPriority(CSS属性) 返回指定的 CSS 属性是否设置了 "important!" 属性。

  2. getPropertyValue(CSS属性) 返回指定的 CSS 属性值。

  3. item() 通过索引方式返回 CSS 声明中的 CSS 属性名。

  4. removeProperty() 移除 CSS 声明中的 CSS 属性。

  5. setProperty() 在 CSS 声明块中新建或者修改 CSS 属性。

avatar
文章
阅读
粉丝