获取元素

方法一

<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="弹出" οnclick="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);

　　}

     
      1    
      
       2        
       
        3
       
    
      
     

回车执行