JavaScript-DOM对象(Document Object Model)
介绍
HTML DOM(Document Object Model)定义了所有 HTML 元素的对象和属性/方法,
HTML DOM是关于如何获取、修改、添加或删除HTML元素的标准。
浏览器加载Html页面时,会把Html元素封装在dom对象(document),document对象引用存放在window对象中。
var doc = window.document; //可以省略window
1.HTML DOM常用方法
getElementById(id) - 获取带有指定 id 的节点（元素）
appendChild(node) - 插入新的子节点（元素）
removeChild(node) - 删除子节点（元素）
replaceChild() - 替换子节点
insertBefore() - 在指定的子节点前面插入新的子节点
createElement() - 创建元素节点
createTextNode() - 创建文本节点
createAttribute() - 创建属性节点
setAttribute() - 把指定属性设置或修改为指定的值
getAttribute() - 返回指定的属性值
2.HTML DOM常用属性
innerHTML - 节点的文本值
attributes - 节点的属性节点
nodeName - 节点名（元素/属性/文本）
nodeValue - 节点值（元素/属性/文本）
parentNode - 节点的父节点
childNodes - 节点的子节点
firstChild/lastChild
nextSibling/previousSibling
一.获取document元素
<div id="_id" class="_cs" name="_ne" ></div>
<script>
var d1 = document.getElementById("_id");
var d2 = document.getElementsByTagName("div")[0];
var d3 = document.getElementsByClassName("_cs")[0];
var d4 = document.getElementsByName("_ne")[0];
</script>
二.给document元素添加事件
1.onclick事件
<input type="button" value="点击" id="id_btn" " />
<script>
var btn = document.getElementById("id_btn");
btn.onclick = function(){
alert("点击啊啊啊啊");
}
</script>
2.onblur/onfocus事件
<input type="text" id="one" />
<script>
var one = document.getElementById("one");
one.onblur=function(){
alert("失焦");
}
one.onfocus=function(){
alert("聚焦");
}
</script>
3.onchange事件
<input type="text" id="one" />
<select id="two" >
<option>111</option>
<option>222</option>
</select>
<script>
var one = document.getElementById("one");
one.onchange=function(){
alert("option变了");
}
var two = document.getElementById("two");
two.onchange=function(){
alert("input变了");
}
</script>
4.onkeydown/onkeyup事件
<input type="text" id="one" />
<script>
var one = document.getElementById("one");
one.onkeydown = function(event){
if(event.keyCode == 13){ //按键unicode码是否回车
alert("回车");
}
}
</script>
5.onload事件
当document加载完成时触发
<body onload="load()" >
</body>
<script>
function load(){
alert('加载完成')
}
</script>
6.onmousedown/onmouseup/onmouseout/onmouseover/onmousemove
<div id="one"> </div>
<script>
var one = document.getElementById("one");
one.onmousedown = function(event){ //鼠标按下
alert(event.button);
}
one.onmouseup = function(event){ //鼠标抬起
alert("onmouseup");
}
one.onmouseout = function(event){ //鼠标从某元素移开
alert("onmouseout");
}
one.onmouseover = function(event){ //鼠标移到某元素之上
alert("onmouseover");
}
one.onmousemove = function(event){ //鼠标移动
alert(event.clientX + ", " + event.clientY);
}
</script>
7.onsubmit表单提交
<form action="#" id="one" >
<input type="text"/><br>
<input type="submit" value="提交" />
</form>
<script>
var one = document.getElementById("one");
one.onsubmit = function(event){
alert("拦截表单提交");
//return false;
event.preventDefault();//阻止默认事件发生
}
</script>
8.阻止事件继续传播
<div id="one">
<div id="two"></div>
</div>
<script>
document.getElementById("one").onclick=function (){
alert("one");
}
document.getElementById("two").onclick=function (event){
alert("two");
event.stopPropagation();//阻止事件继续传播给one
}
</script>
三.对document节点增删改成
<div id="div_"></div>
1.新增节点
var a = document.createElement("a");
a.setAttribute("href", "http://www.baidu.com");
a.innerHTML = "点击";
var div_= document.getElementById("div_");
div_.appendChild(a);
2.删除节点
var div_= document.getElementById("div_");
div_.parentNode.removeChild(div_);
3.替换节点
var p = document.createElement("p");
p.innerHTML = "段落";
var div_ = document.getElementById("div_");
div_.parentNode.replaceChild(p, div_);
4.克隆节点
var div_ = document.getElementById("div_");
var div_copy = div_.cloneNode(true);
div_.parentNode.insertBefore(div_copy, div_);
简书: http://www.jianshu.com/p/1eff601c9502
CSDN博客: http://blog.csdn.net/qq_32115439/article/details/78598158
GitHub博客: http://lioil.win/2017/11/21/js-dom.html
Coding博客: http://c.lioil.win/2017/11/21/js-dom.html