获取dom节点的几种方法

最新推荐文章于 2024-06-22 11:53:24 发布

ljl1255917058

最新推荐文章于 2024-06-22 11:53:24 发布

阅读量184

点赞数

文章标签： javascript 前端开发语言

本文链接：https://blog.csdn.net/ljl1255917058/article/details/132311636

版权

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
        "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
    <meta charset="UTF-8">
    <title>获取节点</title>
</head>
<body>
<div id="box">box0</div>
<p>p1</p>
<p>p2</p>
<div class="box">box1</div>
<div class="box">box2</div>
<div class="box">box3</div>
<input type="text" name="username">
<script>
    //通过ID返回节点【返回的是具体的某个节点】
    var box0 = document.getElementById('box');
    console.log(box0);
    box0.style.color = 'red';

    //通过标签名获取节点【返回的是节点数组，即使只有一个】
    var pAll = document.getElementsByTagName('p')
    console.log(pAll)
    pAll[0].style.fontSize = '30px'
    pAll[1].style.fontSize = '10px'

    //通过标签的name值获取节点【返回节点数组】
    var names = document.getElementsByName('username')
    console.log(names)
    names[0].value='张三'

    //通过class值来获取节点【返回节点数组】
    var boxs = document.getElementsByClassName('box')
    console.log(boxs)
    for(var i in boxs){
        boxs[i].innerHTML = 'hahahaha...'
    }

    //根据选择器返回找到结果集中的第一个
    console.log(document.querySelector('p'))  //标签
    console.log(document.querySelector('.box')) //类
    console.log(document.querySelector('#box')) //ID

    //根据选择器返回找到的结果集，是个节点数组
    console.log(document.querySelectorAll('p')) //标签
    console.log(document.querySelectorAll('.box')) //类
    console.log(document.querySelectorAll('#box')) //ID
</script>
</body>
</html>

1. 通过ID获取节点【返回具体某个节点】 document.getElementById(ID名) 2.通过标签名获取节点【返回节点数组，即使只有一个】 document.getElementsByTagName(标签名) 3.通过标签的name值获取节点【返回节点数组】 document.getElementsByName(Name名) 4.通过class值来获取节点【返回节点数组】 document.getElementsByClassName(Class名) 5.根据选择器返回找到结果集中的第一个 document.querySelect(“选择器”) 6.根据选择器返回找到的结果集，是个节点数组 document.querySelectAll(“选择器”) ———————————————— 版权声明：本文为CSDN博主「giser_yifang」的原创文章，遵循CC 4.0 BY-SA版权协议，转载请附上原文出处链接及本声明。原文链接：https://blog.csdn.net/qq_42502673/article/details/117607206