js原生基础DOM操作

常用的dom操作如下

document.getElementById("id");   //通过ID名获取元素
document.getElementsByTagName("div");   //通过标签名获取元素
document.getElementsByClassName("class");   //通过类名获取元素
document.querySelector("section>div");    //通过css选择器获取单个dom节点
document.querySelectorAll("section>div");  //通过css选择器获取多个dom节点

还有获取父子节点

dom.childNodes    //获取元素子节点
dom.parentNode   //获取元素父节点

插入节点

var div = document.createElement("div");   //生成一个孤儿节点
document.body.appendChild(div);   //向元素最后插入一个节点
document.body.insertBefore(div,document.body.childNodes[0]);
//insertBefore相对复杂一些，他需要一个参考对象为参数  插入在参考对象的前面

删除节点

document.removeChild(document.body.childNodes[0]);//通过父节点移除子节点

元素事件

dom.onclick = function(e){//元素绑定点击事件
    console.log(e.target);
}
dom.onmouseover = function(e){   //给元素设置鼠标移入事件
    console.log(e.target);
}
dom.onmouseout = function(e){   //给元素设置鼠标移出入事件
    console.log(e.target);
}
dom.oninput = function(e){   //当表单元素value发生变化时触发事件
    console.log(e.target);
}
dom.onfocus = function(e){   //表单元素获得焦点
    console.log(e.target);
}
dom.onblur = function(e){   //表单元素失去焦点
    console.log(e.target);
}
dom.onchange = function(e){   //常用于select框切换时触发的事件
    console.log(e.target);
}
dom.onscroll(){    //滚动事件
}
dom.onkeydown(e){    //键盘事件
    console.log(e.keyCode);//e.keyCode可以获取到当前键码，从而得知用户
    //按了什么键
}

setAttribute :修改标签属性
getAttribute :获取标签属性