DOM 入门：一篇讲透节点树、DOM 属性和 getElementById

学前端也好，做 Web 安全也好，DOM 这关迟早要过。很多人刚接触 JavaScript 时，最容易出现两种状态：要么只会写语法，碰到页面元素就不会操作要么会抄document.getElementById()，但根本不知道为什么能拿到、什么时候拿不到结果就是页面交互看不懂，前端逻辑跟不明白，做安全测试时看到 DOM XSS、节点注入、页面篡改这些词，也总觉得隔着一层。今天这篇文章，我们就把 DOM 里最基础、也最关键的三块内容讲透：什么是节点树DOM 常用属性到底能拿到什么getElementById()为什么是前期最重要的 DOM 方法之一一、先弄明白：DOM 到底是什么？DOM，全称Document Object Model，中文叫文档对象模型。你可以把它理解成一句最简单的话：浏览器为了让 JavaScript 能操作网页，把整个 HTML 文档解析成一棵“对象树”。这棵树里面，每个标签、每个层级关系，都可以被 JavaScript 找到并操作。比如你写一段页面：!DOCTYPEhtmlhtmlheadtitle测试页面/title/headbodydiv欢迎学习 DOM/div/body/html浏览器不会把它当成“几行普通文本”来看，而是会把它组织成这样一棵结构：documenthtmlheadtitlebodydiv这就是 DOM。思维导图 1：什么是 DOM二、节点树为什么这么重要？因为网页里的标签，不是平铺在页面上的，它们是有层级关系的。你可以把 HTML 看成一棵树：最上面有根根下面有分支分支下面还有子分支层层嵌套例如这段代码：htmlheadtitle标题/title/headbodydivp这是段落/p/div/body/html它的节点关系是：html是最外层节点head和body是html的子节点title是head的子节点div是body的子节点p是div的子节点这就是典型的节点树结构。为什么一定要理解这点？因为后面你做这些操作时，都离不开节点树的概念：获取某个元素判断父子关系插入新节点删除节点分析数据最终进入了哪个位置审计 DOM XSS 的 source 和 sink你连树都没概念，后面一切都是乱的。思维导图 2：节点树结构三、DOM 里最常见的 4 个属性，必须先记住刚接触 DOM 时，最常用、也最容易上手的，是下面这四个属性：document.documentElementdocument.headdocument.titledocument.body注意，它们都是document下面的属性。也就是说，document 是整个页面的总入口。四、document.documentElement：拿到真正的 html 根节点这个属性的作用很明确：获取页面中的html标签节点。示例代码!DOCTYPEhtmlhtmllang="zh-CN"headmetacharset="UTF-8"titleDOM 示例/title/headbodyh1欢迎学习 DOM/h1/body/htmlconsole.log(document.documentElement);console.log(document.documentElement.tagName);运行结果html lang="zh-CN".../htmlHTML这说明：document.documentElement返回的是标签节点对象它拿到的就是页面里的html元素思维导图 3：document.documentElement五、document.head：拿到 head 标签节点这个属性用于获取head元素。示例代码console.log(document.head);console.log(document.head.tagName);运行结果head.../headHEAD注意这里一个细节：它拿到的是整个head节点本身，不是内部某个子标签。比如它不会直接替你拿到meta或title标签。思维导图 4：document.head六、document.title：这是文本，不是标签对象这个点很容易出错，必须单独说。结论先记住：document.title获取的是网页标题文本，而不是title标签对象。示例代码title我的测试页面/titleconsole.log(document.title);运行结果我的测试页面你看到没有？打印出来的是标题内容，而不是：title我的测试页面/title更重要的是，它还能直接修改标题document.title="标题已修改";console.log(document.title);运行结果标题已修改同时浏览器标签页标题也会立刻变化。完整案例