JS-DOM：基础知识(一)

标签：des   style   color   java   os   io   strong   for   

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="按钮" 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="按钮" 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="按钮" 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="按钮" 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="按钮" 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="按钮" 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="按钮" 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="按钮" 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>

JS-DOM：基础知识(一),布布扣,bubuko.com

JS-DOM：基础知识(一)

标签：des   style   color   java   os   io   strong   for   

原文地址：http://www.cnblogs.com/lxbchengxunyuan/p/3894303.html