DOM是为文档对象模型
dom操作主要是指对象中的节点（元素，文本，注释。。。等）。
childNodes 需要用nodeType兼容
nodeType = 1: 元素节点
nodeType = 3: 文本节点
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<script>
window.onload = function(){
var oUl = document.getElementsByTagName( "ul" )[0];
//childNodes: 某个元素节点的 子节点集合
var aChild = oUl.childNodes;
// alert( aChild.length );
//每一个节点都有一个类型，可以用nodeType来检查
// nodeType = 3 文本节点 nodeType = 1 元素节点(标签)
for( var i = 0; i < aChild.length; i++ ){
// alert( aChild[i].nodeType );
if( aChild[i].nodeType == 1 )
aChild[i].style.backgroundColor = 'red';
}
}
</script>
</head>
<body>
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
</ul>
</body>
</html>
children ( 子节点 集合 )
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<script>
window.onload = function(){
//children: 获取当前节点下的所有元素子节点
var oUl = document.getElementsByTagName( "ul" )[0];
var aChild = oUl.children;
for( var i = 0; i < aChild.length; i++ ){
aChild[i].style.backgroundColor = 'red';
}
}
</script>
</head>
<body>
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
</ul>
</body>
</html>
parentNode( 父节点 )
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<script>
window.onload = function(){
var aLi = document.querySelectorAll( "li" ),
aHref = document.querySelectorAll( 'a' );
for( var i = 0 ; i < aHref.length; i++ ){
aHref[i].onclick = function(){
this.parentNode.style.display = 'none';
}
}
}
</script>
</head>
<body>
<ul>
<li>1<a href="javascript:;">隐藏</a></li>
<li>2<a href="javascript:;">隐藏</a></li>
<li>3<a href="javascript:;">隐藏</a></li>
</ul>
</body>
</html>
chrome,ff:
previousElementSibling, nextElementSibling
firstElementChild, lastElementChild
ie8:
previousSibling, nextSibling
firstChild, lastChild
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
div {
padding:10px;
margin:10px;
border:1px solid #ccc;
}
</style>
<script>
window.onload = function(){
var oBtn = document.querySelector( "input" ),
aDiv = document.querySelectorAll( 'div' );
oBtn.onclick = function(){
// alert( document.body.firstChild.value || document.body.firstElementChild.value );
// alert( document.body.lastChild.innerHTML || document.body.lastElementChild.innerHTML );
//previous: 上一个元素
// alert( aDiv[2].previousSibling.innerHTML || aDiv[2].previousElementSibling.innerHTML );
alert( aDiv[2].nextSibling.innerHTML || aDiv[2].nextElementSibling.innerHTML );
}
}
</script>
</head>
<body>
<input type="button" value="点我">
<div>this is div1</div>
<div>this is div2</div>
<div>this is div3</div>
<div>this is div4</div>
<div>this is div5</div>
</body>
</html>
appendChild( 每次往父元素的最后面 追加节点 )
insertBefore: 要做ie8兼容
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<script>
window.onload = function(){
var oUl = document.querySelector( "#box" ),
oTxt = document.querySelector( "input" ),
oBtn = document.querySelector( 'input[type="button"]' ),
// aLi = document.getElementsByTagName( "li" );
aLi = document.getElementsByTagName( "li" );
oBtn.onclick = function(){
var oLi = document.createElement( 'li' );
oLi.innerHTML = oTxt.value;
// oUl.insertBefore( oLi, aLi[0] );
if( aLi[0] ){
oUl.insertBefore( oLi, aLi[0] );
}else {
oUl.appendChild( oLi );
}
}
}
</script>
</head>
<body>
<input type="text" name="" id="">
<input type="button" value="追加">
<ul id="box"></ul>
</body>
</html>
cloneNode( 深拷贝:true 浅拷贝:false )
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
ul{
border:1px solid red;
padding:5px;
}
</style>
<script>
window.onload = function(){
var oBtn1 = document.querySelector( '#btn1' ),
oBtn2 = document.querySelector( '#btn2' ),
oUl = document.querySelector( "ul" );
oBtn1.onclick = function(){
document.body.appendChild( oUl.cloneNode( true ) );
}
oBtn2.onclick = function(){
document.body.appendChild( oUl.cloneNode( false ) );
}
}
</script>
</head>
<body>
<input type="button" value="深拷贝" id="btn1">
<input type="button" value="浅拷贝" id="btn2">
<ul onclick="alert(this.innerHTML);">
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
</ul>
</body>
</html>
replaceChild
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<script>
window.onload = function(){
var oBtn = document.querySelector( "input" ),
aSpan = document.querySelectorAll( "span" );
oBtn.onclick = function(){
for( var i = 0; i < aSpan.length; i++ ){
var oDiv = document.createElement( "div" );
oDiv.innerHTML = aSpan[i].innerHTML;
document.body.replaceChild( oDiv, aSpan[i] );
}
}
}
</script>
</head>
<body>
<input type="button" value="替换">
<span>this is test string</span>
<span>this is test string</span>
</body>
</html>
removeChild
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<script>
window.onload = function(){
var aHref = document.querySelectorAll( "a" ),
oUl = document.querySelector( "ul" );
for( var i = 0; i < aHref.length; i++ ){
aHref[i].onclick = function(){
//父节点.removeChild( 子节点 )
oUl.removeChild( this.parentNode );
}
}
}
</script>
</head>
<body>
<ul>
<li>1<a href="javascript:;">移除1</a></li>
<li>2<a href="javascript:;">移除2</a></li>
<li>3<a href="javascript:;">移除3</a></li>
</ul>
</body>
</html>