浏览器DOM：你知道HTML的节点有哪几种吗？
winter
该思维导图由 AI 生成，仅供参考
你好，我是 winter。
今天我们进入浏览器 API 的学习, 这一节课，我们来学习一下 DOM API。
DOM API 是最早被设计出来的一批 API，也是用途最广的 API，所以早年的技术社区，常常用 DOM 来泛指浏览器中所有的 API。不过今天这里我们要介绍的 DOM，指的就是狭义的文档对象模型。
DOM API 介绍
首先我们先来讲一讲什么叫做文档对象模型。
顾名思义，文档对象模型是用来描述文档，这里的文档，是特指 HTML 文档（也用于 XML 文档，但是本课不讨论 XML）。同时它又是一个“对象模型”，这意味着它使用的是对象这样的概念来描述 HTML 文档。
说起 HTML 文档，这是大家最熟悉的东西了，我们都知道，HTML 文档是一个由标签嵌套而成的树形结构，因此，DOM 也是使用树形的对象模型来描述一个 HTML 文档。
DOM API 大致会包含 4 个部分。
节点：DOM 树形结构中的节点相关 API。
事件：触发和监听事件相关 API。
Range：操作文字范围相关 API。
遍历：遍历 DOM 需要的 API。
事件相关 API 和事件模型，我们会用单独的课程讲解，所以我们本篇文章重点会为你介绍节点和遍历相关 API。
DOM API 数量很多，我希望给你提供一个理解 DOM API 设计的思路，避免单靠机械的方式去死记硬背。
公开
同步至部落
取消
完成
0/2000
荧光笔
直线
曲线笔记
复制
AI
- 深入了解
- 翻译
- 解释
- 总结
浏览器DOM API是最早设计出来的API之一，也是用途最广的API之一。本文介绍了DOM API的基本概念和节点相关的API。DOM API主要包含节点、事件、Range和遍历四个部分，其中本文重点介绍了节点和遍历相关API。 在节点部分，文章介绍了文档对象模型的基本概念，节点的类型和继承关系，以及Node提供的属性和操作DOM树的API，以及一些高级API的使用方法。 在遍历部分，文章介绍了通过Node的相关属性和NodeIterator、TreeWalker来遍历DOM树的方法，以及它们的基本用法和特点。 此外，文章还介绍了元素和属性相关的操作方法，以及查找元素的能力。最后，建议在需要遍历DOM时，直接使用递归和Node的属性。 另外，文章提到了Range API，它是一个专业领域的API，用于表示HTML上的范围，可以比节点API更精确地操作DOM树，但使用起来较为麻烦，在实际项目中并不常用。 总的来说，本文通过介绍DOM API的节点和遍历相关API，为读者提供了对浏览器DOM API设计思路的理解，避免单靠机械的方式去死记硬背。 文章还提到了命名空间的问题，特别是在SVG场景中需要考虑命名空间的问题。 总的来说，本文内容丰富，涵盖了DOM API的节点、遍历和Range相关的API，为读者提供了全面的了解。
仅可试看部分内容，如需阅读全部内容，请付费购买文章所属专栏
《重学前端》，新⼈⾸单¥59
《重学前端》，新⼈⾸单¥59
立即购买
© 版权归极客邦科技所有，未经许可不得传播售卖。 页面已增加防盗追踪，如有侵权极客邦将依法追究其法律责任。
登录 后留言
全部留言(25)
- 最新
- 精选
- kgdmhny老师,请问一下,"对 DOM 而言，Attribute 和 Property 是完全不同的含义，只有特性场景下，两者才会互相关联（这里在后面我会详细讲解，今天的文章里我就不展开了）"后面有讲解这块吗？
作者回复: 有啊
2019-06-052 
周序猿// 深度优先 function deepLogTagNames(parentNode){ console.log(parentNode.tagName) const childNodes = parentNode.childNodes // 过滤没有 tagName 的节点，遍历输出 Array.prototype.filter.call(childNodes, item=>item.tagName) .forEach(itemNode=>{ deepLogTagNames(itemNode) }) } deepLogTagNames(document.body) // 广度优先 function breadLogTagNames(root){ const queue = [root] while(queue.length) { const currentNode = queue.shift() const {childNodes, tagName} = currentNode tagName && console.log(currentNode.tagName) // 过滤没有 tagName 的节点 Array.prototype.filter.call(childNodes, item=>item.tagName) .forEach(itemNode=>{ queue.push(itemNode) }) } } breadLogTagNames(document.body)2019-03-10141
阿成第一段代码中的 DocumentFragment 应该改为 DocumentType... /** * @param {Element} el * @param {(Element) => void} action function walk (el, action) { if (el) { action(el) walk(el.firstElementChild, action) walk(el.nextElementSibling, action) } } walk(document.documentElement, el => console.log(el.nodeName)) // 如果想要去重... const set = new Set() walk(document.documentElement, el => { set.add(el.nodeName) }) for (let n of set) console.log(n)2019-03-09214
天亮了这样可以把tagName全打印出来... document.getElementsByTagName('*');2019-05-06311
拾迹document.querySelectorAll('*')，这样有点过分了2019-06-173- kinoinsertBefore(newNode,null)和appendChild的区别是啥2019-03-1213
我叫张小咩²⁰¹⁹var walker = document.createTreeWalker(document.body, NodeFilter.SHOW_ELEMENT, null, false) var node while(node = walker.nextNode()) console.log(node.tagName) ---------- or recursive ------------ const result = [] function getAllTagName(parent) { const childs = Array.from(parent.children) result.push(...childs.map(el => el.tagName)) for (var i = 0; i < childs.length; i++) { if (childs[i].children.length) getAllTagName(childs[i]) } if (i == 0) return } getAllTagName(document) console.log(result)2019-03-103
小二子大人const root = document.getElementsByTagName('html')[0]; // 深度优先遍历 function deepLogTagName(root) { console.log(root.tagName); if (root.childNodes.length > 0) { for (let i = 0; i < root.childNodes.length; i++) { if (root.childNodes[i].nodeType === 1) { deepLogTagName(root.childNodes[i]); } } } } deepLogTagName(root); console.log("111111111111111111111") // 广度优先遍历 console.log(root.tagName); function breadLogTagName(root) { if (root.childNodes.length > 0) { for (let i = 0; i < root.childNodes.length; i++) { if (root.childNodes[i].nodeType === 1) { console.log(root.childNodes[i].tagName); } } for (let i = 0; i < root.childNodes.length; i++) { if (root.childNodes[i].nodeType === 1) { breadLogTagName(root.childNodes[i]); } } } } breadLogTagName(root)2019-05-081
笨鸟function loop(node){ if(!node){ return } if(node.nodeType === document.ELEMENT_NODE) console.log(node.nodeName); if(node.childNodes){ node.childNodes.forEach(child => { loop(child) }) } } loop(document)2019-03-261
Link第一段代码中的 DocumentFragment 应该改为 DocumentType2019-03-111
收起评论