js-API 02 获取元素和事件

一，对表单的禁用
document.getElementById("txt").disabled=true;

二，阻止a链接的跳转
return false
1,<!--第一种写法:-->
<a href="http://www.baidu.com" onclick="alert('11'); return false">百度</a>

第一种缺点 代码不分离，不符合低耦合，高内聚的规范
2,<!--第二种写法-->
<script>
function f1() {
alert("哇塞,好漂亮哦");
return false;
}
</script>
<a href="http://www.baidu.com" onclick="return f1()">百度</a>

第二种代码 缺点同上
3,<!--第三种写法:-->
<a href="http://www.baidu.com" id="ak">百度</a>
<script>
document.getElementById("ak").onclick=function () {
alert("嘎嘎");
return false;
};
</script>

第三种  行为与结构分离 无缺点
三，鼠标事件
鼠标移入
onmouseover
属性在鼠标指针移动到元素上时触发
鼠标移出
事件名称  onmouseout
属性在鼠标指针移动到元素外时触发。
四，焦点事件
获取焦点
事件名称 onfoucus
事件描述 onfocus 事件在对象获得焦点时发生，用于input
失去焦点
事件名称 onblur
事件描述 onblur 事件会在对象失去焦点时发生，一般也用于表单输入框
五，获取元素
根据name名获取元素
var inputs = document.getElementsByName('hobby');
根据类名获取元素
var mains = document.getElementsByClassName('main');
根据选择器来获取元素
QuerySelector 与 QuerySelectAll，其中第一个是返回一个匹配的元素，后面返回匹配到的所有元素
六，innerText写内容
innerText和textContent
innerText和innerHTML的区别
使用innerText主要是设置文本的,设置标签内容,是没有标签的效果的
innerHTML是可以设置文本内容
innerHTML主要的作用是在标签中设置新的html标签内容,是有标签效果的
七，自定义属性
获取属性
Api名称  getAttribute("自定义属性的名字")
设置属性
setAttribute("属性的名字","属性的值");
移除属性
my$("dv").removeAttribute("属性名称");