javascript学习笔记（第三章DOM--获取对象元素）
javascript学习笔记（第三章DOM–获取对象元素）
获取节点元素的三种DOM方法：元素ID、标签名字、类名字
1.元素ID（getElementById）：通过调用此方法返回一个指定Id属性的元素节点所对应的对象，它是document对象特有的函数，使用时注意大小写！！！基本调用格式如下：
document.getElementById(id)
例：
document.getElementById("purchases")
这个方法调用后将返回一个对象，这个对象对应着document对象里一个独一无二的元素，这个元素id属性值为purchases。我们可以用typeof操作符判断我们它的操作数是一一个数值，字符串，函数，布尔型还是一个对象。例：
Shopping list
What to buy
Don't forget to buy this stuff.
- A tin of beans
- Cheese
- Milk
运行结果如下图：
2.标签名字（getElementsByTagName）：事实上，我们在编译脚本时不可能给每一个元素赋一个id值，那么对于那些没有id属性值的元素，我们该如何获取，这里就要引入一个有关于元素标签的调用方法，当我们调用getElementsByTagName方法时，结果将返回一个对象数组。每个对象分别对应着文档里有给定标签的元素，调用参数为标签名。基本调用方法如下：
element.getElementsByTagName(Tag)
要特别注意此函数的返回值为一个数组，而getElementById方法返回的是一个对象。例：
document.getElementsByTagName("li")
我们利用此方法返回上一节提到的购物清单的列表长度，例：
Shopping list
What to buy
Don't forget to buy this stuff.
- A tin of beans
- Cheese
- Milk
运行结果如下：
我们利用for语句以及typeof来看看每个数组元素是哪种数据类型。例：
Shopping list
What to buy
Don't forget to buy this stuff.
- A tin of beans
- Cheese
- Milk
运行结果如下图所示：
为了简化程序，提高程序的可读性，我们简化一下，用一个变量来代替document.getElementsByTagName(“li”)这一长串代码，例：
Shopping list
What to buy
Don't forget to buy this stuff.
- A tin of beans
- Cheese
- Milk
运行结果是一样的。
博主这里学到了一个感觉比较有趣的东西，好像回到了大二时学习的数据库，就是通配符，在数据库中当我们想要检索表中所有信息时，我们可以将检索条件设置为一个通配符“*”。没想到js中也有这个东西，所以感觉编程这个东西真的是一通百通，有趣。下面我们来说一说js里的通配符使用，这里的通配符其实和数据库里面的差不多，都代表全部对象，即js脚本里的全部元素，如果我们想要看看整个脚本里有多少个元素时，我们可以调用getElementsByTagName方法，例：
alert(document.getElementsByTagName("*").length);
运行结果如下图：
这里我们如果想直到具有某个id属性值的元素内部包含多少个元素时，可以将getElementById方法和getElementsByTagName方法结合起来使用。
var Shopping=document.getElementById("purchases");
var items=Shopping.getElementsByTagName("*");
alert(items.length);
运行结果如下：
3.类名字（getElementsByClassName）:在HTML5DOM中增加了一个有关于类名字的方法，这个方法可以访问class中元素，就是通过检索类名来访问指定元素。一般调用方法如下：
getElementsByClassName(class)
这个方法的返回值与getElementsByTagName方法一样都是一个数组，例：
ducoment.getElementsByClassName("sale")
这个方法还可以访问那些带有多个类名的元素，不同的类名用空格分隔。例：
ducoment.getElementsByClassName("important sale")
注意在实际中类名的顺序和类名的个数都是无所谓的，例：
alert(document.getElementsByClassName("sale").length);
此方法也可以与第一种方法组合使用，这里不再多说。