1.我学了什么

1.1.DOM基础

1.1什么是DOM
“W3C 文档对象模型 （DOM） 是中立于平台和语言的接口，它允许程序和脚本动态地访问和更新文档的内容、样式和结构。”

HTML Dom是关于如何增,删,改,查 HTML 元素的标准。

DOM:document object model
HTML DOM 将 HTML 文档视作树结构。这种结构被称为节点树：

图片1.gif

1.2节点
节点树就是由一个个节点组成

父（parent）、子（child）和同胞（sibling）等术语用于描述这些关系。父节点拥有子节点。同级的子节点被称为同胞（兄弟或姐妹）。

图片2.gif

1.3如何获取节点
getElementById()
getElementsByTagName()
getElementsByClassName()
querySelectorAll()

1.4
修改元素节点的内容
innerHTML
修改样式
object.style.color=”pink”

1.5节点的分类nodeType
a.nodeType==1  为元素节点
b.nodeType==2  为属性节点
c.nodeType==3  位文本节点

1.6增加获取节点
A.appendChild(node) 
将新元素作为父元素的最后一个子元素进行添加。

createElement() ; //创建元素节点
createTextNode(); //创建文本节点

var p=document.createElement("p");
var txt = document.createTextNode("hello world");
var attr = document.createAttribute("class");    //创建属性节点
attr.value = "democlass";  
p.setAttributeNode(attr)
p.appendChild(txt);
document.body.appendChild(p); 

B.parentNode.insertBefore(newNode,targetElementNode)

1.7删除节点
语法 
parentNode.removeChild(childNode)

1.8修改节点(替换节点)
语法 
parentNode.replaceChild(newNode,oldNode);

<div id="div1">
<p id="p1">This is a paragraph.</p>
<p id="p2">This is another paragraph.</p>
</div>

<script>
var para=document.createElement("p");
var node=document.createTextNode("This is new.");
para.appendChild(node);

var parent=document.getElementById("div1");
var child=document.getElementById("p1");
parent.replaceChild(para,child);
</script>