一、创建DOM元素（例如li）
createElement（标签名）：创建一个结点
appendChild（结点）：追加一个结点
注：
父.appendChild（子节点）;将创建好的子节点插到父中去，但只能插到之后。
父.insertBefore（子节点，谁之前）;可以插到之前。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>创建li</title>
<script type="text/javascript">
window.onload=function()
{
var oBtn=document.getElementById('btn1');
var oUl=document.getElementById('ull');
oBtn.onclick=function()
{
var oLi=document.createElement('li');//创建一个li
oUl.appendChild(oLi);// 父.appendChild（子节点）将子节点插到父中区
}
}
</script>
</head>
<body>
<input id="btn1" type="button" value="创建li" >
<ul id="ull">
<li>aaa</li>
</ul>
</body>
</html>
类似发说说：（最近发的在前）
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>创建li</title>
<script type="text/javascript">
window.onload=function()
{
var oBtn=document.getElementById('btn1');
var oTxt=document.getElementById('txt1');
var oUl=document.getElementById('ull');
oBtn.onclick=function()
{
var oLi=document.createElement('li');//创建一个li
var aLi=oUl.getElementsByTagName('li');
oLi.innerHTML=oTxt.value;
if(aLi.length==0)
{
oUl.appendChild(oLi);
}
else
{
oUl.insertBefore(oLi,aLi[0]); // 父.insertBefore(子节点，谁之前)
}
}
}
</script>
</head>
<body>
<input id="txt1" type="text" >
<input id="btn1" type="button" value="创建li" >
<ul id="ull">
</ul>
</body>
</html>
二、删除DOM元素（例如li）
语法：父.removeChild（子节点）
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>删除</title>
<script type="text/javascript">
window.onload=function()
{
var aA=document.getElementsByTagName('a');
var oUl=document.getElementById('ull');
var i=0;
for ( i = 0; i < aA.length; i++)
{
aA[i].onclick=function()
{
oUl.removeChild(this.parentNode);
}
}
}
</script>
</head>
<body>
<ul id="ull">
<li>sdshhkj<a href="javascript:;">删除</a></li>
<li>3432<a href="javascript:;">删除</a></li>
<li>qqq<a href="javascript:;">删除</a></li>
<li>aaaaa<a href="javascript:;">删除</a></li>
<li>ggdsa<a href="javascript:;">删除</a></li>
</ul>
</body>
</html>
三、parentNode（例如：点击链接隐藏整个li）
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>节点</title>
<script type="text/javascript">
window.onload=function()
{
var oA=document.getElementsByTagName('a');
var i=0;
for ( i = 0; i <oA.length; i++)
{
oA[i].onclick=function()
{
this.parentNode.style.display='none';//隐藏的是a的父节点li
}
}
}
</script>
</head>
<body>
<ul id="ul1">
<li>jbjj<a href="javascript:;">隐藏</a></li>
<li>5543<a href="javascript:;">隐藏</a></li>
<li>jasd<a href="javascript:;">隐藏</a></li>
<li>fsgs<a href="javascript:;">隐藏</a></li>
</ul>
</body>
</html>
四、首节点和尾节点
首节点：firstChild、firstElementChild
尾节点：lastChild、lastElementChild
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>节点</title>
<script type="text/javascript">
window.onload=function()
{
var oUl=document.getElementById('ul1');
// oUl.firstChild.style.background='red';//只在IE下能用
//oUl.firstElementChild.style.background='red';//只在火狐下能用
var oFirst=oUl.firstChild||oUl.firstElementChild;//在IE和火狐下都能用
oFirst.style.background='red';
}
</script>
</head>
<body>
<ul id="ul1">
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
</body>
</html>
五、DOM方式操作元素属性
获取：getAttribute（名称）
设置：setAttribute（名称，值）
删除：removeAttribute（名称）
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>dom方式操作元素属性</title>
<script type="text/javascript">
window.onload=function()
{
var oTxt=document.getElementById('txt1');
//第一种方式 oTxt.value='123';
//第二种方法 oTxt['value']='abc';
//第三种方式 dom方式 oTxt.setAttribute('value','gsajgkj');
alert(oTxt.getAttribute('id'));
}
</script>
</head>
<body>
<input type="text" id="txt1">
</body>
</html>
六、用class选元素
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>dom方式操作元素属性</title>
<script type="text/javascript">
window.onload=function()
{
var oUl=document.getElementById('ul1');
var aLi=oUl.getElementsByTagName('li');
var i=0;
for (i = 0; i < aLi.length; i++)
{
if (aLi[i].className=='box') //用class选择元素
{
aLi[i].style.background='red';
}
}
}
</script>
</head>
<body>
<ul id="ul1">
<li></li>
<li></li>
<li></li>
<li class="box"></li>
<li></li>
<li class="box"></li>
<li></li>
<li class="box"></li>
</ul>
</body>
</html>
