一、DOM学习
1.5个常用的DOM方法（getElementById、getElementsByTagName、getElementsByClassName、getAttribute、setAttribute）
2.D为document（文档）；O为object（对象）划分3种分别包含用户自行定义的对象、内建对象如Array,Math等、宿主对象由浏览器提供的对象；M为model（模型）
3.DOM可以抽象的理解为一棵树，用parent（父）、child（子）、sibling（兄弟）来描述各个元素节点之间的关系。
4.节点（node）包含元素节点（element node）如<body>、<li>等元素、文本节点（被包含在元素节点之内）、属性节点（对元素做出更加详细的描述）如title的内容
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>buy Something</title> </head> <body> <h1>What to buy</h1> <p title = "topic" id = "nodelem"> Don't forget to buy this stuff</p> <ul id = "buySomeThing"> <li>book</li> <li class = "sale">food</li> <li class = "sale">dog</li> </ul> </body> </html>获取元素3个方法：
1.getElementById 获取并返回一个与给定id属性的元素节点对象
document.getElementById("buySomething");2.getElementsByTagName 返回一个对象数组，每个对象对应文档中给定标签的一个元素
document.getElementsByTagName("li");可以通过for循环获取每个元素的对象 var element = document.getElementsByTagName("li"); for(var i=0;i<element.length;i++){ alert(element.[i]); }还可以通过通配符获取该文档中所有的元素（获取当前文档中的所有元素对象） alert(document.getElementsByTagName("*").length);3.getElementsByClassName 返回相同类名元素的数组 document.getElementsByCalssName("sale"); 获取和设置属性 1.getAttribute 获取元素对象的属性 var element = document.getElementsByTagName("p"); for(var k = 0;k<element.length;k++){ alert(element[k].getAttribute("title")); }如果该元素没有这个属性则返回为null 2.setAttribute 对元素节点的属性做修改 将上例中的title属性topic 修改为onepiece var element = document.getElementsByTagName("p"); for(var k = 0;k<element.length;k++){ element[k].setAttribute("title","onepiece"); alert(element[k].getAttribute("title")); } 扩展DOM属性1.childNodes可以获取任何一个元素的所有子元素
var bodychild = document.getElementsByTagName("body").[0]; alert(bodychild.childNodes.length);2.nodeType 返回节点属性值 *元素节点的nodeType的属性值为1； *文本节点的nodeType的属性值为2； *属性节点的nodeType的属性值为3； 3.nodeValue获得/设置文本节点的内容 var nodelem = document.getElementById("nodelem"); alert(nodelem.nodeValue);返回的是null，因为该节点为元素节点，他的子节点为文本节点，故： alert(nodelem.childNodes[0].nodeValue);这样就返回为该文本节点的内容 修改文本节点的文本内容则如： nodelem.childNodes[0].nodeValue = "Buy some storybooks";