js DOM操作

获取元素

方法一

<div id="div1" name=”nm” class=”cla”>这是div元素<p>...</p></div>

　　var oDiv = document.getElementById('div1');              对象   根据Id获取

　　var oDiv = document.getElementsByName(‘nm’)[0]     元素   根据name获取

　　var oDiv = document.getElementsByClassName(‘cla’) 选择集  根据class获取

　　var oDiv = document.getElementsByTagName(‘div’)    选择集  根据标签名获取

　　console.log(oDiv);

　　var oP = oDiv.getElementByTagName(‘p’)[0];              获取<div>下<p>标签

方法二

    window.onload = function(){

    　　var oDiv = document.getElementById('div1');   }

<div id="div1">这是一个div元素</div>

 

操作元素属性

oDiv.setAttribute(‘class’,’a’);       设置属性值 class=’a’

var cla = oDiv.getAttribute(‘class’);  获取属性值

oDiv.removeAttribute(‘class’);      删除属性

 

var val = oDiv.value;      type/title/id/className/href  获取属性值

oDiv.style.color = 'red';   style.fontSize/href               设置样式 行内

oDiv.style.[‘color’] = 'red';

元素内容

var txt = oDiv.innerHTML;                     读出内容

txt = '<a href="http...">百度<a/>';          写入 a标签

 

事件

行间事件调用函数        obj：元素本身  this：window

function myalert(obj){ alert('ok!'); }        

<input type="button" name="" value="弹出" onclick="myalert()">

提取行间事件                  this：元素本身  obj：MouseEvent

var oBtn = document.getElementById('btn1');

oBtn.onclick = myalert;  function myalert(){ alert('ok!'); }   调用  函数

oBtn.onclick = function(){ alert('ok!'); }                              匿名函数

<input type="button" name="" value="弹出" id="btn1">

 

window.onload = function(){    加载完后 执行代码（只用一次）}

 

　　oDiv.addEventListener(‘click’, fun1)  添加 事件 触发函数

　　function fun1(th){

　　　　th.stopPropagation();        　　停止传播

　　　　console.log(1);

　　}

<div style="width:200px; height:200px; background:red;">1
    <div style="width:100px; height:100px; background:green;">2
        <div style="width:50px; height:50px; background:blue;">3</div>
    </div>
</div>

<script>
    var oDiv=document.getElementsByTagName('div');
    oDiv[0].addEventListener('click', f1);
    oDiv[1].addEventListener('click', f2);
    oDiv[2].addEventListener('click', f3);
    function f1(){console.log(1);}
    function f2(){console.log(2);}
    function f3(th){th.stopPropagation();console.log(3);}
</script>

回车执行

<input type="text" id="input1">
<script>
    var oInput=document.getElementById("input1");
    oInput.onkeydown=function(th){
        console.log(th.keyCode);
        if(th.keyCode==13){
            alert('跳转了'+this.value);
        }
    }
</script>