《dom启蒙》读书笔记和测试代码

转载 于 2020-05-20 09:42:08 发布 · 304 阅读 · 1 ·
CC 4.0 BY-SA版权
原文链接：https://blog.youkuaiyun.com/WuLex

本文深入讲解DOM树结构、节点操作、事件处理等核心概念，覆盖创建、选择、修改、删除节点的方法，以及如何通过JavaScript控制DOM元素的样式和布局。

《DOM 启蒙》读书笔记及测试代码

  1. 节点概览
  2. 节点组成的树形层次结构
  3. 节点类型
    3.节点继承
  4. 继承而来节点打交道的属性和方法
  5. 节点类型名称和值
    1. Node.prototype.nodeType
    2. Node.prototype.nodeName
    3. Node.prototype.nodeValue
  6. 创建节点
    1. document.createElement
    2. document.createTextNode
    3. document.createComment
    4. document.createAttribute
    5. document.createDocumentFragment
  7. 字符串和节点的转换
    1. Element.prototype.innerHTML
    2. Element.prototype.outerHTML
    3. Node.prototype.textContent
    4. Element.prototype.insertAdjacentElement
    5. Element.prototype.insertAdjacentText
    6. Element.prototype.insertAdjacentHTML
    7. HTMLElement.prototype.innerText
    8. HTMLElement.prototype.outerText
  8. 插入节点
    1. Node.prototype.insertBefore
    2. Node.prototype.appendChild
    3. Element.prototype.before
    4. Element.prototype.after
    5. Element.prototype.append
    6. Element.prototype.prepend
  9. 移除替换节点
    1. Node.prototype.removeChild
    2. Node.prototype.replaceChild
    3. Element.prototype.remove
    4. Element.prototype.replace
  10. 克隆节点
    1. Node.prototype.cloneNode
  11. NodeList&HTMLCollection
    1. length 属性，因此可以是类数组对象
    2. 实时反映
    3. 默认情况下，顺序与树中的顺序一致
  12. 遍历
    1. 节点（包括了注释、文本节点）
      1. Node.prototype.parentNode
      2. Node.prototype.firstNode
      3. Node.prototype.lastNode
      4. Node.prototype.nextSibling
      5. Node.prototype.perviosSibling
    2. 元素（IE 9 才支持，因此 jQuery 利用上面的节点遍历相关属性模拟了下面的属性）
      1. Element.prototype.fristElementChild
      2. Element.prototype.lastElementChild
      3. Element.prototype.nextElementChild
      4. Element.prototype.perviosElementChild
      5. Element.prototype.children
      6. Element.prototype.parentElement
      7. Element.prototype.previousElementSibling
      8. Element.prototype.nextElementSibling
    3. Element.prototype.childElementCount
  13. 验证节点位置
    1. Node.prototype.contains
    2. Node.prototype.compareDocumentPosition
  14. 比较节点
    1. Node.prototype.isEqualNode
    2. Node.prototype.isSameNode
  15. 文档节点
  16. Object <- Node <- Document <- HTMLDocument
  17. 属性和方法
  18. 通用信息
    1. title
    2. URL
    3. charset
    4. contentType
    5. compatMode BackCompat（怪异模式）CSS1Compat（严格模式）
    6. referrer
    7. lastModified
    8. 等等
  19. 快捷访问
    1. doctype：现代浏览器不在 document.childNodes 中
    2. head
    3. body
    4. documentElement：即 <html lang="en">
  20. 探测特性
    1. implementation.hasFeature
  21. 获取激活节点
  22. 是否聚焦在当前文档窗口上
  23. 获取全局对象
  24. 获取 document
  25. 元素节点
  26. HTML*Element
  27. 创建元素，上面的 document.createElement
  28. 标签名
    1. Node.prototype.nodeName
    2. Element.prototype.tagName
  29. 属性集合
  30. 操作属性
    1. Element.prototype.getAttribute
    2. Element.prototype.setAttribute
    3. Element.prototype.hasAttribute
    4. Element.prototype.removeAttribute
    5. Element.prototype.getAttributeNS
    6. Element.prototype.setAttributeNS
    7. Element.prototype.hasAttributeNS
    8. Element.prototype.removeAttributeNS
    9. Element.prototype.getAttributeNode
    10. Element.prototype.getAttributeNodeNS
    11. Element.prototype.setAttributeNode
    12. Element.prototype.setAttributeNodeNS
    13. Element.prototype.removeAttributeNode
  31. 类操作
    1. Element.prototype.className
    2. Element.prototype.classList
      1. add
      2. remove
      3. toggle
      4. contains
  32. data-*属性
    1. HTMLElement.prototype.dataset
  33. 选取元素节点
  34. 特定元素
    1. Element.prototype.querySelector 和 document.querySelector
    2. document.getElementById
  35. 节点列表
    1. Element.prototype.querySelectorAll 和 document.querySelectorAll 非实时的，下面三个是实时的。目前遇到的第一个非实时的获取方法。
    2. Element.prototype.getElementsByTagName 和 document.getElementsByTagName
    3. Element.prototype.getElementsByTagNameNS 和 document.getElementsByTagNameNS
    4. Element.prototype.getElementsByClassName 和 document.getElementsByClassName
    5. document.getElementsByName
  36. 子元素
    1. Element.prototype.children 实时、有序
  37. 预定义的节点列表
    1. document.images
    2. document.embeds
    3. document.plugins
    4. document.links
    5. document.forms
    6. document.scripts
    7. document.anchors
    8. document.applets
    9. document.children
    10. document.styleSheets
  38. 验证选取的元素
    1. Element.prototype.matchesSelector 针对不同浏览器加前缀
    2. Element.prototype.webkitMatchesSelector
    3. Element.prototype.mozMatchesSelector
    4. Element.prototype.msMatchesSelector
    5. Element.prototype.oMatchesSelector
    6. Element.prototype.matches 新的这个，不用加前缀
  39. 元素节点几何量与滚动几何量
    1. CSSOM 视图模块规范中定义了访问和操作元素节点可视化表象的元素几何量、滚动几何量的属性和方法。
    2. 相对 HTMLElement.prototype.offsetParent 的位置
    3. HTMLElement.prototype.offsetLeft 相对于自身 offsetParent
    4. HTMLElement.prototype.offsetTop 相对于 offsetParent
    5. Element.prototype.clientTop 相对于自身边框
    6. Element.prototype.clientLeft 相对于自身边框
    7. Element.prototype.scrollTop 滚动元素
    8. Element.prototype.scrollLeft 滚动元素
    9. 相对视区的偏移
    10. Element.prototype.getBoundingClientRect
    11. Element.prototype.getClientRects
    12. 元素在视图中的尺寸
    13. HTMLElement.prototype.offsetHeight 包括边框
    14. HTMLElement.prototype.offsetWidth 包括边框
    15. Element.prototype.getBoundingClientRect().width 包括边框
    16. Element.prototype.getBoundingClientRect().height 包括边框
    17. Element.prototype.clientWidth 不包括边框
    18. Element.prototype.clientHeight 不包括边框
    19. Element.prototype.scrollWidth 滚动元素
    20. Element.prototype.scrollHeight 滚动元素
    21. 彻底弄清楚几个宽高
    22. 特定点上最顶层元素
    23. document.elementFromPoint
    24. 滚动元素到视区
    25. Element.prototype.scrollIntoView
    26. Element.prototype.scrollIntoViewIfNeeded
  40. 元素节点内联样式
  41. 获取内联样式
    1. HTMLElement.prototype.style 得到 CSSStyleDeclaration
  42. 设置内联样式
    1. 直接通过 style 获得、设置、删除内联样式属性
    2. style.setProperty
    3. style.getPropertyValue
    4. style.removeProperty
  43. 所有内联样式
    1. style.cssText
    2. Element.prototype.setAttribute、Element.prototype.getAttribute、Element.prototype.removeAttribute
  44. 计算样式
    1. window.getComputedStyle 上面获得样式都是内联，不叠加计算的，这个方法返回的是叠加计算后的实际值。
    2. window.getComputedStyle 得到的 CSSStyleDeclaration 是只读的。
  45. 文本节点
    1. Object <- Node <- CharacterData <- Text 和元素混在一区的文本会转换为文本节点
    2. 文本节点属性和方法
    3. 创建节点
      1. 字符（包括空白符和回车符）会创建文本节点
      2. 编程式创建：document.createTextNode
    4. 节点值
      1. Node.prototype.nodeValue
      2. Node.prototype.textContent 会合并所有子文本节点
      3. CharacterData.prototype.data
      4. Text.wholeText
    5. 操作文本节点
      1. CharacterData.prototype.appendData
      2. CharacterData.prototype.deleteData
      3. CharacterData.prototype.insertData
      4. CharacterData.prototype.replaceData
      5. CharacterData.prototype.substringData
      6. Comment 也继承了 CharacterData，所以也拥有这些方法
    6. 多个兄弟文本节点
      1. 拿上面的例子来说，strong 元素把文本截断，所以得到的 childNodes 的 length 为 3。
      2. 另外也可以编程式地添加两个文本节点，而不会合并。
      3. Node.prototype.normalize 合并兄弟文本节点。
      4. Text.prototype.splitText 分割文本节点
    7. Node.prototype.textContent
      1. 合并返回所有子文本的内容
      2. 设置的时候会移除所有子节点，替换为新的 Text 节点
      3. HTMLElement.prototype.innerText 区别：
      4. innerText 认识 Css，忽略隐藏文本。
      5. innerText 关心 Css 触发重排。
      6. innerText 使文本规范化。
      7. innerText 非标准，新的火狐好像也支持了。
  46. DocumentFragment 节点（文档片段）
  47. 空的文档模板，行为与实时 DOM 树相似，但是仅在内存中存在。
  48. 创建文档片段节点
    1. document.createDocumentFragment
    2. 与直接创建 div，然后创建 DOM 结构的区别：
      1. 文档片段可以包含任意节点（body、html 除外）。
      2. 文档片段插入 DOM 中时，自身不会添加，只插入子节点。
      3. 文档片段插入 DOM 中时实际上是把传输的内容放到了 DOM，自身的内容就没了。
      4. 在内存中创建节点注入到实时节点结构是极其高效的。
  49. 文档片段没有 innerHTML 属性，变通方法是新建一个 div，利用 div 的 innerHTML。
  50. 通过 Node.prototype.cloneNode 将文档片段保存在内存中。
  51. Css 样式表和 Css 规则
  52. 样式概述
    1. 元素内联样式
    2. HTMLLinkElement 外部样式类
    3. HTMLStyleElement 页面内联样式类
    4. CSSStyleSheet 样式表对象类
    5. CSSStyleRule 样式规则类
  53. 创建样式
    1. document.createElement('style')
    2. document.createElement('link')
  54. 获取所有样式表
    1. document.styleSheets（包括外部和内部）
    2. 实时、length 属性、类数组对象。
    3. 单个样式表用 sheet 属性从 HTMLLinkElement 或 HTMLStyleElement 获取
  55. CSSStyleSheet 的属性和方法
  56. CSSStyleRule 的属性和方法
  57. 修改样式规则
    1. CSSStyleSheet 的 insertRule、deleteRule、addRule、removeRule 方法。
    2. 直接通过 CSSStyleRule.prototype.style 进行修改。
  58. CSSStyleSheet.prototype.disabled 使样式表失效。
  59. DOM 中的 JavaScript
  60. 脚本概述
    1. 元素内联脚本，<a href="javascript:void(0)"></a> 和 <button onclick="alert('yo')"></button> 等。
    2. HTMLScriptElement 页面内联脚本。
    3. HTMLScriptElement 外部脚本。
    4. 脚本元素内会新建一个文本节点，可以通过 innerHTML、textContent、innerText 来获取值。
  61. 同步加载和解析
    1. 如果加载和解析是异步的，那么 document.write 输出的位置根本无法确定，而如果在 onload 事件之后调用 document.write 会自动触发 document.open 清空页面，因此 Js 默认采用了同步地加载方式，它会阻塞页面的解析。现代浏览器是支持并发下载脚本的。
    2. 页面内联脚本也是如此，会同步执行，阻塞页面解析。
    3. 因此在同步加载的情况下，把 Js 脚本放到页面底部是比较好的策略。
  62. 异步加载脚本
    1. 首先异步加载的脚本中出现，document.write 会报错。
    2. defer 异步加载、在 DOMContentLoaded 事件之前有序执行。低版本的 IE 支持。
    3. async 异步加载，加载完就执行，不利于依赖管理。IE 10 才支持，优先级高于 defer。
    4. 手动创建 script 标签实现异步加载（前端模块加载器如：seajs、requirejs 使用的都是这种方式）。
  63. onload 和 onreadystatechange
    1. 通常我们会为手动创建的 script 标签绑定一个加载完成的回调，在之后做一些操作，比如 seajs 会在加载完以后把 script 元素及其事件删除，防止内存泄漏，因为 seajs 已经把脚本的内容保存在模块对象上，供延迟调用了。
    2. 而对于 IE 8 及以下的浏览器，Node 不支持 onload 事件，所以使用 onreadystatechange 来代替。
  64. 获取当前执行的脚本
    1. document.currentScript
    2. IE 6-9 下没有这个属性，兼容 IE 的方案。
  65. 获取所有脚本
    1. document.scripts
  66. DOM 事件
  67. 三种添加事件监听方式
    1. 行内属性事件：<div onclick="alert('click')"></div>
    2. 属性事件：mdiv.onclick = () => alert('click')
    3. addEventListener：mdiv.addEventListener('click',() => alert('click'), false)（回调函数的 this 自动绑定到该元素，并且支持绑定多个回调）
    4. IE attachEvent 不支持捕获阶段。
  68. 事件类型
    1. UIEvent
      • load、onload、abort、error 资源加载相关
      • resize、scroll 窗口尺寸相关
      • context menu 右键菜单
    2. FocusEvent
      • blur、focus、focusin、focusout
    3. FormEvent
      • change、reset、submit、select
    4. MouseEvent
      • click、dbclick
      • mousedown、mouseup
      • mouseenter、mouseout 不冒泡
      • mouseleave、mouseover 冒泡
      • mousemove
    5. WheelEvent
      • 浏览器里用的是 mousewheel 规范用的是 wheel
    6. KeyboardEvent
      • keydown、keyup、keypress
    7. TouchEvent
      • touchstart、touchend
      • touchmove、touchcancel
      • touchenter、touchleave
    8. 拖拽相关
      • drag、dragover、drop
      • dragstart、dragend
      • dragenter、dragleave
    9. 文档相关
      • readystatechange
      • DOMContentLoaded
    10. 其它
      • afterprint、beforeprint
      • beforeupload
      • hashchange
      • message
      • offline、online
      • pagehide、pageshow
  69. 移除事件监听
    1. removeEventListener 只支持通过函数引用添加的事件监听函数。
    2. IE detachEvent。
  70. 事件捕获和冒泡
    1. addEventListener 第三个参数为 true 则在捕获阶段触发、false 则在冒泡阶段触发，默认是 false。
    2. 其他两种事件绑定都是在冒泡时触发的。
    3. IE attachEvent 不支持捕获阶段，也没有第三个参数，都是在冒泡阶段触发。
  71. 常见事件对象属性
    1. target 和 currentTarget，currentTarget 是当前活动对象，target 是目标对象，只有在目标阶段，两者才是相等的。
    2. 五个坐标，见彻底弄清楚几个宽高 。
    3. stopPropagation：因为事件可以在各层级的节点中传递, 不管是冒泡还是捕获, 有时我们希望事件在特定节点执行完之后不再传递, 可以使用事件对象的 stopPropagation 方法。
    4. preventDefault：元素上带有的功能. 如: 点击 a 链接节点的跳转动作, 点击 submit 按钮表单会提交等，如果监听这些元素的事件时不希望执行默认动作，就可以使用 preventDefault 方法。
    5. return false：退出执行, return false 之后的所有触发事件和动作都不会被执行。有时候 return false 可以用来替代 stopPropagation 和 preventDefault，除此之外，还可以返回对象, 跳出循环等。
    6. stopImmediatePropagation：和 stopPropagation 区别是这个方法会把绑定在同一个元素的剩下的回调都取消。
    7. eventPhase 属性，0 表示不在事件中，1 表示捕捉阶段、2 表示目标阶段、3 表示冒泡阶段。
    8. 需要注意的是 event 是实时的，也就是说在 console 输出的 event 已经不是当时的那个 event了。
  72. 自定义事件
    1. document.createEvent
    2. initCustomEvent(event,bubble?,cancelable?,event.detail)
    3. fireEvent（IE） 和 dispatchEvent
    4. IE9 里 initCustomEvent 需要第四个参数。
    5. DOM4 里面添加了 CustomEvent。
  73. 模拟出发鼠标事件
    1. 类似 jQuery.trigger() 方法。
    2. 借助 initMouseEvent 来实现。
  74. 事件委托
    1. 事件委托是借助事件冒泡机制，用父级元素来统一管理子级的相同事件。
    2. 原理是不管是哪个子级触发的相同事件，都可以通过 event.target 拿到这个子级元素，然后对其做相应的操作，因为操作逻辑是一样的，因此可以在父级中复用逻辑。
    3. 在处理 click、mousedown、mouseup、keydown、keyup、keypress 等事件时十分有效。
    4. 可以有效的减少绑定，降低内存消耗。
Programming Languages PartB Week1学习笔记——Racket纯函数式编程语言
df1445的博客
09-14 1599
Programming Languages PartB Week1学习笔记——Racket纯函数式编程语言
分享笔记1 之《白帽子讲web安全》
m0_46583081的博客
12-06 576
分享笔记（一）之《白帽子讲web安全》
DOM元素的继承关系和原型链
weixin_43238122的博客
09-19 1429
DOM是树状的数据结构 Document Object Model是一个js对象，数据结构为树型，是将HTML文件中的节点翻译成js对象，浏览器根据这个对象进行界面的渲染。 &lt;!DOCTYPE html&gt; &lt;html lang="en"&gt; &lt;head&gt; &lt;title&gt;HTML&lt;/title&gt; &lt;style&gt;&l
《DOM启蒙》 随笔
weixin_33807284的博客
12-26 147
使用 Javascript 字符串创建并向 DOM 中添加元素与文本节点 innerHTML、outerHTML、textContent 及 insertAdjacentHTML() 属性和方法提供了使用 Javascript 字符串创建并向 DOM 中添加节点的功能。 &lt;!DOCTYPE html&gt; &lt;html lang='en'&gt; &lt;body&gt; ...
DOM启蒙——第一章
Wendelle的博客
04-07 1252
1.文档对象模型 HTML文档被浏览器解析并转换为一个由节点对象组成以体现当前文档的树状结构，DOM的目的是使用JavaScript操作为当前的文档提供一个编程接口。 2.节点对象类型 ●DOCUMENT_NODE (如window.document) ●ELEMENT_NODE如(、、...) ●ATTRIBUTE_NODE(如class="color") ●TEXT_N
DOM启蒙：DocumentFragment节点
里脊的博客
10-30 345
1.DocumentFragment对象概览      把DocumentFragment看做一个空的文档模板，行为与实时DOM树相仿，但仅在内存中存在，并且它的子节点可以很简单地在内存中操作，而后附加到实时DOM。   2. createDocumentFragment()：             创建DocumentFragment             使用文档片段在内存中创建...
DOM启蒙——第二章
Wendelle的博客
04-11 593
1.文档节点 HTMLDocument构造函数在DOM中创建DOCUMENT_NODE(如window.document)。 alert(window.document.constructor);//function HTMLDocument() alert(window.document.nodeType);//DOCUMENT_NODE  9 即HTMLDocument构造函数
dom启蒙读书笔记和测试代码
08-12
《DOM启蒙》是一本深入解析DOM...总的来说，《DOM启蒙》读书笔记和测试代码是学习和实践JavaScript DOM操作的重要参考资料，通过阅读和实践，开发者可以更好地掌握如何利用DOM来构建动态、交互丰富的Web应用。
掌握DOM操作：《DOM启蒙》读书笔记与实践测试代码
资源摘要信息:"《DOM启蒙》读书笔记和测试代码" 《DOM启蒙》是一本专注于Web前端开发中Document Object Model（文档对象模型）的书籍。DOM作为一种以树状结构表示HTML和XML文档的API，被广泛应用于网页交互逻辑的...
JavaScript学习笔记与每日网站开发实践
它融合了JavaScript深度训练、全栈思维启蒙、工程习惯养成和知识沉淀机制，为任何希望进入前端领域的学习者提供了一个极具参考价值的范本。通过持续不断地构建真实可用的网站，开发者不仅掌握了语法和API，更重要的...
DOM启蒙JPG版
12-27
自制图像版，去除目录等无用页面，给想深入原始API的人看，不被各种框架掩盖实质。
DOM启蒙——第六章
Wendelle的博客
04-21 591
1.文本对象概览 HTML文档中的文本表现为Text()构造函数的实例。即文本节点。 var text=document.querySelector("#txt").firstChild; P.appendChild(document.createTextNode(text.constructor));//Text() Text()构造函数构造文本节点，Text从ChracterD
DOM启蒙——第五章
Wendelle的博客
04-16 458
1.CSSOM视图模块中规范了操作元素节点的可视化表象的API。 2.获取元素相对于offsetParent的offsetTop及offsetLeft值 使用offsetTop和offsetLeft属性可以获取元素节点相对于offsetParent的偏移像素量，这些元素节点属性告诉我们某元素上部与左侧边框最外沿到offsetParent上部与左侧边框内侧的距离，以像素为单位。 ●of
DOM启蒙——第四章
Wendelle的博客
04-13 612
1.选取特定元素节点 取得一个元素节点引用的最常用的方式为 ●querySelector() ●getElementById() querySelector()返回文档中符合传入选择器的首个元素节点，即若有多个节点满足条件，则返回第一个。 document.createTextNode(document.querySelector("li").textContent) do
DOM启蒙——第三章
Wendelle的博客
04-12 526
1.HTML文档中每个元素都有个独一无二的javascript构造函数使这些元素实例化为DOM树中的节点对象。 (document.createTextNode(document.querySelector("a").constructor));  //function HTMLAnchorElement(){ [native code] } 2.HTML Element对象属性与方法 va
DOM启蒙——第11章
Wendelle的博客
05-22 637
1.DOM事件概览 ●DOM事件是指发生某种与DOM中元素、document对象或window对象有关的时刻或者契机。 ●可以通过HTML内联属性事件处理程序，属性事件处理程序，或者addEventListener()方法布置事件回调。 var div=document.querySelector("#warp"); //属性事件处理程序 div.onclick=function()
DOM启蒙——第十章
Wendelle的博客
05-18 648
1.插入与执行JavaScript ●通过引入外部JavaScript文件或者编写内联JavaScript来添加JavaScript到HTML文档。 ●两种添加JavaScript到HTML文档的方式都需要使用script元素节点，script元素可以包含JavaScript代码或者使用src属性引入外部JavaScript文件链接。 ●在同一个script标签里引入外部JavaScript
DOM启蒙——第九章
Wendelle的博客
05-14 496
1.CSS样式表 ●通过使用HTMLLinkElement节点(如)引入外部样式表，或者使用HTMLStyleElement节点(如)来定义内联样式表。 P.appendChild(document.createTextNode(": "+document.querySelector("style").constructor)); P.appendChild(document.cre
DOM启蒙：节点概览
里脊的博客
10-21 239
1.DOM:由节点对象组成的树 2.节点类型    节点类型：   DOCUMENT_NODE ELEMENT_NODE ATTRIBUTE_NODE TEXT_NODE DOCUMENT_FRAGMENT_NODE DOCUMENT_TYPE_NODE     这些节点类型常量在浏览器JavaScript环境中是Node对象的属性。    节点接口/构造函数 HTML*Ele...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值