获取页面元素js

ECMAScript - JavaScript的核心 es5 es6

定义了JavaScript 的语法规范

JavaScript的核心，描述了语言的基本语法和数据类型，ECMAScript是一套标准，定义了一种语言的标准与具体实现无关

获取页面元素

为什么要获取页面元素

例如：我们要页面元素隐藏/显示，需要现获取对应的元素，才能进行后续操作

根据id获取元素

var div = document.getElementById("id2");

当id重名的时候，会获取第一个，id有唯一性的

根据标签名获取元素

//标签名获取元素
		var div = document.getElementsByTagName("div")[5];
		alert(div);

根据name获取元素*

// 通过name来获取
		var names = document.getElementsByName('n');
		for (var i = 0; i < names.length; i++) {
			alert(names[i]);
		}
		alert(names);

根据类名获取元素*

// 通过类名
		var mains = document.getElementsByClassName("main");
		alert(mains);

根据选择器获取元素*

// 根据选择器获取元素
		var id1 = document.querySelector('#id1');
		alert(id1);
		var mains = document.querySelectorAll('.main');
		alert(mains);

事件

事件：触发-响应机制

事件三要素

• 事件源:触发(被)事件的元素
• 事件名称: click 点击事件
• 事件处理程序(回调函数):事件触发后要执行的代码(函数形式)

属性操作

非表单元素的属性

href、title、id、src、className

var link = document.getElementById("link");
console.log(link.href);

innerHTML和innerText

• HTML转义符

"		"
'		'
&		&
<		&lt;   // less than  小于
>		&gt;   // greater than  大于
空格	   &nbsp;
©		&copy;

表单元素属性

• value 用于大部分表单元素的内容获取(option除外)
• type 可以获取input标签的类型(输入框或复选框等)
• disabled 禁用属性
• checked 复选框选中属性
• selected 下拉菜单选中属性

常用的鼠标和键盘事件

• onmouseup 鼠标按键放开时触发
• onmousedown 鼠标按键按下触发
• onmousemove 鼠标移动触发
• onkeyup 键盘按键按下触发
• onkeydown 键盘按键抬起触发