文章 - JavaScript DOM | 前端网（QDFuns）

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>DOM对象</title>
</head>
<body>

<br />
    <input type="button" onclick="getnum()" value="getElementById" />
    <input type="button" onclick="getnum1()" value="getElementsByName" />
    <input type="button" onclick="getnum2()" value="getElementsByTagName" />
    <input type="button" onclick="getnum3()" value="getAttribute" />
    <input type="button" onclick="getnum4()" value="setAttribute" />
    <script type="text/javascript">
    // getElementById()          通过指定ID获取元素 唯一
    function getnum(){
        var mynode = document.getElementById('Ul');
        mynode.style.backgroundColor="#ccc";
    }
    // getElementsByName()       通过元素名称name属性获得元素 集合
    function getnum1() {
        var mynode = document.getElementsByName('text');
        alert(mynode.length);
        for(var i=0; i<=mynode.length; i++){
            mynode[i].style.color="blue";
        }
    }
    // getElementsByTagName()    通过标签名称获得元素 集合
    function getnum2(){
        var mynode = document.getElementsByTagName('li');
        alert(mynode.length);
        for(var i=0; i<mynode.length; i++){
            mynode[i].style.backgroundColor="#f00";
        }
    }

// getAttribute()             通过元素节点的属性名称获取属性的值
    function getnum3(){
        var mynode = document.getElementsByTagName('li');
        for(var i=0; i<mynode.length; i++){
            var text = mynode[i].getAttribute('title');
            if(text != null){
                alert(text);
            }
        }
    }

// setAttribute()          增加一个指定名称和值的新属性，或者把一个现有的属性设定为指定的值
    function getnum4(){
        var mynode = document.getElementsByTagName('li');
        mynode[1].setAttribute('title','第2条')
    }

</script>

</body>

</html>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>节点</title>
</head>
<body>
    <ul id="text"><li>第一条数据</li><li>第二条数据</li><li id="s">第三条数据</li><li>第四条数据</li></ul>

<input type="button" onclick="txt()" value="childNodes">
    <input type="button" onclick="txt2()" value="firstChild">
    <input type="button" onclick="txt3()" value="lastChild">
    <input type="button" onclick="txt4()" value="firstChild">
    <input type="button" onclick="txt5()" value="nextSibling">
    <input type="button" onclick="txt6()" value="previousSibling">
    <input type="button" onclick="txt7()" value="appendChild">
    <input type="button" onclick="txt8()" value="insertBefore">
    <input type="button" onclick="txt9()" value="removeChild">
    <input type="button" onclick="txt10()" value="replaceChild">
    <input type="button" onclick="txt11()" value="createElement">
    <input type="button" onclick="txt12()" value="createTextNode">
<script>
    var Ul = document.getElementById('text');
    var Li = document.createElement('li');
    var S = document.getElementById('s');
    // childNodes  访问选定元素节点下的所有子节点的列表 数组
    var child = Ul.childNodes;
    function txt(){
        alert(len.length);
    }

// firstChild    属性返回‘childNodes’数组的第一个子节点
    function txt2(){
        Ul.firstChild.style.color="red";
    }

// lastChild     属性返回‘childNodes’数组的最后一个子节点
    function txt3(){
        Ul.lastChild.style.color="blue";
    }

// parentNode    获取指定节点的父节点
    function txt4(){
        var Li = document.getElementsByTagName('li');
        alert(Li[0].parentNode.nodeName);
    }

// nextSibling  属性可返回某个节点之后紧跟的节点
    function txt5(){
        S.nextSibling.style.borderBottom = '1px solid #000';
    }

// previousSibling 属性可返回某个节点之前紧跟的节点
    function txt6(){
        S.previousSibling.style.borderBottom = '1px solid #f00';
    }

// appendChild()  在指定节点的最后一个子节点列表之后添加一个新的子节点
    function txt7(){
        Li.innerHTML = "插入第五条数据";
        Ul.appendChild(Li);
    }

// insertBefore()  在指定的已有子节点之前插入新的子节点。
    function txt8(){
        Li.innerHTML = "指定节点插入";
        Ul.insertBefore(Li,child[1]);
    }

// removeChild()  从子节点列表中删除某个节点。如删除成功，此方法可返回被删除的节点，如失败，则返回 NULL。
    function txt9(){
        Ul.removeChild(child[0])
    }

// replaceChild() 用新节点替换某个子节点
    function txt10(){
        var textnode=document.createTextNode('新内容');
        child[0].replaceChild(textnode,child[0].childNodes[0]);
    }

// createElement 创建元素节点
    function txt11(){
        var li=document.createElement('li');
        li.innerHTML = "创建元素";
        Ul.appendChild(li);
    }

// createTextNode 创建新的文本节点
    function txt12(){
        var textnode=document.createTextNode('新内容');
        child[0].replaceChild(textnode,child[0].childNodes[0]);
    }

</script>
</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
     .on{ color:#f00;}
     #txt > div{ display: none;}
     #txt .show{ display:block;}
    </style>
</head>
<body>
    <ul id="tab">
        <li class="on">选项一</li>
        <li>选项二</li>
        <li>选项三</li>
    </ul>
    <div id="txt">
        <div class="show">选项一内容</div>
        <div>选项二内容</div>
        <div>选项三内容</div>
    </div>

for(var j=0; j<Li.length; j++){
                Li[j].className="";
                oDiv[j].className='';    
            }
            this.className="on";
            oDiv[this.index].className="show";
        }

}

</script>
</body>
</html>

JavaScript DOM

评论 ( 0 )

最新评论

暂无评论

JavaScript DOM

评论 ( 0 )

最新评论

暂无评论

欢迎您回来

创建账号

找回密码