js之DOM和事件

时间:2022-03-28 06:10:28

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";
}; }