二阶段 day05

DOM：Document Object Model：文档对象模型，专门用于操作HTML文档的，提供了一些属性和方法

DOM树：DOM把HTML看作了是一个倒挂的树状结构，但是树根不是html标签，而是document对象（提供了一些属性和方法）

一、查找元素：

1、HTML的特点

	ID：var elem=document.getElementById("id");
		特殊：
			1、找到了是单个元素，没找到是null
			2、id不能重复，如果重复了只会找到第一个
			3、id不用，留给后端用
			4、id其实不用查找，可以直接使用元素

	*class和标签名：var elems=document/父元
            素.getElementsByTag/ClassName("标签名/class名")
		特殊：
			1、找到了是一个集合，没找到是一个空集合
			2、一个集合不能直接操作，要么遍历拿到每一个，要
                            么下标拿到某一个
			3、如果从document开始查找，会找到页面上所有的元
                            素，也可以换为某个父元素为起点

2、关系：前提：至少要找到一个元素，才可以使用关系网

	父：xx.parentNode;
	子：xx.children; - 集合
	第一个儿子：xx.firstElementChild;
	最后一个儿子：xx.lastElementChild;
	前一个兄弟：xx.previousElementSibling;
	后一个兄弟：xx.nextElementSibling;

二、操作元素：

1、内容：

	innerHTML（识别标签）/innerText（纯文本）/value（input单标签）

	获取：elem.以上三个中的其中一个
	设置：elem.以上三个中的其中一个="新内容";

2、属性：

	获取：elem.getAttribute("属性名");
	设置：elem.setAttribute("属性名","属性值");

	简化版：
		获取：elem.属性名;
		设置：elem.属性名="属性值";
		特殊：
			1、class必须写为className
			2、只能操作标准属性，不能操作自定义属性

3、样式：目前只能操作内联样式：

		1、不会牵一发动全身
		2、优先级最高
		获取：elem.style.css属性名;
		设置：elem.style.css属性名="css属性值";
		特殊：
			1、css属性名，有横线的地方全部换为小驼峰命名法
			2、只能操作内联样式

	一切的获取，都是为了判断
	一切的设置，就是添加和修改和删除

三、在js中绑定事件：

遵守原则：内容（HTML）和样式（css）和行为（js）要分离

elem.on事件名=function(){
	操作;
	***关键字this：
		单个元素绑定事件，this->这1个元素
		多个元素绑定事件，this->当前触发事件元素
}