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中几种经常使用的访问元素的方法。