DOM中常见的几种获取节点的方法

最新推荐文章于 2022-11-12 00:39:42 发布

weixin_33937778

最新推荐文章于 2022-11-12 00:39:42 发布

阅读量341

点赞数

文章标签： python

原文链接：https://my.oschina.net/u/1443572/blog/220590

版权

2019独角兽企业重金招聘Python工程师标准>>>

DOM中常见的几种获取节点的方法

第一种：通过id属性获取

这是最为常用到的，也是从DOM文档树中获取单个指定元素的最为快捷的方法。

<!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属性获取

<!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>