【金秋打卡】第13天 从函数到函数式编程之路

课程名称：破解JavaScript高级玩法
课程章节：第7章 如果不用vue，react框架，如何操作DOM？
主讲老师：Cloud

课程内容：

今天学习的内容包括：
7-4 慧眼区分几个近亲属性——长相差不多的属性，学习了解。

课程收获：

HTMLElement.innerText VS Node.textContent

• HTMLElement.innerText:表示一个节点以及后代被渲染的文本内容
• Node.textContent:表示一个节点以及其后代节点的文本内容

innerText与textContent区别

总结

• 最大区别:innerText可操作已被渲染的内容，而textContent不会
• innerText受样式影响会触发浏览器绘制部分或全部页面，带来性能问题，尽可能使用textContent

Node.nodeValue VS value: nodeValue

• 对于text, comment,和CDATA节点来说, nodeValue返回该节点的文本内容
• 对于attribute节点来说,返回该属性的属性值

Node.nodeValue

• text, comment,和CDATA对应下面表格的nodeType的值3,8,4

value

• 特定的一些HTMLElement元素，用value属性获取其值

Node.nodeValue与value的区别

• nodeValue是文本节点，属性节点，注释节点等类型的节点用来取文本/值的属性。
• vlaue是特定的元素节点用来取值的属性。

clientWidth,offsetWidth,scrollWidth-几个概念

• 内容：content
• 内边距：padding
• 边框：border
• 外边距：margin
• 滚动条

clientWidth

• Element.clientWidth(元素宽度)
• width + 左右padding (不包含border,margin,滚动条)

offsetWidth

• HTMLElement.offsetWidth（元素布局宽度）
• width + 左右padding + 左右border + 滚动条（不包含margin）

scrollWidth

• Element.scrollWidth（元素内容宽度）
• scrollWidth 是测量元素内容宽度，包括由于overflow溢出而在屏幕上 不可见的内容。

节点位置关系-总结

• compareDocumentPosition 返回的是数字，带组合意义的数据，不仅仅可以返回包含，还可以返回在之前之后等信息
• contains 返回的是布尔值，仅仅告诉你是否有包含关系

大小/位置-Element.getBoundingClientRect

• 定义：返回元素的大小及其相对于可视化窗口（视口）的位置。

大小/位置-Element.getClientRects

• 定义：返回盒子的边界矩形集合。
• 定义：对于行内元素，元素内部的每一行都会有一个边框；对于块级元素，如果里面没有其他元素，一整块元素只有一个边框。

加载完毕事件监听-window.onload

• 定义：在文档装载完成后会触发 load 事件。此时，在文档中的所有对象都在DOM中，所有图片，脚本，链接以及子框架都完成了装载

加载完毕事件监听-DOMContentLoaded

• 定义：当初始的 HTML 文档被完全加载和解析完成之后，DOMContentLoaded 事件被触发，而无需等待样式表、图像和子框架(iframe)的完全加载。
• jquery的方法

节点复制 Node.cloneNode

• deep:true 则该节点的所有后代节点也都会被克隆
• deep:false 则只克隆该节点本身

节点复制 Node.cloneNode 注意点

• cloneNode deep参数在不同版本的浏览器实现中，默认值可能不一样， 所以强烈建议写上值。
• cloneNode 会克隆一个元素节点会拷贝它所有的属性以及属性值,当然也就包括了属性上绑定的事件(比如onclick=“alert(1)”),但不会拷贝那些使用addEventListener()方法或者node.onclick = fn这种用JavaScript动态绑定的事件

节点复制 总结

• adoptNode 从外部文档进行拷贝
• importNode 从外部文档进行拷贝，并从外部文档删除
• cloneNode 从本文档进行复制，有浅复制和深复制

子节点集合 childNodes,children

• Node.childNodes: 节点的子节点集合，包括元素节点、文本节点、注释节点等
• Element.children:返回的只是节点的元素节点集合，即nodeType为1的节点

今天 学习了 慧眼区分几个近亲属性，今天的学习只有一个感觉，属性太多了，记不住啊。对自己说一句，加油😀~

坚持打卡，坚持学习！明天见💪~
​

​​​

​