js DOM树

DOM树

DOM，全称Document Object Model文档对象模型。

节点:Node
		——构成HTML文档最基本的单元。
		
		 常用节点分为四类	 
		一文档节点:整个HTML文档
		一元素节点:HTML文档中的HTML标签
		一属性节点:元素的属性
		一文本节点:HTML标签中的文本内容

1. getElementById()
			一通过id属性获取一个元素节点对象
			2. getElementsByTagName()
			-通过标签名获取一组元素节点对象
			3. getElementsByName()
			一通过name属性获取一组元素节点对象

var res = document.getElementById("byt");
//按钮里面的文字 res.innerHTML
console.log(res.innerHTML); 
res.innerHTML = "hhjkkjjk";

<button id = "byt">这是一个按钮</button>
		 <!-- 这种写法结构和功能耦合，不方便维护 -->
		<button id="btn2" onmousemove='alert("hhhh")'>我是一个按钮</button>
		<button id="btn3">我是个按钮3</button>
		
<script type="text/javascript">
			//获取按钮对象
			var btn = document.getElementById("btn3");
			//可以为按钮的对应的事件绑定处理方法函数的形式 来响应事件，相应的事件触发时，气对应的函数会被调用
			btn.onmousemove = function(){
				alert("你干嘛");
			};
</script>

浏览器在加载一个页面时，是按照自上向下的顺序加载的，
读取到一行就运行一行,如果将script标签写到页面的上边，在代码执行时，页面还没有加载
		所以如果要一定把script标签卸写在上面head的话，必须要等页面加载完成再执行，可以
		用window.onload
		
		onload事件会在整个页面加载完成之后才触发，为window绑定一个onload事件,确保对象执行时，
		所有dom都加载完毕。不会出现无法获取到dom对象的现象 
		window.onload = function(){
			//******
		};

<!-- 像input自结束标签，***.innerHTML没有用，他如果有name属性，可以**.name -->
		<!-- 如果需要读取元素节点属性，直接使用元素.属性名
		例子:元素.id元素.name元素.value注意:class属性不能采用这种方式，
		读取class属性时需要使用元素.className
 -->

像input自结束标签，*.innerHTML没有用，他如果有name属性，可以.name -->
<!-- 如果需要读取元素节点属性，直接使用元素.属性名
例子:元素.id元素.name元素.value注意:class属性不能采用这种方式，
读取class属性时需要使用元素.className