JavaScript--DOM操作（一）

一、DOM获取元素

1. 根据ID获取元素

• document.getElementById('id');
• 返回id的元素对象
• console.dir()
• 打印我们获取的元素对象

2. 根据标签名获取

• document.getElementsByTagName('**标签名**')
• 返回带有指定标签的对象集合
• 还可以获取某个元素（父元素）内部所有指定标签名的子元素
• eg: element.getElementsByTagName('标签名')
• 注意：父元素必须是单个对象（必须指明是哪一个元素对象），获取的时候不包括父元素自己

// 1.返回的是 获取过来元素对象的集合 以伪数组的形式存储的
// var lis = document.getElementsByTagName('li');
varlis = document.getElementsByTagName('li');
console.log(lis);
console.log(lis[0]);
// 2. 我们想要依次打印里面的元素对象我们可以采取遍历的方式
for (vari = 0; i < lis.length; i++) {
	console.log(lis[i]);
}
// 3. 如果页面中只有一个li 返回的还是伪数组的形式 
// 4. 如果页面中没有这个元素 返回的是空的伪数组的形式
// 5. element.getElementsByTagName('标签名'); 父元素必须是指定的单个元素
// var ol = document.getElementsByTagName('ol'); // [ol]
// console.log(ol[0].getElementsByTagName('li'));
varol = document.getElementById('ol');
        console.log(ol.getElementsByTagName('li'));

3. HTML5新增方法

• document.getElementsByclassName('类名')//类名->对象集合 box li …
• document.getElemmentsquerySelector('选择器') //根据指定选择器返回第一个元素对象
• document.grtElementsquerySelectorAll('选择器')//根据指定选择器返回所有元素对象
• 注意：选择器获取元素方法里面的‘选择器’需要加符号 例如：.box #nav …

4. 获取特殊元素（body html）

• document.body //返回body元素对象
• document.html //返回html元素对象
  

二、事件基础

一、事件三要素

1. 事件源 ----获取事件源
2. 事件类型 ---- 绑定事件/注册事件
3. 事件处理程序 ---- 添加处理程序 例如：function 等
   

二、常见的鼠标事件

onclick	鼠标点击左键触发
onmouseover	鼠标经过触发
onmouseout	鼠标离开触发
onfous	获得鼠标焦点触发
onblur	失去焦点触发
onmousemove	鼠标移动触发
onmouseup	鼠标弹起触发
onmousedown	鼠标按下触发

三、操作元素

一、改变元素内容

1. element.innerText---->不识别HTML标签 非标准

从起始位置到终止位置的内容，但它去除HTML标签，同时空格和换行也会去掉

2. element.innerHTML---->W3C标准

从起始位置到终止位置的内容，包括HTML标签、换行和空格

二、表单元素的属性操作

type value checked selectde disable

<button>按钮</button>
<inputtype="text"value="输入内容">
	<script>
	// 1. 获取元素
	varbtn = document.querySelector('button');
varinput = document.querySelector('input');
// 2. 注册事件 处理程序
btn.onclick = function() {
	// input.innerHTML = '点击了';  这个是 普通盒子 比如 div 标签里面的内容
	// 表单里面的值 文字内容是通过 value 来修改的
	input.value = '被点击了';
	// 如果想要某个表单被禁用 不能再点击 disabled  我们想要这个按钮 button禁用
	// btn.disabled = true;
	this.disabled = true;
	// this 指向的是事件函数的调用者 btn
}
    </script>

三、样式属性操作

1. 行内样式操作

element.style

2. 类名样式操作

element.className
注意：JS里面采取驼峰命名法 JS修改style样式操作，产生的是行内样式，css权重比较高
eg: div.style.baclgroungColor = 'pink';

四、自定义属性的操作

1. 获取属性值

• element.属性 //获取内置属性值（元素本身自带的属性)
• element.getAttribute('属性')//主要获得自定义的属性（标准 )我们程序员自定义的属性

2. 设置属性值

• element.属性 = '值'//设置内置属性值
• element.setAttribute('属性','值')//主要设置自定义的属性（标准）

3. 移除属性

• element.removeAttribute('属性')