DOM简介

来源：互联网发布：如何安装网络驱动程序编辑：程序博客网时间：2024/05/22 09:07

文档对象模型，针对HTML和XML文档的一个API；DOM描绘了一个层次化的节点树，开发人员可以增删改查页面的某一个部分。

1, 所有的对象都实现了Node节点，所有的Node节点都有nodeType、nodeName、nodeValue这三个属性，有12中nodeType：
元素element 1(标签)
属性attr 2(标签里面的属性)
文本text 3(标签里面的文字)
注释comments 8
文档document 9；
主要有以下这些属性：
childNotes：返回子节点列表，不是一个数组，但是可用[index]访问；
appendChild(newNode):在子节点末尾添加一个新的节点；
insertBefore(newNode, node):在子节点node前添加一个新节点；
replaceChild(newNode, node):用newNode替换node；
removeChild(node)：删除子节点node；

2，Document类型：表示文档，在浏览器中document是HTMLDocument的实例，也是window的一个属性，可以创建Node节点。
document有用的属性：
documentElement:指向<html>元素
body:指向<body>元素
title、URL、domain、referrer等

查找元素：
getElementById(String):返回第一个以入参为Id的元素；
getElementByTagName()：入参为标签名（字符串形式），返回一组与ModeList很像的元素，可以通过namedItem(name)获取单个元素；
getElementByName():同上，只是关键字变成了Name；

DOM一致性检查：
document.implementation.hasFeature("XML","1.0");返回值是boolean,标识是否实现某个版本的特性；

文档写入：
write()、writeln()、open()、close()四个方法；
write()写入时，不要写入</script>字符串，需要转义；

3，Element类型：用于表现XML或HTML元素。
三个操作方法：
getAttribute("id")：也可以是element元素的自定义属性，直接用div.id这种属性访问方式只能访问公认特性；
style和onclick属性，通过方法访问返回的是字符串，属性访问访问对应的对象；公认特性推荐用属性访问；
setAttribute("name", "value"):存在特性就替换，不存在就创建；属性赋值不能创建自定义属性；
removeAttribute("name"):删除对应的属性；

element元素是唯一拥有attributes属性的DOM节点类型，attributes主要用来管理element的属性；
主要用于遍历属性，其他属性的操作用上面的三个方法即可；

4，Text类型：纯文本类容；
不支持子节点，拥有很多操作text的方法；文本节点的父元素可以将两个文本节点合并，也可以拆分；
注意<p/>这个是段落Element节点，并非文本节点，文本节点是元素的text属性；
Comment类型：注释类型；
不要在<html>外面添加注释，浏览器一般会忽视。
CDATASection类型：只针对XML文档。
DocumentType类型：包含与文档的doctype有关的所有信息。
DocumentFragment类型：轻量级文档，可以包含和控制节点，但是不占用额外的资源；主要用途是统一添加一组节点（避免添加过程中页面多次渲染）；
文档片段本身永远不会出现在文档中，在节点中添加文档片段，相当于把文档片段包含的节点添加进来。
Attr类型：表针元素特性；不被认为是DOM树的一部分；
拥有三个值：name\value\specified；第三个属性表针是否是自定义属性；
这个属性也可以用document来创建然后直接设置给element元素（实际用Element的三个操作方法更适合）。

5，DOM操作技术
动态脚本：页面加载时不存在，通过修改DOM动态添加；
脚本也能被document所创建，然后添加给Node节点；添加进去时即开始加载脚本。
动态样式同上：<link>嵌套，<style>指定具体的样式。
<table>的动态创建比较麻烦，所以有一些特定的方法。

6，DOM操作往往是JS程序中开销最大的部分，NodeList对象都是动态的，每次访问这类对象都会重新查询，所以要尽量减少DOM操作。

7，DOM扩展：主要包括Selectors API以及HTML5 DOM扩展，还有一些专有DOM扩展。
querySelector("CSS选择符")与querySlectorAll()方法，可以查询一个或多个元素，是元素的快照，不会反复动态查询；
通过document调用时，会在整个文档元素中查询匹配的元素；Element调用时，只会在其后代中查找匹配的元素。
为了解决空白节点与注释在各浏览器中的差异，DOM元素新增了元素遍历的方法，不包括文本节点和注释。
HTML5添加非标准的属性，以data-开头，会保存在元素的dataset属性中；

下面三个方法是浏览器级别的，速度较快，但是会有生成和销毁HTML解析器的代价，所以次数要少，最好先生成具体的HTML语句然后统一调用：
innerHTML在读模式下会返回调用元素的所有子节点，在写模式下会根据指定的值创建DOM树，替换调用元素的子节点；
outerHTML属性与上类似，不同的是，这个属性包括调用者本身；
insertAdjacentHTML("beforebegin","HTML语句"):HTML元素作为第一个子元素插入到调用元素中；

0 0