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

                };

            }