DOM操作

appendChild()

用于在 childNodes 列表末尾添加节点 .如果该节点已存在，则相当于移动节点

var lists=document.querySelector('.lists');

var list=document.querySelectorAll('.lists');

var anode=document.querySelector('.anode');

lists.appendChild(anode);

 

lists.insertBefore(snode,anode);

 

在replaceChild中插入到lists.firstchild并不是把1替换掉而是插在了最上面，lastchild则是替换掉最后一个

 

 

 

在控制台输出第一二个子节点：

 

原因是换行被识别为文本，故出现text，所以firstChild不是第一个li而是text

console.log(lists.firstChild.nodeType); //3（空格）

console.log(lists.firstElementChild.nodeType); //1（li）

childNodes 和 firstChild 等属性上的差异

IE9 之前的版本不会把元素间的空格当成空白节点，而其他浏览器则会。这样就导致了 childNodes 和 firstChild 等属性上的差异。为了弥补这个差异，同时不影响 DOM 规范，W3C 通过新的 Element Traversal 规范定义了一组新属性。

Element Traversal API 为 DOM 元素添加了 5 个属性：

 childElementCount，返回子元素数量（不包含文本节点和注释）；

 firstElementChild，指向第一个 Element 类型的子元素（Element 版 firstChild）；

 lastElementChild，指向最后一个 Element 类型的子元素（Element 版 lastChild）；

 previousElementSibling ，指向前一个 Element 类型的同胞元素（ Element 版 previousSibling）；

 nextElementSibling，指向后一个 Element 类型的同胞元素（Element 版 nextSibling）。

在支持的浏览器中，所有 DOM 元素都会有这些属性，为遍历 DOM 元素提供便利。这样开发者就 不用担心空白文本节点的问题了。

Text

text类型的节点具有以下特征：

 nodeType 等于 3；

 nodeName 值为"#text"；

 nodeValue 值为节点中包含的文本；

 parentNode 值为 Element 对象；

 不支持子节点。

normalize()及相反的方法——splitText()

let element = document.createElement("div");

element.className = "message";

let textNode = document.createTextNode("Hello world!");

element.appendChild(textNode);

let anotherTextNode = document.createTextNode("Yippee!");

element.appendChild(anotherTextNode);

document.body.appendChild(element);

alert(element.childNodes.length); // 2

element.normalize();

alert(element.childNodes.length); // 1

alert(element.firstChild.nodeValue); // "Hello world!Yippee!"

let element = document.createElement("div");

element.className = "message";

let textNode = document.createTextNode("Hello world!");

element.appendChild(textNode);

document.body.appendChild(element);

let newNode = element.firstChild.splitText(5);

alert(element.firstChild.nodeValue); // "Hello"

alert(newNode.nodeValue); // " world!"

alert(element.childNodes.length); // 2

Element

Element 类型的节点具有以下特征：

 nodeType 等于 1；

 nodeName 值为元素的标签名；

 nodeValue 值为 null；

 parentNode 值为 Document 或 Element 对象；

 子节点可以是 Element、Text、Comment、ProcessingInstruction、CDATASection、 EntityReference 类型。

Document

Document 类型的节点有以下特征：

 nodeType 等于 9；

 nodeName 值为"#document"；

 nodeValue 值为 null；

 parentNode 值为 null；

 ownerDocument 值为 null；

 子节点可以是 DocumentType（最多一个）、Element（最多一个）、ProcessingInstruction 或 Comment 类型。

Comment

Comment 类型的节点具有以下特征：

 nodeType 等于 8；

 nodeName 值为"#comment"；

 nodeValue 值为注释的内容；

 parentNode 值为 Document 或 Element 对象；

 不支持子节点。

CDATASection

CDATASection 类型的节点具有以下特征：

 nodeType 等于 4；

 nodeName 值为"#cdata-section"；

 nodeValue 值为 CDATA 区块的内容；

 parentNode 值为 Document 或 Element 对象；

 不支持子节点

CDATASection 类型表示 XML 中特有的 CDATA 区块。CDATASection 类型继承 Text 类型，因 此拥有包括 splitText()在内的所有字符串操作方法。 CDATA 区块只在 XML 文档中有效 。

ocumentType 类型

DocumentType 类型的节点包含文档的文档类型（doctype）信息，具有以下特征：

 nodeType 等于 10；

 nodeName 值为文档类型的名称；

 nodeValue 值为 null；

 parentNode 值为 Document 对象；

 不支持子节点。

Attr 类型

元素数据在 DOM 中通过 Attr 类型表示。Attr 类型构造函数和原型在所有浏览器中都可以直接访 问。技术上讲，属性是存在于元素 attributes 属性中的节点。Attr 节点具有以下特征：

 nodeType 等于 2；

 nodeName 值为属性名；

 nodeValue 值为属性值；

 parentNode 值为 null；

 在 HTML 中不支持子节点；

 在 XML 中子节点可以是 Text 或 EntityReference。

深克隆和浅克隆

 

URL 包含当前页面的完整 URL（地 址栏中的 URL），domain 包含页面的域名，而 referrer 包含链接到当前页面的那个页面的 URL

 

HTMLCollection

<img src="myimage.gif" name="myimage">

namedItem()，可通过标签的 name 属性取得某一项 的引用。

let myImage = images.namedItem("myImage");

let myImage = images["myImage"];

对 HTMLCollection 对象而言，中括号既可以接收数值索引，也可以接收字符串索引。而在后台， 数值索引会调用 item()，字符串索引会调用 namedItem()。

let allElements = document.getElementsByTagName("*");

这行代码可以返回包含页面中所有元素的 HTMLCollection 对象

NodeList

NodeList 就是基于 DOM 文档的实时查询。

任何时候要迭代 NodeList，最好再初始化一个变量保存当时查询时的长度，然后用循环变量与这 个变量进行比较

let divs = document.getElementsByTagName("div");

for (let i = 0, len = divs.length; i < len; ++i) {

let div = document.createElement("div");

document.body.appendChild(div);

}

for (let div of document.getElementsByTagName("div")){

let newDiv = document.createElement("div");

document.body.appendChild(newDiv);

} //无穷循环

MutationObserver 接口

MutationObserver 接口，可以在 DOM 被修改时异步执行回调

 

文档对象模型（DOM，Document Object Model）是语言中立的 HTML 和 XML 文档的 API。

DOM Level 1 将 HTML 和 XML 文档定义为一个节点的多层级结构，

并暴露出 JavaScript 接口以操作文档的底 层结构和外观。

DOM 由一系列节点类型构成，主要包括以下几种。

 Node 是基准节点类型，是文档一个部分的抽象表示，所有其他类型都继承 Node。

 Document 类型表示整个文档，对应树形结构的根节点。在 JavaScript 中，document 对象是 Document 的实例，拥有查询和获取节点的很多方法。

 Element 节点表示文档中所有 HTML 或 XML 元素，可以用来操作它们的内容和属性。

 其他节点类型分别表示文本内容、注释、文档类型、CDATA 区块和文档片段。

matches()

matches()方法（在规范草案中称为 matchesSelector()）接收一个 CSS 选择符参数，如果元素 匹配则该选择符返回 true，否则返回 false。

使用这个方法可以方便地检测某个元素会不会被 querySelector()或 querySelectorAll()方法返回。

toggle(value)

已经存在指定的 value，则删除；如果不存在，则添加。

document.hasFocus()方法

该方法返回布尔值，表示文档是否拥有焦点

HTMLDocument 扩展

readyState 属性

document.readyState 属性有两个可能的值：

 loading，表示文档正在加载；

 complete，表示文档加载完成

compatMode 属性

标准模式下 document.compatMode 的值是"CSS1Compat"，

而在混杂模式下， document.compatMode 的值是"BackCompat"：

head 属性

document.head 属 性，指向文档的元素。可以像下面这样直接取得元素：

let head = document.head;

自定义数据属性

HTML5 允许给元素指定非标准的属性，但要使用前缀 data-以便告诉浏览器，

<div id="myDiv" data-appId="12345" data-myname="Nicholas"></div>

定义了自定义数据属性后，可以通过元素的 dataset 属性来访问。dataset 属性是一个 DOMStringMap 的实例，包含一组键/值对映射。

// 本例中使用的方法仅用于示范

let div = document.getElementById("myDiv");

// 取得自定义数据属性的值

let appId = div.dataset.appId;

let myName = div.dataset.myname;

// 设置自定义数据属性的值

div.dataset.appId = 23456; div.dataset.myname = "Michael";

// 有"myname"吗？

if (div.dataset.myname){

console.log(`Hello, ${div.dataset.myname}`);

}

outerHTML 属性

读取 outerHTML 属性时，会返回调用它的元素（及所有后代元素）的 HTML 字符串。

scrollIntoView()

这个方法的参数如下：

 alignToTop 是一个布尔值。

 true：窗口滚动后元素的顶部与视口顶部对齐。

 false：窗口滚动后元素的底部与视口底部对齐。

 scrollIntoViewOptions 是一个选项对象。

 behavior：定义过渡动画，可取的值为"smooth"和"auto"，默认为"auto"。

 block：定义垂直方向的对齐，可取的值 为"start"、"center"、"end"和"nearest"，默 认为 "start"。

 inline：定义水平方向的对齐，可取的值为"start"、"center"、"end"和"nearest"，默 认为 "nearest"。

 不传参数等同于 alignToTop 为 true。

children

children属性是一个 HTMLCollection 只包含元素的 Element 类型的子节点。

contains()方法

用于确定一个元素是不是另一个元素的后代

如果目标节点是被搜索节点的后代，contains()返回 true，否则返回 false。

console.log(document.documentElement.contains(document.body)); // true

compareDocumentPosition()方法也可以确定节点间的关系

这个 方法会返回表示两个节点关系的位掩码。

 

float属性在js中应该写成cssFloat；原因：float是js的保留字