javascript(18)DOM的其他获取元素对象的方法

1.body对象和all对象

			window.onload=function(){
				var body=document.body;
				//document的body里面是body的内容,
				//可以通过innerHTML查看它的全部内容，
				//但是它不是一个数组，不能使用索引查看,不能使用length属性，查看长度
				//HTMLBodyElement对象
				console.log("body:"+body.innerHTML);
				var all=document.all;
				//里面存放整个HTML文档，相当于使用document.getElementsByTagName("*")；
				//可以通过数组索引的方式查看all封装的内容，但是不能使用innerHTML查看
				//HTMLAllCollection对象
				console.log("all:"+all[0]);
				//存放的是一个数组，需要用索引来使用具体的某一个元素节点
				

执行结果：


2.getElementsByClassName()

				//该方法IE8以及之下的浏览器不能使用。而是使用querySelector():IE8以及之上
				//var classCity=document.getElementsByClassName("city");
				//HTMLCollection对象
//				console.log("classCity.innerHTML:"+classCity[0]);
				
				

Hbuilder中的执行结果：

IE8中的执行结果：

3.querySelector(),querySelectorAll()

					/*IE8以及以上的浏览器querySelector():
					参数:传入一个字符串形式的css选择器(如.city,#city,标签名)*/
//					返回值是第一个满足条件的css选择器修饰的元素
//					返回的对象是:HTMLUListElement,是一个无序列表元素节点
				var queryCity=document.querySelector(".city");
				console.log('queryCity:'+queryCity);
				/*querySelectorAll():
					参数也是一个字符串形式的css选择器
					返回的对象是一个包含次css选择器的所有元素,所以是一个数组*/
				var queryAllCity=document.querySelectorAll(".city")[0];
				console.log("queryAllCity:"+queryAllCity);
				
			};

Hbuilder中的执行结果：

IE8中的执行结果：

这是html中body里的内容

		<ul class="city">
			<li>成都</li>
			<li>遂宁</li>
			<li>广汉</li>
			<li>广元</li>
		</ul>

总结：
一共三个方法
        document.getElementsByClassName()
        document.querySelector()
        document.querySelectorAll()
根据之前的方法：
        document.getElementsByTagName()
         document.getElementById()
         document.getElementsByName()
     可以发现，只要返回值是数组类型的，都是Elements。很多时候都是这个单词写错了，导致代码运行不成功
这里面所有的代码IE8以上的IE浏览器和其他浏览器都能正常使用
querySelector(),querySelectorAll()则能兼顾IE8浏览器（IE7就不行了哈）