js获取元素的方法及具体案例

最新推荐文章于 2024-04-29 23:01:06 发布

傻乎乎的小不点

最新推荐文章于 2024-04-29 23:01:06 发布

阅读量1.5k

点赞数 3

文章标签： javascript 前端 java

本文链接：https://blog.csdn.net/m0_62697897/article/details/127042111

版权

1. 获取元素的方法

2.补充知识

3.具体案例：变色模块

1. 获取元素的方法

（1）通过id获取：document.getElementByid('id名')

例：

<button id="btn">注册</button>

var btn=document.getElementById('btn');

（2）通过标签名获取：document.getElementsByTagName('标签名')

例：

 <button>登录</button>

var btns=document.getElementsByTagName('button')[1];

（3）通过class名获取：document.getElementsByClassName('class名')

例：

  <span class="span">静夜思</span>

var spans=document.getElementsByClassName('span');

（4）通过name获取：document.getElementsByName('name') 表单

例：

<input type="text" name="user">

var inps=document.getElementsByName('user');

（5）通过选择器获取

<1>document.querySelector('选择器')：获取该选择器的第一个元素

<2>document.querySelectorAll('选择器')：获取拥有此选择器的元素

例：

获取单个元素

 <p class="p1">您输入的用户名是</p>

var p1=document.querySelector('.p1');

获取数组

 <button id="btn">注册</button>
 <button>登录</button>
 <button>获取表单内容</button>

var button=document.querySelectorAll('button')[1];

注意：（1）只有通过id和标签名获取元素没有兼容，其他都不兼容低版本ie

（2）获取多个元素的，获取到的都是数组

（3）不只是通过document对象获取元素，也可以通过父元素获取子元素

代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>获取元素</title>
    <style>
        .father{
            width: 200px;
            height: 200px;
            background-color: blueviolet;
        }
        .father p{
            background-color: blue;
        }
    </style>
</head>
<body>
    <button id="btn">注册</button>
    <button>登录</button>
    <span class="span">静夜思</span>
    <span class="span">思静夜</span>
    <br>
    <input type="text" name="user">
    <input type="password" name="user">
    <br>
    <button>获取表单内容</button>
    <p class="p1">您输入的用户名是</p>
    <div class="father">
        <p style="background-color: hotpink;">我是大儿子</p>
    </div>
</body>
<script>
    // 1.获取元素
    // 通过id名获取   获取的是单个元素
    // var btn=document.getElementById('btn');
    // console.log(btn);
    // 发生单击事件的时候获取
    // btn.onclick=function(){
    //     console.log("注册");
    // }

    // 通过标签名获取  获取数组
     // 获取登录按钮[1] 
    // var btns=document.getElementsByTagName('button')[1];
    // console.log(btns);
    // btns.onclick=function(){
    //     console.log("www");
    // }

    // 通过class名获取元素  获取的是数组  
    // var spans=document.getElementsByClassName('span');
    // console.log(spans); 
    // spans[0].onclick=function(){
    //     console.log(1);
    // } 

    // 通过name属性获取  获取的是数组
    // var inps=document.getElementsByName('user');
    // 通过value属性获取表单的值
    // console.log(inps[0].value);


    // 通过选择器获取    获取单个元素
    var p1=document.querySelector('.p1');
    console.log(p1);

    // 通过选择器获取   获取数组
    var button=document.querySelectorAll('button')[1];
    console.log(button);

    // 通过父元素获取子元素
    var father=document.querySelector('.father');
    var bigSon=father.getElementsByTagName('p')[0];
    father.onclick=function(){
        // js如何获取或者设置标签的属性  (只能获取或者设置行间属性)
        // 获取: 元素.属性名
        // 设置: 元素.属性名=属性值
        console.log(bigSon.style.backgroundColor);
        bigSon.style.backgroundColor='pink';
    }

    // ******************************小demo**************
    // 1.获取元素
    var input=document.getElementsByTagName('input')[0];
    var btn=document.getElementsByTagName('button')[2];
    var p=document.getElementsByClassName('p1')[0];
    console.log(input,btn,p);

    // 绑定点击事件
    btn.onclick=function(){
        // 点击事件执行代码
        // 将表单内容赋值给p标签
        // var  v=input.value;
        // value获取或者设置表单的内容
        // innerHTML获取或者设置其他标签的内容
        // console.log(p.innerHTML);
        p.innerHTML="您输入的用户名是:"+input.value;
    }
</script>
</html>

运行结果：

2.补充知识

（1）设置属性：元素.属性名=属性值

（2）获取属性：元素.属性名

（3）设置样式的本质和设置属性相同，设置样式就是设置style属性

（4）获取或者设置表单的内容：value

（5）获取或者设置其他标签：innerHTML

3.具体案例：变色模块

代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>变色</title>
    <style>
        div{
            width: 100px;
            height: 100px;
            /* background-color: red; */
        }
        button{
            width: 100px;
            height: 20px;
            text-align: center;
            line-height: 8px;
            margin-top: 20px;
        }
    </style>
</head>
<body>
    <div style="background-color: red;"></div>
    <button>变色</button>
</body>
<script>
    // 1.获取元素
     var div=document.getElementsByTagName('div')[0];
     var btn=document.querySelector('button');
    //  btn绑定点击事件控制div变颜色
    btn.onclick=function(){
        //判断div的初始颜色   
        if(div.style.backgroundColor=='red'){
            // 如果是红色  变成绿色
            div.style.backgroundColor='green';
        }else{
            // 如果不是红色   变成红色
            div.style.backgroundColor='red';
            
        } 
    }
</script>
</html>

运行结果：

点击变色模块变化

傻乎乎的小不点

关注

3
点赞
踩
4

收藏

觉得还不错? 一键收藏
0
评论
js获取元素的方法及具体案例

（3）通过class名获取：document.getElementsByClassName('class名')（4）通过name获取：document.getElementsByName('name') 表单。（2）通过标签名获取：document.getElementsByTagName('标签名')（3）不只是通过document对象获取元素，也可以通过父元素获取子元素。（1）通过id获取：document.getElementByid('id名')（2）获取属性：元素.属性名。（5）通过选择器获取。
复制链接

扫一扫