js之DOM和事件
DOM
查找
-
直接查找
-
var obj = document.getElementById('i1')
-
间接查找
文件内容操作:
innerText 仅文本
innerHTML 全内容
value
input value获取当前标签中的值
select 获取选中的value值(selectedIndex)
textarea value获取当前标签中的值
搜索框的示例
操作:
-
样式操作:
-
className classList classList.add classList.remove obj.style.fontSize = '16px'; obj.style.backgroundColor = 'red'; obj.style.color = "red"
-
属性操作:
-
attributes getAttribute removeAttribute
-
创建标签,并添加到HTML中:
a. 字符串形式
b. 对象的方式
document.createElement('div')
-
提交表单
任何标签通过DOM都可提交表单 document.geElementById('form').submit()
-
其他:
-
console.log() alert var v = confirm(信息) v:true false location.href location.href = "" # 重定向,跳转 location.reload() # 页面刷新 location.href = location.href < === > location.reload() var o1 = setInterval(function(){}, 5000) clearInterval(o1); var o2 = setTimeout(function(){}, 50000); clearTimeout(o2); var obj = setInterval(function(){ }, 5000) clearInterval(obj);
事件
onclick,onblur,onfocus
行为 样式 结构 相分离的页面?
js css html
绑定事件两种方式:
a. 直接标签绑定 onclick='xxx()' onfocus
b. 先获取Dom对象,然后进行绑定
document.getElementById('xx').onclick
document.getElementById('xx').onfocus
this,当前触发事件的标签
a. 第一种绑定方式
<input id='i1' type='button' onclick='ClickOn(this)'>
function ClickOn(self){
// self 当前点击的标签
}
b. 第二种绑定方式
<input id='i1' type='button' >
document.getElementById('i1').onclick = function(){
// this 代指当前点击的标签
}
作用域示例:
var myTrs = document.getElementsByTagName("tr");
var len = myTrs.length;
for(var i=0;i<len;i++){
// i=0,i=1,i=2
myTrs[i].onmouseover = function(){
this.style.backgroundColor = "red";
};
}
感谢关注