DOM中常見的幾種獲取節點的方法

時間 2019-11-15

標籤 dom 常見的幾種獲取節點方法欄目 HTML 简体版

原文原文鏈接

DOM中常見的幾種獲取節點的方法html

第一種：經過id屬性獲取post

這是最爲經常使用到的，也是從DOM文檔樹中獲取單個指定元素的最爲快捷的方法。ui

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
    <title>演示幾種獲取節點(元素)的方法</title>
    <meta http-equiv="content-type" content="text/html;charset=utf-8">
</head>
<body>
    <p id="op">這裏是p元素</p>
    
    <script>
        //經過p標記的特性id值，獲取元素p
        var op=document.getElementById("op");
    </script>
</body>
</html>

第二種：經過name屬性獲取spa

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
    <title>演示幾種獲取節點(元素)的方法</title>
    <meta http-equiv="content-type" content="text/html;charset=utf-8">
</head>
<body>
    <form id="myform" name="myform" method="post" action="#">
        你喜歡什麼顏色：
        <input type="radio" name="color" value="red" />紅
        <input type="radio" name="color" value="green" />藍
        <input type="radio" name="color" value="blue" />綠
    </form>
<script>
    //經過name標記的特性id值，獲取元素
    var oradio=document.getElementsByName("color");
    for(var i=0;i<oradio.length;i++){
        alert(oradio[i].value);//打印值
    }
</script>
</body>
</html>

一般在操做單選框和複選框時，這樣獲取比較的方便
第三種：經過標記名來獲取元素集合

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
    <title>演示幾種獲取節點(元素)的方法</title>
    <meta http-equiv="content-type" content="text/html;charset=utf-8">
</head>
<body>
    <p>我是第一個p標記</p>
    <p>我是第二個p標記</p>
<script>
    //經過標記名，獲取元素爲p的集合
    var listP=document.getElementsByTagName("p");
    alert(listP[0].innerHTML+"||"+listP[1].innerHTML);
</script>
</body>
</html>

第四種：經過元素的class屬性獲取

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
    <title>演示幾種獲取節點(元素)的方法</title>
    <meta http-equiv="content-type" content="text/html;charset=utf-8">
</head>
<body>
    <p class="p1">我是第一個p標記</p>
    <p>我是第二個p標記</p>
<script>
    //經過class值，獲取元素爲p的集合
    var listP=document.getElementsByClassName("p1");
    for(var i=0;i<listP.length;i++){
        alert(listP[i].innerHTML);
    }
</script>
</body>
</html>

以上是js中幾種經常使用的訪問元素的方法。