JavaScript之DOM-优快云博客

本文详细介绍了DOM（文档对象模型）的基本概念，包括节点类型、文档类型、元素类型和文本类型的属性与方法。同时探讨了如何通过JavaScript操作DOM来实现网页内容的动态更新。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

DOM（document object model）文档对象模型

节点层次（整个文档是一个文档节点，每个HTML标签是一个元素节点，包含在HTML元素中的文本是文本点，每个HTML属性是一个属性节点，注释属于注释节点）
1.Node类型：
A.每个节点具有的属性：
①nodeType(节点类型)：1->元素节点；2->属性节点；3->文本节点；8->注释节点
②nodeName(节点名称)
③nodeValue(节点值)
④childNodes[] (扩展为children属性)
⑤firstChild(第一个子节点)
⑥lastChild(最后一个子节点)
⑦parentNode(父节点)
⑧nextSibling(后一个兄弟节点)

B.节点操作方法
①（增）追加到页面中：父对象.appendChild(子对象)；
父对象.insertBefore(要插入的节点对象，参考节点对象)；
②（改）修改/替换：父对象.replaceChild(要修改的节点，要替换的节点) -> 此处被替换的节点仍然存在在文档中只是没了位置
③（删）删除节点：父对象.removeChild(要删除的子节点对象)->此处被删除的节点只是不在页面中显示了，但在内存存在。
④（复制）复制节点：深度克隆cloneNode(true)->包括整个子节点树；浅度克隆cloneNode(false)->只包括当前节点本身而已

2.Document类型（js就是操作Document类型来表现文档；其中document对象是HTMLDocument(继承自Document类型)的一个实例，表示整个HTML页面，而且document对象也是window对象下的一个全局对象属性）

①文档子节点：document.documentElement->指代”<html>“元素 || document.body->指代”<body>“元素

②文档信息包括：title(标题) || URL(地址栏中的url) || domain(域名) || referer

③文档中查找元素：document.getElementById() || document.getElementsByTagName()

④文档中特殊集合：
document.anchors(文档中所有带name特性的<a>标签元素) document.forms(文档中所有<form>标签元素) document.images(文档中所有<img>标签元素) document.links(文档中所有带href属性的<a>标签元素)

⑤DOM的一致性检测 document.implementation.hasFeature()

⑥文档的写入:write() || writeln() || open() || close()

3.Element类型（用于表现XML/HTML元素，提供元素标签名、子节点及特性访问）

①访问元素标签名，使用.nodeName || .tagName属性，注意转化成大写

②所包含的属性元素：id || className || title || dir || lang

③获取属性:.getAttribute()这里需注意HTML5的自定义data-前缀属性

④设置属性：.setAttribute()

⑤删除属性：.removeAttribute()

⑥创建元素：document.createElement('标签名')新建元素可以自己设置属性

⑦元素的子节点：由childNodes属性访问，但特别需注意在IE/其他浏览器对子节点个数解析的不同

4.Text类型（包含可以照字面解释的纯文本内容）

①支持的方法：
添加：.appendData(text) 删除：.deleteData(offset,count) 插入：.insertData(offset,text) 替换：.replaceData(offset,count,text) .splitData(offset) || .substringData(offset,count)
②创建文本节点 document.createTextNode('');

③规范化文本节点：.normalize() 合并成一个节点

④分割文本节点： .splitText() 分割成两个文本节点

其余的类型不再讨论反正在《JavaScript高级程序设计第三版》中的内容

5.comment类型(DOM中的注释) document.createComment()
6.CDTASection类型(只针对基于XML文档，表示CDATH区域 document.createCDataSection() 存在兼容性的问题)
7.DocumentType类型(包含与doctype有关的所有信息)
8.DocumentFragment类型
9.Attr类型

DOM总结：理解DOM的关键就是理解DOM对性能的影响，DOM操作往往是JavaScript程序中开销最大的部分，而因访问NodeList导致的问题为最多，NodeList对象都是”动态的”，这就意味着每次去访问NodeList对象，都会运行一次查询，有鉴于此，优化性能其中的一个方式就是减少DOM操作