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

            }