DOM模型

DOM和DOM节点 1.DOM

当浏览器载入 HTML 文档, 它就会成为 Document 对象。（html页面就是一个文档，不过不是文本文本，而是超文本文档）

Document 对象是 HTML 文档的根节点。

Document 对象使我们可以通过脚本对 HTML 页面中的所有元素进行访问。

提示：Document 对象是 Window 对象的一部分，可通过 window.document 属性对其进行访问。

DOM是Javascript操作网页的接口，全称叫文档对象模型（Document Object Model）。当网页被加载时，浏览器会创建页面的文档对象模型（Document Object Model）。HTML DOM 模型被构造为对象的树。如下图它的作用是将网页转化为一个Javascript对象，从而用Javascript脚本进行各种操作（比如增删元素等）。

2.DOM节点

在 HTML DOM (Document Object Model) 中 , 每一个元素都是节点:

• 文档是一个文档节点。
• 所有的HTML元素都是元素节点。
• 所有 HTML 属性都是属性节点。
• 文本插入到 HTML 元素是文本节点。
• 注释是注释节点。

DOM的最小组成单位就是节点（node）。DOM树就是由不同类型的节点组成。每个节点可以看成是DOM树上的叶子。 在DOM中，节点的类型一共有7种

• Document：整个文档树的顶层节点；
• DocumentType：dotype标签比如：
• Element：网页的各种HTML标签比如：
• Attribute：网页元素的属性比如：id=”id” class=”class” type=”text”
• Text：标签之间或标签包含的文本
• Comment：注释
• DocumentFragment：文档片段

3.节点树

一个文档的所有节点，按照所在的层次，可以抽象成一个树状结构。这种树状结构就是DOM。最顶层的节点就是document类型的节点，它代表了整个文档。文档里面最高一层的HTML标签，一般是，它构成树结构的根节点（root node），其他的Html标签都是它的下级。

除了根节点，其他节点对于周围的几点都存在3种关系

• 父节点关系（parentNode）：直接的那个上级节点
• 子节点关系（childNodes）：直接的下级节点
• 同级节点关系（sibling）：拥有同一父节点的节点

DOM提供操作接口，用来获取三种关系的节点。 获取子节点：firstChild（第一个子节点）lastChild（最后一个子节点）等 获取同级别：nextSibling（紧邻在后的同级节点）和previousSibling（紧邻在前的同级节点）

特征相关属性

所有的节点对象我们都可以理解为浏览器内置的node对象的实例。

1.Node.nodeName和Node.nodeType

console.log("document.nodeName=" + document.nodeName); // #document
console.log("document.nodeType=" + document.nodeType); // 9

nodeName 属性规定节点的名称。

• nodeName 是只读的
• 元素节点的 nodeName 与标签名相同
• 属性节点的 nodeName 与属性名相同
• 文本节点的 nodeName 始终是 #text
• 文档节点的 nodeName 始终是 #document

2.Node.nodeValue

返回是一个字符串，表示当前节点本身的文本值，该属性可读写。 由于只有Text节点、Comment节点和xml文档的CDATA节点有文本值，因此只有这三类节点有nodeValue，其他节点一律返回null。

nodeValue 属性规定节点的值。

• 元素节点的 nodeValue 是 undefined 或 null
• 文本节点的 nodeValue 是文本本身
• 属性节点的 nodeValue 是属性值

注意，这里需要特别注意的是，Text节点代表的是元素或属性中的文本内容。

console.log("p.nodeValue=" + document.getElementById("_p").nodeValue); //null

3.Node.textContent

返回当前节点和它的后代节点的文本内容，该属性是可读写的。

console.log("p.textContent=" + document.getElementById("_p").textContent); // hello,world
document.getElementById("_p").textContent = "hello, nantong!";
// hello, nantong!

上面代码在插入文本时，会将标签解释为文本，而不会当做标签去处理。

4.Node.nextSibling

返回紧跟在当前节点后面的一个同级节点。如果没有找到返回null。

注意：该属性还包括文本节点。因此如果当前节点后面有空格，该属性返回一个文本节点，内容为空格。

var _pb = document.getElementById("_p").nextSibling;
console.log(_pb.textContent); // 空格

5.Node.previousSibling

返回当前节点前面的，距离最新的一个同级节点。

6.Node.parentNode

返回当前节点的父节点。父节点只可能包括三种类型：element节点、document节点、documentfragment节点

7.Node.parentElement

返回当前节点的父element节点。不是W3C标准，仅支持IE。

8.childNodes

返回一个nodelist集合，成员包括当前节点的所有子节点。

注意：除了Html元素节点，还包括Text节点和Comment节点。如果当前节点不包含任何子节点，则返回一个空的nodelist集合。

China

Korea
Japan


var _asia = document.getElementById("_asia");
var _asias = _asia.childNodes;
console.log(_asias);

其中：0、2、4、6、8都是同级的文本节点，内容为回车符号。

9.Node.firstChild/lastChild

返回当前节点的第一个或者最后一个子节点。如果没有找到返回null。

节点对象的方法 Node.appendChild()

接收一个对象节点作为参数，将其作为最后一个节点，插入当前节点。

appendChild 方法有个隐蔽的地方，就是调用以后 child 会从原来 DOM 中移除。

var addCountry = function() {
    var cinput = document.getElementById("country");
    var cvalue = cinput.value;
    var cli = "
" + cvalue + "
";
    var culInnerHtml = document.getElementById("_asia").innerHTML;
    culInnerHtml = culInnerHtml + cli;
    document.getElementById("_asia").innerHTML = culInnerHtml;
};

var addCountry2 = function() {
    var cinput = document.getElementById("country");
    var cvalue = cinput.value;
    var cli = document.createElement("li");
    cli.innerHTML = cvalue;
    document.getElementById("_asia").appendChild(cli);
};

Node.hasChildNodes()

返回一个布尔值，判断当前节点是否有子节点。

var _asiaUl = document.getElementById("_asia");
if (_asiaUl.hasChildNodes()) {
    _asiaUl.innerHTML = "";
}

Node.insertBefore()

方法用于将某个节点插入当前节点的指定位置。接收两个参数，第一个参数是所要插入的节点，第二个参数是当前节点的一个子节点。新的节点将插在这个节点的前面。该方法返回被插入的新节点。

function appendCountry(){
    var input = document.getElementById('country');
    var inputValue = input.value;
    var cspan = document.createElement('span');
    var asia = document.getElementById('asia');
    cspan.innerHTML = inputValue;
    cspan.setAttribute('class',inputValue);
    var japan =document.getElementById('asia').childNodes[3];
    asia.insertBefore(cspan,japan);
}

Node.removeChild()

方法接收一个子节点作为参数，用于从当前节点移除该子节点。返回被移除的子节点。

var removeCountry1 = function(id) {
    var _asiaEle = document.getElementById("_asia");
    _asiaEle.removeChild(document.getElementById(id));
}

Node.replaceChild()

方法用于将一个新的节点替换当前节点的某一个子节点。接收两个参数，第一个参数是用来替换的新节点，第二个参数是将要被替换的节点。

var repalceCountry = function() {
    var newEle = document.createElement("LI");
    newEle.innerHTML = "Tailand";
    var _asiaEle = document.getElementById("_asia");
    _asiaEle.replaceChild(newEle, document.getElementById("_japan"));
}

Element对象

1. 特征相关的属性

Element.id，Element.tagName，Element.innerHTML，Element.outerHTML（包含标签定义本身）Element.classNameElement.classList:add/remove/contains/toggle/item/toString

var asia = document.getElementById("asia");
console.log(asia.outerHTML);//包括自己本身
console.log(asia.innerHTML);
console.log(asia.tagName);
console.log(asia.className);
console.log(asia.classList);
asia.classList.add('aaa','bbb');
console.log(asia.classList.contains('bbb'));//true
console.log(asia.classList.item(3));
asia.classList.remove('bbbb');

2.盒子模型相关属性

Element.clientHeight/clientWidth 返回元素可见部分的高度和宽度：注意包含了 padding 的值Element.clientLeft/Top 获取元素左边框、顶部边框的宽度

3.相关节点的属性

Element.children 返回当前元素节点的所有子元素。Element.childElementCount 返回当前元素节点所有子元素的个数。

var _asia = document.getElementById("_asia");
console.log(_asia.children);
console.log(_asia.childElementCount);
console.log(_asia.children.length);

Element.firstElementChild/lastElementChildElement.nextElementSibling/previousElementSibling

Document 对象属性和方法

HTML文档中可以使用以下属性和方法:

属性 / 方法描述document.activeElement返回当前获取焦点元素document.addEventListener()向文档添加句柄document.adoptNode(node)从另外一个文档返回 adapded 节点到当前文档。document.anchors返回对文档中所有 Anchor 对象的引用。document.applets

返回对文档中所有 Applet 对象的引用。

注意: HTML5 已不支持 元素。

document.baseURI返回文档的绝对基础 URIdocument.body返回文档的body元素document.close()关闭用 document.open() 方法打开的输出流，并显示选定的数据。document.cookie设置或返回与当前文档有关的所有 cookie。document.createAttribute()创建一个属性节点document.createComment()createComment() 方法可创建注释节点。document.createDocumentFragment()创建空的 DocumentFragment 对象，并返回此对象。document.createElement()创建元素节点。document.createTextNode()创建文本节点。document.doctype返回与文档相关的文档类型声明 (DTD)。document.documentElement返回文档的根节点document.documentMode返回用于通过浏览器渲染文档的模式document.documentURI设置或返回文档的位置document.domain返回当前文档的域名。document.domConfig已废弃。返回 normalizeDocument() 被调用时所使用的配置。document.embeds返回文档中所有嵌入的内容（embed）集合document.forms返回对文档中所有 Form 对象引用。document.getElementsByClassName()返回文档中所有指定类名的元素集合，作为 NodeList 对象。document.getElementById()返回对拥有指定 id 的第一个对象的引用。document.getElementsByName()返回带有指定名称的对象集合。document.getElementsByTagName()返回带有指定标签名的对象集合。document.images返回对文档中所有 Image 对象引用。document.implementation返回处理该文档的 DOMImplementation 对象。document.importNode()把一个节点从另一个文档复制到该文档以便应用。document.inputEncoding返回用于文档的编码方式（在解析时）。document.lastModified返回文档被最后修改的日期和时间。document.links返回对文档中所有 Area 和 Link 对象引用。document.normalize()删除空文本节点，并连接相邻节点document.normalizeDocument()删除空文本节点，并连接相邻节点的document.open()打开一个流，以收集来自任何 document.write() 或 document.writeln() 方法的输出。document.querySelector()返回文档中匹配指定的CSS选择器的第一元素document.querySelectorAll()document.querySelectorAll() 是 HTML5中引入的新方法，返回文档中匹配的CSS选择器的所有元素节点列表document.readyState返回文档状态 (载入中……)document.referrer返回载入当前文档的文档的 URL。document.removeEventListener()移除文档中的事件句柄(由 addEventListener() 方法添加)document.renameNode()重命名元素或者属性节点。document.scripts返回页面中所有脚本的集合。document.strictErrorChecking设置或返回是否强制进行错误检查。document.title返回当前文档的标题。document.URL返回文档完整的URLdocument.write()向文档写 HTML 表达式 或 JavaScript 代码。document.writeln()等同于 write() 方法，不同的是在每个表达式之后写一个换行符。 警告 !!!

在 W3C DOM核心，文档对象 继承节点对象的所有属性和方法。

很多属性和方法在文档中是没有意义的。

HTML 文档对象可以避免使用这些节点对象和属性：

 属性 / 方法避免的原因document.attributes文档没有该属性document.hasAttributes()文档没有该属性document.nextSibling文档没有下一节点document.nodeName这个通常是 #documentdocument.nodeType这个通常是 9(DOCUMENT_NODE)document.nodeValue文档没有一个节点值document.ownerDocument文档没有主文档document.ownerElement文档没有自己的节点document.parentNode文档没有父节点document.previousSibling文档没有兄弟节点document.textContent文档没有文本节点