JavaScript进击之路（1）

一、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）如、

等元素、文本节点（被包含在元素节点之内）、属性节点（对元素做出更加详细的描述）如title的内容

What to buy
 Don't forget to buy this stuff

book
food
dog

获取元素3个方法：

 1.getElementById 获取并返回一个与给定id属性的元素节点对象

document.getElementById("buySomething");

2.getElementsByTagName 返回一个对象数组，每个对象对应文档中给定标签的一个元素

document.getElementsByTagName("li");

可以通过for循环获取每个元素的对象

var element = document.getElementsByTagName("li");
for(var i=0;i

还可以通过通配符获取该文档中所有的元素（获取当前文档中的所有元素对象）

alert(document.getElementsByTagName("*").length);

3.getElementsByClassName 返回相同类名元素的数组

document.getElementsByCalssName("sale");

获取和设置属性
1.getAttribute 获取元素对象的属性

var element = document.getElementsByTagName("p");
for(var k = 0;k

如果该元素没有这个属性则返回为null
2.setAttribute 对元素节点的属性做修改
将上例中的title属性topic 修改为onepiece

var element = document.getElementsByTagName("p");
for(var k = 0;k

扩展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";