Dom

nodeType节点类型

nodeName 和 nodeValue 属性

nodeName中保存的始终都是元素的标签名

childNodes

每个节点都有一个childNodes 属性，其中保存着一个 NodeList 对象。NodeList是一种类数组 对象，用于保存一组有序的节点，可以通过位置来访问这些节点。
每个节点都有一个parentNode 属性，该属性指向文档树中的父节点。包含在childNodes列表中 的所有节点都具有相同的父节点，因此它们的 parentNode 属性都指向同一个节点。此外，包含在 childNodes 列表中的每个节点相互之间都是同胞节点。通过使用列表中每个节点的 previousSibling 和 nextSibling 属性，可以访问同一列表中的其他节点。列表中第一个节点的 previousSibling 属性 值为 null，而列表中最后一个节点的nextSibling 属性的值同样也为 null
父节点的 firstChild和 lastChild属性分别指向其 childNodes列表中的第一个和最后一个节点。
所有节点都有的一个属性是 ownerDocument，该属性指向表示整个文档的文档节点。这种关 系表示的是任何节点都属于它所在的文档，任何节点都不能同时存在于两个或更多个文档中。通过这个 属性，我们可以不必在节点层次中通过层层回溯到达顶端，而是可以直接访问文档节点

方法

创建元素

createElement()
这个方法只接受一个参数，即要创建元素的标签名。

createTextNode()创建新文本节点

创建新文本节点，这个方法接受一个参数——要插入节点 中的文本

createAttribute()创建新的特性节点

规范化文本节点(合并)

如果 在一个包含两个或多个文本节点的父元素上调用 normalize()方法则会将所有文本节点合并成一个 节点，结果节点的 nodeValue 等于将合并前每个文本节点的 nodeValue 值拼接起来的值。

var attr = document.createAttribute("align");
attr.value = "left";
element.setAttributeNode(attr);

分割文本节点

Text类型提供了一个作用与normalize()相反的方法:splitText()

添加节点appendChild()||insertBefore()

最常用的方法是appendChild()，用于向childNodes 列表的末尾添加一个节点
如果传入到appendChild()中的节点已经是文档的一部分了，那结果就是将该节点从原来的位置 转移到新位置。即使可以将 DOM 树看成是由一系列指针连接起来的，但任何 DOM 节点也不能同时出 现在文档中的多个位置上。因此，如果在调用 appendChild()时传入了父节点的第一个子节点，那么 该节点就会成为父节点的最后一个子节点
如果需要把节点放在childNodes 列表中某个特定的位置上，而不是放在末尾，那么可以使用 insertBefore()方法。这个方法接受两个参数:要插入的节点和作为参照的节点。插入节点后，被插 入的节点会变成参照节点的前一个同胞节点(previousSibling)，同时被方法返回。如果参照节点是 null，则 insertBefore()与 appendChild()执行相同的操作

DocumentFragment类型

假设我们想为

元素添加 3 个列表项。如果逐个地添加列表项，将会导致浏览器反复渲染(呈 现)新信息。为避免这个问题，可以像下面这样使用一个文档片段来保存创建的列表项，然后再一次性 将它们添加到文档中

const fragment = document.createDocumentFragment();
 const ul = document.getElementById("myList");
    let li = null;
    Array(3).fill().forEach((a,b)=>{
            li = document.createElement('li');
            li.appendChild(document.createTextNode(b));
            fragment.appendChild(li)
    })
  ul.appendChild(fragment);

替换节点replaceChild()

replaceChild()方法接受的两个参数是:要插入的节点和要替换的节点。要替换的节点将由这个 方法返回并从文档树中被移除，同时由要插入的节点占据其位置

删除节点removeChild()

如果只想移除而非替换节点，可以使用 removeChild()方法。这个方法接受一个参数，即要移除 的节点。被移除的节点将成为方法的返回值

克隆节点cloneNode()

cloneNode(true)深克隆复制节点及其整个子节点树
cloneNode(false)浅克隆只复制节点本身

文档的子节点

documentElement、firstChild 和 childNodes[0]的值相同，都指向 元素。

可以通过doctype 属性(在浏览器中是 document.doctype)来取得对的引用

document.title//取得文档标题
document.URL//取得完整的 URL
document.domain//取得域名
document.referrer//取得来源页面的 URL

最后三个属性中，只有 domain 是可以设置的。但由于安全方面的限制，也并非可以给 domain 设 置任何值。如果 URL 中包含一个子域名，例如 p2p.wrox.com，那么就只能将 domain 设置为"wrox.com" (URL 中包含"www"，如 www.wrox.com 时，也是如此)。不能将这个属性设置为 URL 中不包含的域，
当页面中包含来自其他子域的框架或内嵌框架时，能够设置document.domain就非常方便了。由 于跨域安全限制，来自不同子域的页面无法通过 JavaScript 通信。而通过将每个页面的 document.domain 设置为相同的值，这些页面就可以互相访问对方包含的 JavaScript 对象了。例如， 假设有一个页面加载自 www.wrox.com，其中包含一个内嵌框架，框架内的页面加载自 p2p.wrox.com。 由于 document.domain 字符串不一样，内外两个页面之间无法相互访问对方的 JavaScript 对象。但如 果将这两个页面的 document.domain 值都设置为"wrox.com"，它们之间就可以通信了。
浏览器对 domain 属性还有一个限制，即如果域名一开始是“松散的”(loose)，那么不能将它再设 置为“紧绷的”(tight)。换句话说，在将 document.domain 设置为"wrox.com"之后，就不能再将其 设置回"p2p.wrox.com"，否则将会导致错误

查找元素

getElementById()//按id查找
getElementsByTagName()//按标签名查找
querySelector()//返回匹配指定 CSS 选择器元素的第一个子元素
querySelectorAll()//返回匹配指定 CSS 选择器元素的所有子元素节点列表
getElementsByClassName()//返回文档中所有指定类名的元素集合，作为 NodeList 对象。
getElementsByName()//返回带有给定 name 特性的所有元素
document.anchors，包含文档中所有带 name 特性的元素
document.applets，包含文档中所有的元素，因为不再推荐使用元素，
所以这个集合已经不建议使用了
document.forms，包含文档中所有的
元素，document.getElementsByTagName("form")
得到的结果相同
document.images，包含文档中所有的元素，与 document.getElementsByTagName
("img")得到的结果相同
document.links，包含文档中所有带 href 特性的元素
 
 
文档写入
 
 
有一个 document 对象的功能已经存在很多年了，那就是将输出流写入到网页中的能力。这个能力 体现在下列 4 个方法中:write()、writeln()、open()和 close()。其中，write()和 writeln() 方法都接受一个参数，即要写入到输出流中的文本。write()会原样写入，而 writeln()则会 在字符串的末尾添加一个换行符(\n)。在页面被加载的过程中，可以使用这两个方法向页面中动态地 加入内容
 
 
取得特性
 
 
每个元素都有一或多个特性，这些特性的用途是给出相应元素或其内容的附加信息。操作特性的 DOM 方法主要有三个，分别是 getAttribute()、setAttribute()和 removeAttribute()。这三 个方法可以针对任何特性使用，包括那些以 HTMLElement 类型属性的形式定义的特性
 
 
attributes 属性
 
 
attributes 属性返回指定节点属性的集合
 
 
创建table表格快捷方法
 
 
caption:保存着对元素(如果有)的指针。
 tBodies:是一个元素的 HTMLCollection。
 tFoot:保存着对元素(如果有)的指针。
 tHead:保存着对元素(如果有)的指针。
 rows:是一个表格中所有行的 HTMLCollection。
 createTHead():创建元素，将其放到表格中，返回引用。
 createTFoot():创建元素，将其放到表格中，返回引用。
 createCaption():创建元素，将其放到表格中，返回引用。  deleteTHead():删除元素。
 deleteTFoot():删除元素。
 deleteCaption():删除元素。
 deleteRow(pos):删除指定位置的行。
 insertRow(pos):向 rows 集合中的指定位置插入一行。
为元素添加的属性和方法如下。
 rows:保存着元素中行的 HTMLCollection。
 deleteRow(pos):删除指定位置的行。
 insertRow(pos):向 rows 集合中的指定位置插入一行，返回对新插入行的引用。
为元素添加的属性和方法如下。
 cells:保存着元素中单元格的 HTMLCollection。
 deleteCell(pos):删除指定位置的单元格。
 insertCell(pos):向 cells 集合中的指定位置插入一个单元格，返回对新插入单元格的引用。

-----------
var table = document.createElement('table');
table.createTBody();
table.insertRow();
table.rows[0].insertCell();
table.rows[0].cells[0].textContent = '0'
 
 
classList 属性
 
 
获取元素中class的类名集合返回一个DOMTokenList类数组
  add(value):将给定的字符串值添加到列表中。如果值已经存在，就不添加了。
  contains(value):表示列表中是否存在给定的值，如果存在则返回 true，否则返回 false。
  remove(value):从列表中删除给定的字符串。
  toggle(value):如果列表中已经存在给定的值，删除它;如果列表中没有给定的值，添加它
 
 
焦点管理
 
 
document.activeElement 属性，这个 属性始终会引用 DOM 中当前获得了焦点的元素。
 元素获得焦点的方式有页面加载、用户输入(通常是 通过按 Tab 键)和在代码中调用 focus()方法。
 默认情况下，文档刚刚加载完成时，document.activeElement 中保存的是 document.body 元 素的引用。文档加载期间，document.activeElement 的值为 null。
 document.hasFocus()方法，这个方法用于确定文档是否获得了焦点
 
 
HTMLDocument的变化
 
 
readyState 属性:
  loading，正在加载文档;
  complete，已经加载完文档。
 
 
dataset属性:
 获取自定义data属性返回一个DOMTokenList类数组
 可直接添加更改自定义属性
 
 
innerHTML 属性
 
 
在读模式下调用元素的所有子节点(包括元素、注释和文本节点)对应 的 HTML 标记（字符串形式）。在写模式下，innerHTML 会根据指定的值创建新的 DOM 树，然后用这个 DOM 树完全 替换调用元素原先的所有子节点
 不支持 innerHTML 的元素有:、、 、、、