zoukankan      html  css  js  c++  java
  • Dom的增删查改以及常用事件

    dom的增删查改
    // 查
    var _input = document.getElementById('_input');
    var _div = document.getElementsByClassName('_div');
    var _div2 = document.getElementsByTagName('div');
    var _radio = document.getElementById('_radio');
    // 改
    input.value = '随便';
    div.style.height = '100px';
    div.style.width = '100px';
    div.style.backgroundColor = 'pink';
    div.innerText = '随便';
    div.innerHtml = '<strong>随便</strong>';
    radio.checked = true;

    // 增
    var p = document.createElement('p');
    p.id = 'p1';
    _div[0].appendChild(p);

    // 删
    _div[0].removeChild(p);

    dom的事件
    var div1 = document.getElementById('div1');
    var input1 = document.getElementById('input1');
    // 鼠标点击时触发的事件
    div1.onclick = function(){
    console.log('onclick');
    };
    // 鼠标在元素上触发的事件
    div1.onmouseover = function(){
    div1.style.backgroundColor = 'green';
    };
    // 鼠标移出元素时触发的事件
    div1.onmouseout = function(){
    div1.style.backgroundColor = 'blue';
    }
    // 获得焦点
    input1.onfocus = function(){
    console.log('onfocus');
    };
    // 失去焦点
    input1.onblur = function(){
    console.log('onblur');
    }
    //值被更改
    input1.onchange = function(){
    console.log('onchange');
    }

  • 相关阅读:
    Intern Day42
    Intern Day42
    Intern Day42
    Intern Day40
    腾讯PC客户端二面
    面试
    面试
    面试
    计算机网络
    计算机网络
  • 原文地址:https://www.cnblogs.com/lhl66/p/7192609.html
Copyright © 2011-2022 走看看