首页 > 代码库 > JS-DOM：基础知识(一)
JS-DOM：基础知识(一)
1.childNodes 属性可返回指定节点的子节点的节点列表(childNodes在firefox会选取空白节点)
<script>
window.onload=function(){
var oUl=document.getElementById("ul1");
alert(oUl.childNodes.length);//获取子节点长度：11
}
</script>
<ul id="ul1">
<li>我是文字1<span>我是span</span></li>
<li>我是文字2</li>
<li>我是文字3</li>
<li>我是文字4</li>
<li>我是文字5</li>
</ul>
2.children //dom选取页面元素对象的子对象时,children 选取不包括空白节点
<script>
window.onload=function(){
var oUl=document.getElementById("ul1");
var aEl=oUl.getElementsByTagName("*");
alert(oUl.children.length);
}
</script>
<ul id="ul1">
<li>我是文字1<span>我是span</span></li>
<li>我是文字2</li>
<li>我是文字3</li>
<li>我是文字4</li>
<li>我是文字5</li>
</ul>
3.创建节点：1、createElement :创建标签节点；2、 createTextNode :创建文本节点；
例一：<script>
window.onload=function(){
var oBtn=document.getElementById("btn1");
var oUl=document.getElementById("ul1");
var index=0;
oBtn.onclick=function(){
index++;
var oLi=document.createElement("li");
var oTxt=document.createTextNode(index);
oLi.appendChild(oTxt);
oUl.apprendChild(oLi);
}
}
</script>
<input type="button" value="http://www.mamicode.com/按钮" id="btn1">
<ul id="ul1">
<li>0</li>
</ul>
例二：<script>
window.onload=function(){
var oBtn=document.getElementById("btn1");
var oUl=document.getElementById("ul1");
var index=0;
oBtn.onclick=function(){
index++;
var oLi=document.createElement("li");
oLi.innerHTML=index;
oUl.appendChild(oLi);
}
}
</script>
<input type="button" value="http://www.mamicode.com/按钮" id="btn1">
<ul id="ul1">
<li>0</li>
</ul>
4.setAttribute（name,value）:设置节点上name属性的值为value;
getAttribute(name) :获取节点上name属性的值;
<script>
window.onload=function(){
var oBtn=document.getElementById("btn1");
oBtn.onclick=function(){
oBtn.setAttribute("index","hello");
alert(oBtn.getAttribute("index"));
}
}
</script>
<input type="button" value="http://www.mamicode.com/按钮" index="1" id="btn1">
5、removeAttribute(Name): 删除节点上的name属性
<script>
window.onload=function(){
var oBtn=document.getElementById("btn1");
oBtn.onclick=function(){
oBtn.removeAttribute("index");
}
}
</script>
<input type="button" value="http://www.mamicode.com/按钮" index="1" id="btn1">
6、removeChild() ：删除子节点
<script>
function fnFirst(oParent){
if(oParent.firstElementChild){
return oParent.firstElementChild;
}else{
return oParent.firstChild;
}
}
window.onload=function(){
var oBtn=document.getElementById("btn1");
var oUl=document.getElementById("ul1");
var oSpan=document.getElementById("span1");
oBtn.onclick=function(){
oUl.children[0].removeChild(oSpan);
}
}
</script>
<input type="button" value="http://www.mamicode.com/按钮" id="btn1">
<ul id="ul1">
<li>我是li1 <span id="span1">我是span</span></li>
<li>我是li2</li>
<li>我是li3</li>
<li>我是li4</li>
</ul>
7、replaceChild(newNode,oldNode): newNode替换节点oldNode
<script>
function fnFirst(oParent){
if(oParent.firstElementChild){
return oParent.firstElementChild;
}else{
return oParent.firstChild;
}
}
例子一：window.onload=function(){
var oBtn=document.getElementById("btn1");
var oUl=document.getElementById("ul1");
oBtn.onclick=function(){
oUl.replaceChild(oUl.children[3], oUl.children[1]);
}
}
例子二： window.onload=function(){
var oBtn=document.getElementById("btn1");
var oUl=document.getElementById("ul1");
oBtn.onclick=function(){
var oDiv=document.createElement("div");
oDiv.innerHTML="i am a div";
oUl.replaceChild(oDiv, oUlchildren[1]);
}
}
</script>
<input type="button" value="http://www.mamicode.com/按钮" id="btn1">
<ul id="ul1">
<li>我是li1</li>
<li>我是li2</li>
<li>我是li3</li>
<li>我是li4</li>
</ul>
8、appendChild(node): 向childNodes末尾插入一个节点node;
<script>
window.onload=function(){
var oBtn=document.getElementById("btn1");
var oUl=document.getElementById("ul1");
var index=0;
oBtn.onclick=function(){
index++;
var oLi=document.createElement("li");
oLi.innerHTML=index;
oUl.appendChild(oLi);
}
}
</script>
<input type="button" value="http://www.mamicode.com/按钮" id="btn1">
<ul id="ul1">
<li>0</li>
</ul>
9、insertBefore(node,targetNode): 向targetNode之前插入一个节点node
<script>
function fnFirst(oParent){
if(oParent.firstElementChild){
return oParent.firstElementChild;
}else{
return oParent.firstChild;
}
}
方法一：window.onload=function(){
var oBtn=document.getElementById("btn1");
var oUl=document.getElementById("ul1");
var index=0;
oBtn.onclick=function(){
index++;
var oLi=document.createElement("li");
oLi.innerHTML=index;
oUl.insertBefore(oLi, fnFirst(oUl));
}
}
方法二：window.onload=function(){
var oBtn=document.getElementById("btn1");
var oUl=document.getElmentById("ul1");
var index=0;
oBtn.onclick=function(){
index++;
var oLi=document.createElement("li");
oLi.innerHTML=index;
if(oUl.children.length>0){
oUl.insertBefore(oLi,oUl.children[0]);
}else{
oUl.appendChild(oLi);
}
}
}
</script>
<input type="button" value="http://www.mamicode.com/按钮" id="btn1">
<ul id="ul1"></ul>
10、nextSibling: 下一个兄弟节点； previousSibling: 上一个兄弟节点
<script>
function getNext(obj){
if(obj.nextElementSibling){
return obj.nextElementSibling;
}else{
return obj.nextSibling;
}
}
function getPrevious(obj){
if(obj.previousElmentSibling){
return obj.previousElementSibling;
}else{
return obj.previousSibling;
}
}
window.onload=function(){
var oUl=document.getElementById("ul1");
var oLi=oUl.children[3];
//alert(oLi.nextSibling.innerHTML);
//alert(oLi.nextElementSibling.innerHTML);
//alert(oLi.parentNode.id);
var oParent=oLi.parentNode;
alert(getNext(oParent).innerHTML);
}
</script>
<div id="div1">woshidiv1</div>
<ul id="ul1">
<li>我是文字1<span>我是span</span></li>
<li>我是文字2</li>
<li>我是文字3</li>
<li>我是文字4</li>
<li>我是文字5</li>
</ul>
<div id="div2">我是div2</div>
11、获取计算后的样式
（1）、currentStyle : ie所支持的获取非行间样式的方法
（2）、getComputedStyle: 非ie所支持的获取非行间样式的方法
<style type="text/css">
#div1{
height: 100px;
width: 100px;
font-size: 12px;
background-color: #ccc;
}
</style>
<script type="text/javascript">
function getStyle(obj,sStyle){
if (window.getComputedStyle){
return getComputedStyle(obj, null)[sStyle];
}
else{
return obj.currentStyle[sStyle];
}
}
window.onload=function (){
var oDiv=document.getElementById("div1");
oDiv.onclick=function (){
// var fontSize=oDiv.style.fontSize;
// alert(oDiv.currentStyle.fontSize);//在ie下获取计算后的样式
// alert(getComputedStyle(oDiv, null).fontSize);
alert(getStyle(oDiv,"fontSize"));
}
}
</script>
</head>
<body>
<div id="div1" style="">123456</div>
</body>