一、DOM节点
1.获取子节点：
childNodes
nodeType 节点类型
children 只包括元素，不包括文本； 子节点只算第一层。只算孩子一级。
<!DOCTYPE HTML><html><head><meta charset="utf-8"><title>无标题文档</title><script>window.onload=function (){ ???var oUl=document.getElementById(‘ul1‘); ???????//IE6-8 ???//alert(oUl.childNodes.length); ???for(var i=0;i<oUl.childNodes.length;i++) ???{ ???????//nodeType==3 ???-> ???文本节点 ???????//nodeType==1 ???-> ???元素节点 ???????//alert(oUl.childNodes[i].nodeType); ???????????????if(oUl.childNodes[i].nodeType==1) ???????{ ???????????oUl.childNodes[i].style.background=‘red‘; ???????} ???}};</script></head><body><ul id="ul1"> ???<li></li> ???<li></li></ul>aaaabbbbfafafsdfasd ???文本节点<span>qwerqwre 元素节点</span></body></html>当获取ul1下面的childNodes时，chrome和FF下length都是5，因为把空的文本节点也算上了。
<!DOCTYPE HTML><html><head><meta charset="utf-8"><title>无标题文档</title><script>window.onload=function (){ ???var oUl=document.getElementById(‘ul1‘); ???????//alert(oUl.children.length); ???for(var i=0;i<oUl.children.length;i++) ???{ ???????oUl.children[i].style.background=‘red‘; ???}};</script></head><body><ul id="ul1"> ???<li></li> ???<li></li></ul>aaaabbbbfafafsdfasd ???文本节点<span>qwerqwre 元素节点</span></body></html>使用children获取到的length就是2了。
2.parentNode
例子：点击链接，隐藏整个li
<!DOCTYPE HTML><html><head><meta charset="utf-8"><title>无标题文档</title><script>window.onload=function (){ ???var aA=document.getElementsByTagName(‘a‘); ???????for(var i=0;i<aA.length;i++) ???{ ???????aA[i].onclick=function () ???????{ ???????????this.parentNode.style.display=‘none‘; ???????}; ???}};</script></head><body><ul id="ul1"> ???<li>dfasdf <a href="javascript:;">隐藏</a></li> ???<li>45346 <a href="javascript:;">隐藏</a></li> ???<li>fghfgcvn <a href="javascript:;">隐藏</a></li> ???<li>vcbxcvbc <a href="javascript:;">隐藏</a></li> ???<li>757465867 <a href="javascript:;">隐藏</a></li></ul></body></html>3.offsetParent
offsetparent: 找到有定位的父级；根据样式不同会发生变化；
例子：获取元素在页面上的实际位置 View Code
<!DOCTYPE HTML><html><head><meta charset="utf-8"><title>无标题文档</title><style>#div1 {width:200px; height:200px; background:#CCC; margin:100px; }#div2 {width:100px; height:100px; background:red; position:absolute; left:50px; top:50px;}</style><script>window.onload=function (){ ???var oDiv2=document.getElementById(‘div2‘); ???????alert(oDiv2.offsetParent);};</script></head><body><div id="div1"> ???<div id="div2"></div></div></body></html> 4.首尾子节点
有兼容性问题
firstChild、firstElementChild
lastChild 、lastElementChild
firstChild和之前的childNodes有一个共同的问题，可能是文本节点。
高版本的浏览器使用firstElementChild，获取第一个元素子节点。
兄弟节点
有兼容性问题
nextSibling、nextElementSibling
previousSibling、previousElementSibling
<!DOCTYPE HTML><html><head><meta charset="utf-8"><title>无标题文档</title><script>window.onload=function (){ ???var oUl=document.getElementById(‘ul1‘); ???????//IE6-8 ???//oUl.firstChild.style.background=‘red‘; ???????//高级浏览器 ???//oUl.firstElementChild.style.background=‘red‘; ???????if(oUl.firstElementChild) ???{ ???????oUl.firstElementChild.style.background=‘red‘; ???} ???else ???{ ???????oUl.firstChild.style.background=‘red‘; ???}};</script></head><body><ul id="ul1"> ???<li>1</li> ???<li>2</li> ???<li>3</li></ul></body></html> 二、操纵元素属性
元素属性操作
第一种：oDiv.style.display=“block”;
第二种：oDiv.style[“display”]=“block”;
第三种：Dom方式
DOM方式操作元素属性
获取：getAttribute(名称)
设置：setAttribute(名称, 值)
删除：removeAttribute(名称)
<!DOCTYPE HTML><html><head><meta charset="utf-8"><title>无标题文档</title><script>window.onload=function (){ ???var oTxt=document.getElementById(‘txt1‘); ???var oBtn=document.getElementById(‘btn1‘); ???????oBtn.onclick=function () ???{ ???????//oTxt.value=‘asdfasd‘; ???????//oTxt[‘value‘]=‘xczcvb‘; ???????????????oTxt.setAttribute(‘value‘, ‘erwertwert‘); ???};};</script></head><body><input id="txt1" type="text" /><input id="btn1" type="button" value="按钮" /></body></html> 三、DOM元素灵活查找View Code
用className选择元素
如何用className选择元素
选出所有元素
通过className条件筛选
封装成函数
<!DOCTYPE HTML><html><head><meta charset="utf-8"><title>无标题文档</title><script>function getByClass(oParent, sClass){ ???var aResult=[]; ???var aEle=oParent.getElementsByTagName(‘*‘); ???????for(var 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‘); ???????for(var i=0;i<aBox.length;i++) ???{ ???????aBox[i].style.background=‘red‘; ???}};</script></head><body><ul id="ul1"> ???<li class="box"></li> ???<li class="box"></li> ???<li></li> ???<li></li> ???<li></li> ???<li class="box"></li> ???<li></li></ul></body></html> ========================================================================================================
二、创建、插入和删除元素View CodeView CodeView Code
创建DOM元素
- createElement(标签名) 创建一个节点
- appendChild(节点) 追加一个节点
例子：为ul插入li
插入元素
- insertBefore(节点, 原有节点) 在已有元素前插入
例子：倒序插入li
<!DOCTYPE HTML><html><head><meta charset="utf-8"><title>无标题文档</title><script>window.onload=function (){ ???var oBtn=document.getElementById(‘btn1‘); ???var oUl=document.getElementById(‘ul1‘); ???var oTxt=document.getElementById(‘txt1‘); ???????oBtn.onclick=function () ???{ ???????var oLi=document.createElement(‘li‘); ???????var aLi=oUl.getElementsByTagName(‘li‘); ???????????????oLi.innerHTML=oTxt.value; ???????????????//父级.appendChild(子节点); ???????//oUl.appendChild(oLi); ???????if(aLi.length>0) ???????{ ???????????oUl.insertBefore(oLi, aLi[0]); ???????} ???????else ???????{ ???????????oUl.appendChild(oLi); ???????} ???};};</script></head><body><input id="txt1" type="text"/><input id="btn1" type="button" value="创建li"/><ul id="ul1"></ul></body></html>删除DOM元素
- removeChild(节点) 删除一个节点
例子：删除li
<!DOCTYPE HTML><html><head><meta charset="utf-8"><title>无标题文档</title><script>window.onload=function (){ ???var aA=document.getElementsByTagName(‘a‘); ???var oUl=document.getElementById(‘ul1‘); ???????for(var i=0;i<aA.length;i++) ???{ ???????aA[i].onclick=function () ???????{ ???????????oUl.removeChild(this.parentNode); ???????}; ???}};</script></head><body><ul id="ul1"> ???<li>asfasd <a href="javascript:;">删除</a></li> ???<li>5645 <a href="javascript:;">删除</a></li> ???<li>ghdfjgj <a href="javascript:;">删除</a></li> ???<li>mvbnmvnb <a href="javascript:;">删除</a></li></ul></body></html>文档碎片 ---------------------------->> 很少很少用了，对高级版本的浏览器几乎没有什么作用。可以不用了解了。
文档碎片可以提高DOM操作性能(理论上)
文档碎片原理
document.createDocumentFragment()
<!DOCTYPE HTML><html><head><meta charset="utf-8"><title>无标题文档</title><script>window.onload=function (){ ???var oUl=document.getElementById(‘ul1‘); ???var oFrag=document.createDocumentFragment(); ???????for(var i=0;i<10000;i++) ???{ ???????var oLi=document.createElement(‘li‘); ???????//oUl.appendChild(oLi); ???????????????oFrag.appendChild(oLi); ???} ???????oUl.appendChild(oFrag);};</script></head><body><ul id="ul1"></ul></body></html> ========================================================================================================
------------
学习blus老师js(4)--DOM
原文地址：http://www.cnblogs.com/tenWood/p/7670174.html