DOM在js中应用的简单总结分析-原创手记-慕课网

有了html的DOM，js可以访问可改变html文档中的所有元素，利用对象模型，js获取构建动态heml所需要的所有权限，具体如下：

改变html元素
改变html元素属性
改变css样式
移除已存在的html元素和属性
添加新的html元素和属性
响应html存在的事件
创造新的html事件
DOM是什么

DOM是一个W3C标准，定义文档的访问，w3c标准分为三个不同部分：

Core DOM - standard model for all document types
XML DOM - standard model for XML documents
HTML DOM - standard model for HTML documents
那么，我们目前只关心HTML DOM,什么是HTML　DOM呢？

一个html编程的标准对象模型，定义了：

html元素作为对象
html元素属性
html元素方法
html元素事件
即，html DOM是一个关于html元素增删改查的标准。

DOM方法是你可以触发的（在html元素上），DOM属性是你可以设置和改变的值（在ｈｔｍｌ元素上）。

DOM编程接口（The programming interface）

在DOM中，所有html元素作为对象定义，可以用js（或者别的编程语言）访问，编程接口就是每个对象的属性和方法。属性是可以取或动的值，方法是你可以做的动作。

document.getElementById("demo").innerHTML = "Hello World!";
//getElementById是方法，innerHTML是属性
　　The HTML DOM Document Object---DOM文档对象

文档对象是你页面中所有对象的拥有者，代表了页面本身，因此如果你想访问页面中的元素，首先要访问其文档对象，如下例子：

//Finding HTML Elements元素查找
document.getElementById(id) //Find an element by element id
document.getElementsByTagName(name)// Find elements by tag name
document.getElementsByClassName(name)// Find elements by class name
//Changing HTML Elements元素改变
element.innerHTML = new html content //Change the inner HTML of an element
element.attribute = new value //Change the attribute value of an HTML element
element.setAttribute(attribute, value) //Change the attribute value of an HTML element
element.style.property = new style //Change the style of an HTML element
//Adding and Deleting Elements元素增删
document.createElement(element) //Create an HTML element
document.removeChild(element) //Remove an HTML element
document.appendChild(element) //Add an HTML element
document.replaceChild(element) //Replace an HTML element
document.write(text) //Write into the HTML output stream
//Adding Events Handers 添加句柄
document.getElementById(id).onclick = function(){code} //Adding event handler code to an onclick event
//Finding HTML Objects查找html对象
//首个HTML　DOM等级1（1998），定义了11个HTML对象，对象集合，属性，在今天的h5中仍然有效。后来，在html DOM3中更多的对象，集合和属性被加入进来。
document.anchors Returns all <a> elements that have a name attribute 1
document.applets Returns all <applet> elements (Deprecated in HTML5) 1
document.baseURI Returns the absolute base URI of the document 3
document.body Returns the <body> element 1
document.cookie Returns the document's cookie 1
document.doctype Returns the document's doctype 3
document.documentElement Returns the <html> element 3
document.documentMode Returns the mode used by the browser 3
document.documentURI Returns the URI of the document 3
document.domain Returns the domain name of the document server 1
document.domConfig Obsolete. Returns the DOM configuration 3
document.embeds Returns all <embed> elements 3
document.forms Returns all <form> elements 1
document.head Returns the <head> element 3
document.images Returns all <img> elements 1
document.implementation Returns the DOM implementation 3
document.inputEncoding Returns the document's encoding (character set) 3
document.lastModified Returns the date and time the document was updated 3
document.links Returns all <area> and <a> elements that have a href attribute 1
document.readyState Returns the (loading) status of the document 3
document.referrer Returns the URI of the referrer (the linking document) 1
document.scripts Returns all <script> elements 3
document.strictErrorChecking Returns if error checking is enforced 3
document.title Returns the <title> element 1
document.URL Returns the complete URL of the document 1
　　HTML　DOM Elements－－－DOM元素

在页面中如何查找并访问html元素呢？

通常，用js操纵html元素，有很多方式：

Finding HTML elements by id
Finding HTML elements by tag name
Finding HTML elements by class name
Finding HTML elements by CSS selectors
Finding HTML elements by HTML object collections（对象集）
var x = document.forms["frm1"];
var text = "";
var i;
for (i = 0; i < x.length; i++) {
text += x.elements[i].value + "<br>";
}
document.getElementById("demo").innerHTML = text;//这种方式用的比较少，但很高效，在h5中封装了querySelector，querySelectorAll更是方便了此操作，可谓屡试不爽
　　以下html对象也是可访问的

document.anchors
document.body
document.documentElement
document.embeds
document.forms
document.head
document.images
document.links
document.scripts
document.title
改变html

DOM允许js改变html元素内容，因此js可以动态创造html内容，比如document.write()就可以直接改变html输出流，但文档加载后绝不要这样用，这将重写整个文档。

document.getElementById(id).innerHTML = new HTML;//改变html内容，最简单的方式
document.getElementById(id).attribute=new value；改变属性值　
改变CSS

document.getElementById(id).style.property=new style;//利用style属性
　　htmlDOM动画：有了以上领悟，做个动画顺理成章

element.addEventListener(event, function, useCapture);
element.removeEventListener("mousemove", myFunction);
　　DOM导航

有了DOM，可以利用节点关系去导航节点树。按照w3c标准，所有html对象都是一个节点：

The entire document is a document node---文档节点
Every HTML element is an element node---元素节点
The text inside HTML elements are text nodes---文本节点
Every HTML attribute is an attribute node---属性节点
All comments are comment nodes---注释节点

利用DOM，所有节点数上的节点都可以被js访问，节点同样可以被创建，改变或者删除。

节点关系

节点树上的节点之间都有个层级关系（ hierarchical relationship），父级子级和兄弟姐妹用于描述此关系。

In a node tree, the top node is called the root (or root node)---顶级节点叫做根节点
Every node has exactly one parent, except the root (which has no parent)---每个节点只有一个父亲，除了根节点
A node can have a number of children---一个节点可以用于一些列子节点
Siblings (brothers or sisters) are nodes with the same parent---同个父级下节点是兄弟节点。如下图示：

节点间的导航（根据以下节点关系作为航标）：

parentNode
childNodes[nodenumber]
firstChild
lastChild
nextSibling
previousSibling
注意：在DOM访问中一个常见错误是期望一个元素节点包含文本。在这个例子 <title>DOM Tutorial</title>中，元素节点<title>并不包含文本，而是它所包含的文本节点包含了文本。

文本节点可以利用节点的innerHTML属性或者节点值来访问，下边分析一下子节点和节点值。

除了innerHTML属性，你可以利用子节点和节点值去获取元素内容：

var myText = document.getElementById("intro").childNodes[0].nodeValue;
document.getElementById("demo").innerHTML = myText;
//此时，getElementById是一个方法，childNodes和nodeValue是属性。利用此方法对于理解DOM导航树结构很实用，利用firstChild属性也是同样的。
myText = document.getElementById("intro").firstChild.nodeValue;
document.getElementById("demo").innerHTML = myText;
　　DOM根节点

两种方式访问整个文档：document.body（body文档）和document.documentElement(整个文档)

节点名属性---区分节点

nodeName is read-only---节点名只读
nodeName of an element node is the same as the tag name---元素节点名与标签名一样
nodeName of an attribute node is the attribute name---属性节点名就是属性名
nodeName of a text node is always #text---文本节点名通常是文本
nodeName of the document node is always #document---document节点名通常是document
注意：nodeName通常包含大写的HTML元素标签名。

节点值属性---区分节点值

nodeValue for element nodes is undefined---元素节点值是undefined
nodeValue for text nodes is the text itself---文本节点值是文本本身
nodeValue for attribute nodes is the attribute value---属性节点值是属性值
节点类型属性---返回节点类型（只读），常见如下：

Element type NodeType
Element 1
Attribute 2
Text 3
Comment 8
Document 9
HTML DOM元素

创造新html元素（节点）

var para = document.createElement("p");//创造节点元素
var node = document.createTextNode("This is new.");//创造节点文本值
para.appendChild(node);//添加到dom树
var element = document.getElementById("div1");
element.appendChild(para);//从后添加
element.insertBefore(para,child);//从前添加
parent.removeChild(child);//移除，这是DOM4的东西，慎用
parent.replaceChild(para,child);//替换
JS DOM节点系列

var myNodelist = document.getElementsByTagName("p");
document.getElementById("demo").innerHTML = myNodelist.length;
//注意：节点系列不是一个数组！虽然看起来像，但是不是，你可以像数组那样遍历和索引节点系列，但是你不能用数组的方法，像valueOf（）或者join，到节点系列之上。可以利用Array.prototype.call()方法将节点系列伪数组转换成数组，这样就可以用数组的操作了
　　