获取DOM节点的方式

最新推荐文章于 2023-03-27 21:42:30 发布

giser_yifang

最新推荐文章于 2023-03-27 21:42:30 发布

阅读量2.9k

点赞数 1

分类专栏：前端文章标签： html5 javascript

本文链接：https://blog.csdn.net/qq_42502673/article/details/117607206

版权

前端专栏收录该内容

4 篇文章 0 订阅

订阅专栏

**

获取DOM节点的方式：

**
1. 通过ID获取节点【返回具体某个节点】
document.getElementById(ID名)
2.通过标签名获取节点【返回节点数组，即使只有一个】
document.getElementsByTagName(标签名)
3.通过标签的name值获取节点【返回节点数组】
document.getElementsByName(Name名)
4.通过class值来获取节点【返回节点数组】
document.getElementsByClassName(Class名)
5.根据选择器返回找到结果集中的第一个
document.querySelect(“选择器”)
6.根据选择器返回找到的结果集，是个节点数组
document.querySelectAll(“选择器”)

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

giser_yifang

关注

1
点赞
踩
5

收藏

觉得还不错? 一键收藏
0
评论
获取DOM节点的方式

获取DOM节点的方式： 1. 通过ID获取节点【返回具体某个节点】 document.getElementById(ID名) 2.通过标签名获取节点【返回节点数组，即使只有一个】 document.getElementsByTagName(标签名) 3.通过标签的name值获取节点【返回节点数组】 document.getElementsByName(Name名) 4.通过c
复制链接

扫一扫