Dom的增删查改以及常用事件

Posted 2020-09-28 鱼樱、、

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‘);
}