梳理一下脉络，重新认识一下JavaScript这门语言。
DOM 是Document、Object、Model（文档对象模型）
JavaScript通过ECMAScript编写程序让浏览器来解析，利用ECMAScript通过BOM(Browser Object Model)即浏览器对象模型，来操作浏览器窗口、浏览器导航对象、屏幕分辨率、浏览器历史、cookie等等。通过DOM操作HTML，赋予HTML行为。
是对HTML标签、属性、文本解析后存放在内存中的倒置的树
•树中的标签、属性、文本统称为节点（Node）
•标签称为元素节点（Element)
•属性称为属性节点(Atrribute)
•文本称为文本节点(Text)
•DOM的核心对象为document
节点的关系：父节点、子节点、兄弟节点、前兄弟节点、后兄弟节点、叶子节点、根节点
获取文档的根
document.getDocumentElement;//获取HTML元素
document.body;//获取body元素
•Document 对象是 Window 对象的一部分,每个载入浏览器的 HTML 文档都会成为 Document 对象
•Document 对象集合
集合描述all[]提供对文档中所有HTML元素访问。anchors[]返回对文档中所有Anchor对象的引用。applets返回对文档对象所有Applet对象的引用。forms[]返回对文档中所有Form对象引用。images[]返回对文档中所有Image对象引用。links[]返回对文档中所有Area和Link对象引用。
document的常用属性
属性
描述URL
返回当前文档的 URL。body提供对 <body> 元素的直接访问。
对于定义了框架集的文档，该属性引用最外层的 <frameset>。
documentElement返回html dom中的root 节点 即<html>cookie设置或返回与当前文档有关的所有 cookie。domain返回当前文档的域名。lastModified返回文档被最后修改的日期和时间。referrer返回载入当前文档的文档的 URL。title返回当前文档的标题。
Document 对象方法
方法
描述close()关闭用 document.open() 方法打开的输出流，并显示选定的数据。getElementById()返回对拥有指定 id 的第一个元素的引用。getElementsByName()返回带有指定名称的元素集合。getElementsByTagName()返回带有指定标签名的元素集合。getElementsByClassName()返回带有指定类样式的元素集合。open()打开一个流，以收集来自任何 write() 或 writeln() 方法的输出。
新建文档，覆盖原来的文档内容
write()向文档写 HTML 表达式 或 JavaScript 代码。writeln()等同于 write() 方法，不同的是在每个表达式之后写一个换行符。
1、querySelector
根据选择器查找元素，返回单个元素，无论选择器找到的元素有多少，只会返回第一个匹配的元素，如果未找到匹配的元素，则返回null。
2、querySelectorAll
根据选择器查找元素，返回元素集合，无论选择器找到的元素有多少，都会返回元素集合（NodeList），如果未找到匹配的元素，则返回空集合。
Element对象
•Element代表页面中的标签元素，如<div><a>
•Element的尺寸属性
属性
描述element.offsetHeight返回元素的高度。element.offsetWidth返回元素的宽度。element.offsetLeft返回元素的水平偏移位置。element.offsetParent返回元素的偏移容器。element.offsetTop返回元素的垂直偏移位置。element.clientHeight返回元素的可见高度。element.clientWidth返回元素的可见宽度。element.scrollHeight返回元素的整体高度。element.scrollLeft返回元素左边缘与视图之间的距离。element.scrollTop返回元素上边缘与视图之间的距离。element.scrollWidth返回元素的整体宽度。
元素自身属性的操作
属性 / 方法
描述element.className设置或返回元素的 class 属性。element.cloneNode()克隆元素。element.id设置或返回元素的 id。element.innerHTML设置或返回元素的内容。element.nodeName返回元素的名称。可能是元素名，也可能是属性名element.nodeType返回元素的节点类型,1元素，2、属性，3、文本。element.nodeValue设置或返回元素值。元素节点没有此属性element.style设置或返回元素的 style 属性。element.tabIndex设置或返回元素的 tab 键控制次序。element.tagName返回元素的标签名。，只是元素element.textContent设置或返回节点及其后代的文本内容。element.title设置或返回元素的 title 属性。
Element对象
•属性的操作
属性 / 方法
描述element.attributes返回元素属性的 NamedNodeMap。element.getAttribute()返回元素节点的指定属性值。element.getAttributeNode()返回指定的属性节点。element.hasAttribute()如果元素拥有指定属性，则返回true，否则返回 false。element.hasAttributes()如果元素拥有属性，则返回 true，否则返回 false。element.setAttribute()把指定属性设置或更改为指定值。element.setAttributeNode()设置或更改指定属性节点。
•父及兄弟元素的操作
属性
描述element.nextSibling返回位于相同节点树层级的下一个节点。element.ownerDocument返回元素的根元素（文档对象）。element.parentNode返回元素的父节点。element.previousSibling返回位于相同节点树层级的前一个节点。
•子元素的操作
属性
描述element.childNodes返回元素子节点的 NodeList。element.firstChild返回元素的首个子节点element.getElementsByTagName()返回拥有指定标签名的所有子元素的集合。element.hasChildNodes()如果元素拥有子节点，则返回 true，否则 false。element.lastChild返回元素的最后一个子节点。element.appendChild()向元素添加新的子节点，作为最后一个子节点。element.insertBefore()在指定的已有的子节点之前插入新节点。element.removeChild()从元素中移除子节点。element.replaceChild()替换元素中的子节点。nodelist.item()返回 NodeList 中位于指定下标的节点。nodelist.length返回 NodeList 中的节点数。
创建新的元素
documet.createElement("div");
添加内容
innerHTML = ""
innerText = ""
转载于:https://www.cnblogs.com/QQPrincekin/p/10458835.html
相关资源：dom4j-1.6.1.jar (dom4j) 欢迎下载