课程名称:破解JavaScript高级玩法
课程章节:第7章 如果不用vue,react框架,如何操作DOM?
主讲老师:Cloud
课程内容:
今天学习的内容包括:
7-1 玩转Node节点:不应被忽视的 nodeType——nodeType的节点类型以及相关特性。
课程收获:
Node的nodeType(节点类型 nodeType)
- 1、元素节点,例如 div span 等
- 3、文本;对象模型:Text
- 8、注释;对象模型:Comment
- 9、文档;对象模型:Document
- 10、文档类型;对象模型:DocumentType
- 11、文档碎片;对象模型:DocumentFragment
Text - 3
- 神秘空白的文本节点
- 使用childNodes访问
- 使用nodeValue取值
有趣的拆家和合并
- splitText :拆家
- Eelement.normalize
Comment - 8
- 注释为
'<!--'和'-->'
之间的内容 - nodeValue获取其内容
Document重要的方法和属性
- 节点查找。document.querySelector,document.querySelectorAll等等
- 节点结合信息。document.all, document.forms,document.scripts, document.images.document.links等等
- cookie。document.cookie
DocumentType - 10
- 访问方式:document.doctype , document.firstChild
- 有用的属性只有一个,就是name。返回值是"html"
DocumentFragment - 11
- 就像标准的document—样,存储由节点( nodes )组成的文档结构
- 所有的节点会被一次插入到文档中,而这个操作仅发生一个重渲染的操作。
- 常用语批量创建大量节点,提高性能。
Element系列 - 1
- 创建:document.createElement
- children(nodeType = 1)和childNodles(全部)
今天 学习了 玩转Node节点:不应被忽视的 nodeType,通过今天的学习,对浏览器的Dom节点有了清晰的了解。对自己说一句,加油😀~
坚持打卡,坚持学习!明天见💪~