1.创建Li
<input id="btn1" type="button" value="创建Li"/> <ul id="ul1"> <li>aaa</li> </ul> JS代码：
window.onload=function () { var oBtn=document.getElementById('btn1'); var oUl=document.getElementById('ul1'); oBtn.onclick=function () { var oLi=document.createElement('li'); //父.appendChild(子节点) oUl.appendChild(oLi); } }
1.2动态创建Li,并把文本框的值当做Li的值
HTML部分为：
<input id="txt1" type="text" /> <input id="btn1" type="button" value="创建Li"/> <ul id="ul1"> <li>aaa</li> </ul>
JS代码为：
window.onload=function () { var oBtn=document.getElementById('btn1'); var oTxt=document.getElementById('txt1'); var oUl=document.getElementById('ul1'); oBtn.onclick=function () { var oLi=document.createElement('li'); oLi.innerHTML=oTxt.value; //父.appendChild(子节点) oUl.appendChild(oLi); } }
这里我们新插入的是放在了最后，怎么样放在最前面了
var oBtn=document.getElementById('btn1'); var oTxt=document.getElementById('txt1'); var oUl=document.getElementById('ul1'); oBtn.onclick=function () { var oLi=document.createElement('li'); var aLi=oUl.getElementsByTagName('li'); oLi.innerHTML=oTxt.value; oUl.insertBefore(oLi, aLi[0]); }
这样写有一个问题:如果以开始并没有Li就会报错，我们需要判断下
oBtn.onclick=function ()
{
var oLi=document.createElement('li');
var aLi=oUl.getElementsByTagName('li');
oLi.innerHTML=oTxt.value;
if(aLi.length==0)
{
oUl.appendChild(oLi);
}
else
{
oUl.insertBefore(oLi, aLi[0]);
}
}
2.删除元素
<ul id="ul1"> <li>sdfsdf <a href="javascript:;">删除</a></li> <li>3432 <a href="javascript:;">删除</a></li> <li>tttt <a href="javascript:;">删除</a></li> <li>ww <a href="javascript:;">删除</a></li> </ul>
JS部分为：
var aA=document.getElementsByTagName('a'); var oUl=document.getElementById('ul1'); var i=0; for(i=0;i<aA.length;i++) { aA[i].onclick=function () { oUl.removeChild(this.parentNode); } }
点击删除对应的LI就会被删除
2.ChildNodes和NodeType
<ul id="ul1"> <li></li> <li></li> <li></li> </ul>
js部分：
var oUL = document.getElementById("ul1"); alert(oUL.childNodes.length);
可见在谷歌下面弹出长度为7，在IE较低版本中弹出来的却是3
我们将htm改为
<ul id="ul1"><li></li><li></li><li></li></ul>
这样弹出来的长度都是为3，可见那些空白文本也加进去了。
所以我们使用需要加上NodeType来使用
var oUl=document.getElementById('ul1'); var i=0; for(i=0;i<oUl.childNodes.length;i++) { if(oUl.childNodes[i].nodeType==1) { oUl.childNodes[i].style.background='red'; } } 常见的NodeType
语法: elementNode.nodeType 节点数： 节点名称： 1 Element | 元素 2 Attribute | 属性 3 Text | 文本 4 CDATA Section | CDATA 断 5 Entity Reference | 实体参数 6 Entity | 实体 7 Processing Instrucion | 处理指令 8 Comment | 注释 9 Document | 文档 10 Document Type | 文档类型 11 Document Fragment | 文档片断 12 Notation | 符号
3.children
html部分不变，JS为：
var oUL = document.getElementById("ul1");
alert(oUL.children.length);
可见弹出的都是3.可以认为这个是上面的一个兼容性版本，用来取第一层的子节点。
4.parentNode
HTML部分为：
<ul> <li>aass <a href="javascript:;">隐藏</a></li> <li>5453 <a href="javascript:;">隐藏</a></li> <li>cvxc <a href="javascript:;">隐藏</a></li> <li>ertert <a href="javascript:;">隐藏</a></li> </ul>
JS部分为：
var aA=document.getElementsByTagName('a'); var i=0; for(i=0;i<aA.length;i++) { aA[i].onclick=function () { this.parentNode.style.display='none'; } }
点击隐藏，对应的父节点LI隐藏。
5.offsetParent
获得当前元素用来定位的那个父级
html:
<body> <div id="div1" style=" 100px; height: 100px; background: red; margin: 100px;"> <div onclick="alert(this.offsetParent.tagName)" id="div2" style="100px; height:100px; background:yellow; position:absolute; left:100px; top:100px;"></div> </div> </body>
由于父级的DIV是相对定位，所以会弹出DIV
如果去掉position:relative，会一级级的网上找，找到BODY
6.firstElementChild和firstChild
<ul id="ul1"> <li></li> <li></li> <li></li> <li></li> </ul>
在IE只支持firstchild，谷歌支持firstElementChild，所以我们要做兼容性模式
var oFirst = oul.firstElementChild || oul.firstChild; oFirst.style.background = 'red';
可见第一个LI背景色变为红色
7.lastElementChild和lastChild
和上面的用法一样，最后一行LI变红色。
8.nextElementSibling和nextSibling;
用法同上，也是个兼容的两个属性，获取元素下一个节点。
9.previousElementSibling 和previousSibling;
获取元素的上一个节点
10.操作元素属性:getAttribute,setAttribute,removeAttribute
获取：getAttribute（名称）
设置：setAttribute（名称，值）
删除：removeAttribute（名称）
HTML:
<input type="text" id="txt1" />
var text = document.getElementById("txt1"); alert(text.getAttribute('id')); text.setAttribute("value", "爸爸去哪儿"); text.removeAttribute("value");
removeAttribute清空文本框
11.用CLASS选取元素
htm：
<ul id="ul1"> <li></li> <li></li> <li></li> <li class="box"></li> <li></li> <li class="box"></li> <li class="box"></li> <li></li> <li></li> <li></li> </ul>
JS：
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') { aLi[i].style.background='red'; } }
这样有CLASS为box的LI会显示红色
我们可以做一个小小的封装
function getByClass(oParent, sClass) { var aEle=oParent.getElementsByTagName('*'); var aResult=[]; var i=0; for(i=0;i<aEle.length;i++) { if(aEle[i].className==sClass) { aResult.push(aEle[i]); } } return aResult; } window.onload=function () { var oUl=document.getElementById('ul1'); var aBox=getByClass(oUl, 'box'); var i=0; for(i=0;i<aBox.length;i++) { aBox[i].style.background='yellow'; } }