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>
