js中根据id获取节点,js获取id对应的组件

最新推荐文章于 2023-12-06 23:57:16 发布

阳阳2013哈哈

最新推荐文章于 2023-12-06 23:57:16 发布

阅读量328

点赞数

文章标签： python

本文链接：https://blog.csdn.net/mynote/article/details/134765656

版权

大家好，小编来为大家解答以下问题，js中根据id获取节点，js获取id对应的组件，现在让我们一起来看看吧！

API是我么程序员提供的一个接口，帮助我们实现某种功能；

Web API主要针对游览器提供的接口，主要针对游览器做交互效果；

一、获取元素

可以有以下几种方式：

根据ID获取；根据标签名获取；通过HTML5新增的方法获取；通过特殊元素获取；

根据ID：利用getElementByld()

返回一个匹配到id的DOM Ekement对象，若在当前Document下没有找到，则返回null。

利用console.dir可以返回元素对象可以更好的查看里面的属性和方法python for语句用法。

利用标签名：getElmentByTagName()

利用类名：document.getElementsByClassName('类名');//根据类名返回元素对象集合。

document.querySelector('.nav'); //根据指定的选择器返回第一个元素对象。

document.querySelectorAll('li’); //根据指定选择器返回所有元素对象。

注意：里面的选择需要加符号 .box #nav。

<!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>Document</title>
</head>
<body>
    <ul>
        <li>生僻字</li>
        <li id="nav">英文字</li>
    </ul>

    <>
        var lis=document.getElementsByTagName('li');
        console.log(lis);   
        //返回的是获取过来元素的对象的集合 以伪数组的形式存储
        console.log(lis[0]);
        
        //依次打印可以采取遍历的方式
        for(var i=0;i<lis.length;i++){
            console.log(lis[i]);
        }

        //element.getElementsByTagName()可以得到这个元素里的某些标签
        var nav=document.getElementById('nav');
        var navLis=nav.getElementsByTagName('li');
        console.log(navLis);

    </>
    
</body>
</html>

获取特殊元素：（1）获取body元素，document.body()返回Body元素对象

（2）获取html元素，document.documentElement,返回html元素对象。

二、事件基础

1、常见的鼠标事件

鼠标事件	触发条件
onclick	鼠标点击右键触发
onmouseover	鼠标经过触发
onmouseout	鼠标离开触发
onfous	获得鼠标焦点触发
onblur	失去鼠标焦点触发
onmousemove	鼠标移动触发
onmouseup	鼠标弹起触发
onmousedown	鼠标按下触发

2、事件是由三部分组成，事件源事件类型事件处理程序

事件源：事件被触发的对象谁按钮；

事件类型：如何触发，例点击，经过；

事件处理程序：通过一个函数赋值的方式完成。

3、改变元素内容：

element.innerText,从起始位置到终止位置的内容，但它去除html标签，同时空格和换行也会去掉。

element.innerHTML，起始位置到终止位置的全部内容，包括html标签，同时保留空格和换行。

html标签即为像<strong>这类的标签

<!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>Document</title>
    <style>
        div{
            width: 300px;
            height: 30px;
            line-height: 30px;
            color: #fff;
            background-color: pink;

        }
    </style>
</head>
<body>
    <button>显示当前时间</button>
    <div>某个时间</div>
    <p></p>

    <>
        var botton=document.querySelector('button');
        var div=document.querySelector('div');
        botton.onclick=function(){
            // div.innerText='2019-6-6'
            div.innerText=getDate();
        }
        function getDate(){
            var date=new Date();
            var year=date.getFullYear();
            var month=date.getMonth()+1;
            var dates=date.getDate();
            var arr=['星期日','星期一','星期二','星期三','星期四','星期五','星期六'];
            var day=date.getDay();
            return '今天是'+year+'年'+month+'月'+dates+'日'+arr[day];
        }
        var p=document.querySelector('p');
        p.innerText=getDate();
        //不用添加事件，直接写出结果。
    </>
    
</body>
</html>

第一个时间是点击了上面的按钮才显示，而第二个则是直接显示。

4、案例演示：

（一）点击对应按钮显示对应的图片

<!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>Document</title>
    <style>
        img{
            width: 500px;
            height: 500px;
        }
    </style>
</head>
<body>
    <button id="qiqi">成毅</button>
    <button id="yuanyuan">王源</button><br>
    <img src="../pic/qiqi.jpeg" alt="" title="成毅">

    <>
        //获取元素
        var qiqi=document.getElementById('qiqi');
        var yuanyuan=document.getElementById('yuanyuan');
        var img=document.querySelector('img');
        //注册事件
        qiqi.onclick=function(){
            img.src='../pic/qiqi.jpeg';
            //修改元素属性
            img.title='成毅';
        }
        yuanyuan.onclick=function(){
            img.src='../pic/yuanyuan.jpeg';
            img.title='王源';
        }
    </>
    
</body>
</html>

（二）根据时间显示对应图片

<!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>Document</title>
    <style>
        img{
            width: 500px;
            height: 500px;
        }
    </style>
</head>
<body>
    <img src="../pic/night.jpeg" alt="">
    <p>早上好</p>

    <>
        var img=document.querySelector('img');
        var p=document.querySelector('p');
        var date=new Date();
        var h=date.getHours();
        if(h<12){
            img.src='../pic/zhongwu/jpeg';
            p.innerHTML='现在是早晨';

        }
        else if(h<18){
            img.src='../pic/zhongwu/jpeg';
            p.innerHTML='现在是中午';

        }
        else {
            img.src='../pic/night.jpeg';
            p.innerHTML='现在是夜晚';

        }
    </>
    
</body>
</html>

5、表单操作

根据DOM可以操作如下表单元素属性：

type,value,check,selected,disabled

6、

btn.οnclick=function(){

input.value='被点击了';

this.disabled=true;//this指的是事件函数的调用者btn

//如果想要某个表单被禁用不能再点击可以设disabled 我们想要这个按钮button禁用

}

案例：仿京东显示隐藏密码

<!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>Document</title>
    <!-- 引入iconfont -->
    <link rel="stylesheet" href="../循环结构/fonts/iconfont.css">
    <style>
        /* 写一些基本样式 */
        
        .box {
            margin: auto;
            margin-top: 200px;
            width: 500px;
            height: 30px;
            border-bottom: 1px solid #333;
        }
        
        input {
            width: 440px;
            border: none;
            /* 不让输入框的边框出现 */
        }
        
        input:focus {
            outline: none;
            /* 点击后没有黑框框出现 */
        }
        
        #eye {
            cursor: pointer;
            /* 改变鼠标样式 */
        }
    </style>
</head>
 
<body>
    <div class="box">
        <input type="password" name="请输入密码" id="pwd">
        <i class="iconfont icon-yanjing_xianshi"></i>
        <!-- 运用了iconfont的相关知识  如果不懂点击下面链接了解 -->
    </div>
    <>
        var pwd = document.getElementById('pwd');
        var eye = document.getElementById('eye');
        var flag = 0;
        eye.onclick = function() {
            if (flag == 0) {
                pwd.type = 'text';
                eye.setAttribute('class', 'iconfont icon-kejian') //改变eye的css样式使其睁眼和闭眼
                flag = 1;
            } else {
                pwd.type = 'password';
                eye.setAttribute('class', 'iconfont icon-bukejian') //改变eye的css样式使其睁眼和闭眼
                flag = 0;
            }
        }
    </>
</body>
 
</html>

7、样式属性操作：

通过js修改元素的大小、颜色、位置、样式。

element.style 行内样式操作；

获得元素修改样式如果样式比较少或者功能简单的情况下使用

element.className 类名样式操作；

更改元素样式，适合于样式比较多或者功能复杂的情况，className会直接更改元素的类名，会覆盖原先的类名。

注意：JS里面的样式采取驼峰命名法，比如fontSize、backgroundColor;JS修改style样式操作，产生是行内样式，css权重比较高。

案例：二维码隐藏

<!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">
    <link rel="stylesheet" href="./fonts/font_9wrj6x0kdmd/iconfont.css">
    <title>Document</title>
    <style>
        .box{
            position: relative;
            width: 74px;
            height: 88px;
            border: 1px solid #ccc;
            margin: 100px auto;
            font-size: 12px;
            text-align: center;
            color: #f40;
        }

        .box img{
            width: 60px;
            margin-top: 5px;
        }

        .con-chacha{
            position: absolute;
            top: -1px;
            right: -16px;
            width: 14px;
            height: 14px;
            color: #333;
            border: 1px solid #ccc;
            line-height: 14px;
            font-family: Arial, Helvetica, sans-serif;
            cursor: pointer;
        }
    </style>
    
</head>

<body>
    <div class="box">
        淘宝二维码
        <img src="../pic/cd222eb7c22b1007424a8aa7fce00ef2.gif" alt="">
        <i class="iconfont con-chacha">×</i>
        <!-- <div class="con-chacha">×</div> -->
    </div>

    <>
        var btn=document.querySelector('.con-chacha');
        var box=document.querySelector('.box');
        btn.onclick=function(){
            box.style.display='none';
        }
    </>
</body>
</html>

有规律精灵图案例

核心思路：用for循环，修改精灵图的背景图片background-position

让循环里的i索引号乘以每个精灵图的高度（每个高度需要相同）

<!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">
    <link rel="stylesheet" href="./fonts/font_9wrj6x0kdmd/iconfont.css">
    <title>Document</title>
    <style>
    
    </style>
    
</head>

<body>
    <ul>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
    </ul>

    <>
        var lis=document.querySelectorAll('li');
        for(var i=0;i<lis.length;i++){
            var index=i*44;
            lis[i].style.backgroundPosition='0-'+index+'px';
        }
    </>
</body>
</html>

表单案例

题目要求：

首先需要获得2个新事件，获得焦点onfocus 失去焦点onblur;

如果获得焦点，判断表单里面内容是否为默认文字，如果是默认文字就清空表单内容；

如果失去焦点，判断表单内容是否为空，如果为空，则表单内容改为默认文字

<body>

<input type="text" value="手机">

<>

var text=document.querySelector('input');

text.οnfοcus=function(){ onfocus获得焦点

if(this.value=='手机'){

this.value='';

}

this.style.color='#333';

}

text.οnblur=function(){ onblur失去焦点

if(this.value==''){

this.value='手机';

}

this.style.color='#999';

}

</>

</body>

案例：表单输入密码的正确格式

<!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">
    <link rel="stylesheet" href="./fonts/font_9wrj6x0kdmd/iconfont.css">
    <link rel="stylesheet" href="./fonts/font-rigth/iconfont.css">
    <title>Document</title>
    <style>
        div{
            
            display: flex;
        }

        input{
            width: 200px;
            height: 22px;
            margin-top: 15px;
        }
        .message{
            display: inline-block;
            font-size: 18px;
            color: #999;
            /* background: url(../pic/right.jpeg) no-repeat left center; */
            padding-left: 20px;
        }
        .wrong{
            font-size: 18px;
            color: #999;
        }
        .icon-cuowu{
            color: red;
            font-size: 18px;
        }

        
        
    </style>
     
</head>

<body>
    <div class="register">
        <input type="text" class="ipt">
        <p class="message"><i class="iconfont">请你输入6-16个整数</i></p>
    </div>
    <>
        //首先判断事件是表单失去焦点 onblur
        //如果输入正确则显示正确的信息，正确的小图标
        //如果输入不足6-16位，则提示错误，错误的小图标
        //里面变化样式较多，采取className修改样式；

        var ipt=document.querySelector('.ipt');
        var message=document.querySelector('.message');
        ipt.onblur=function(){
            if(this.value.length<6||this.value.length>16){
                message.className='message wrong';
                message.innerHTML='输入的数字个数不符合要求';
                iconfont.className='icon-cuowu';
            }
            else{
                message.className='message right';
                message.innerHTML='您输入的格式正确';
                iconfont.className='icon-zhengque';
            }
        }
    </>
</body>
</html>

（代码有点小问题，小图标显示不出来，以后慢慢解决）

8、获取元素：

var imges=document.querySelector('.baidu').querySelectorAll('imges')8\

循环注册事件：

for（var i=0;i<imges.length;i++）{
imges[i].οnclick=function(){

document.body.style.backgroundImage='url('+this.src+')';

}

9、排他思想

如果有一组元素，想要某一个元素实现某种样式，需要用到循环的排他思想

①所有元素全部清楚样式（干掉其他人）

②给当前元素设置样式

③注意顺序不能颠倒，首先干掉其他人，再设置自己。

案例：选中列表变色

案例分析：用到鼠标经过onmouseover,鼠标离开onmouseout;

核心思路：鼠标经过tr行，当前的行变背景颜色，鼠标离开去掉当前的颜色背景颜色；

第一行（thead里面的行）不需要变换颜色，因此我们获取的tbody里面的行。

<!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">
    <link rel="stylesheet" href="./fonts/font_9wrj6x0kdmd/iconfont.css">
    <link rel="stylesheet" href="./fonts/font-rigth/iconfont.css">
    <title>Document</title>
    <style>
        table {
            margin: 100px auto;
            box-sizing: border-box;
        }
        thead {
            width: 600x;
            border: 1px solid #333;
            text-align: center;
        }
        thead tr{
            height: 30px;
            background-color: skyblue;
            border: 1px solid #333;
        }
        tbody tr{
            height: 30px;
        }
        tbody td{
            border-bottom: 1px solid #d7d7d7;
            font-size: 12px;
            color: blue;
    
        }
        .bg{
            background-color:pink;
        }
    </style>
     
</head>

<body>
    <table>
        <thead>
            <tr>
                <td>1</td>
                <td>1</td>
                <td>1</td>
                <td>1</td>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>003526</td>
                <td>农行金穗三个月定期开放债券</td>
                <td>1.075</td>
                <td>1.074</td>
            </tr>
            <tr>
                <td>003526</td>
                <td>农行金穗三个月定期开放债券</td>
                <td>1.075</td>
                <td>1.074</td>
            </tr>
            <tr>
                <td>003526</td>
                <td>农行金穗三个月定期开放债券</td>
                <td>1.075</td>
                <td>1.074</td>
            </tr>
        </tbody>
    </table>

    <>
        var trs=document.querySelector('tbody').querySelectorAll('tr');
        for(var i=0;i<trs.length;i++){
            trs[i].onmouseover=function(){
                this.className='bg';
            }
            trs[i].onmouseout=function(){
                this.className='';
            }
        }
    </>
    
</body>
</html>

案例：全选关联

<!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">
    <link rel="stylesheet" href="./fonts/font_9wrj6x0kdmd/iconfont.css">
    <link rel="stylesheet" href="./fonts/font-rigth/iconfont.css">
    <title>Document</title>
    <style>
        table{
            margin: 100px auto;
            border: 1px solid #333;
            width: 260px;
        }
        thead {
            background-color: skyblue;
            color: #fff;
            height: 45px;
        }
        tbody{
            height: 35px;
        }
        tbody td{
            border: 1px solid #333;
            text-align: center;
        }
    </style>
     
</head>

<body>
    <div class="wrap">
        <table>
            <thead>
                <tr>
                    <th>
                        <input type="checkbox" id="j_cbAll">
                    </th>
                    <th>商品</th>
                    <th>价钱</th>
                </tr>
            </thead>
            <tbody id="j_tbs">
                <tr>
                    <td>
                        <input type="checkbox">
                    </td>
                    <td>iphone8</td>
                    <td>8000</td>
                </tr>
                <tr>
                    <td>
                        <input type="checkbox">
                    </td>
                    <td>ipad pro</td>
                    <td>5000</td>
                </tr>
                <tr>
                    <td>
                        <input type="checkbox">
                    </td>
                    <td>ipad Air</td>
                    <td>2000</td>
                </tr>
                <tr>
                    <td>
                        <input type="checkbox">
                    </td>
                    <td>apple watch</td>
                    <td>2000</td>
                </tr>
            </tbody>
        </table>
    </div>

    <>
        //1.全选做法：让下面的所有选框的checked属性跟随
        var j_cbAll=document.getElementById('j_cbAll');
        var j_tbs=document.getElementById('j_tbs').getElementsByClassName('input');
        j_cbAll.onclick=function(){
            console.log(this.checked);
            for(var i=0;i<j_tbs.length;i++){
                
                j_tbs[i].checked=this.checked;
            }
        }

        for(var i=0;i<j_tbs.length;i++){
            j_tbs[i].onclick=function(){
                var flag=true;
                for(var i=0;i<j_tbs.length;i++){
                    if(!j_tbs[i].checked){
                        flag=flase;
                    }
                }
                j_cbAll.checked=flag;
            }
            
        }
    </>
    
</body>
</html>

（以上代码错误不知道怎么改）

10、自定义属性操作

获取属性：

element.属性获取属性值;获取内置属性值

element.getAttribute('属性’);主要获得自定义的属性值，我们程序员自定义的属性值。

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

console.log(div.getAttribute('index'));

设置元素属性值：

（1）element.属性=‘值’ 例：div.id='test'; div.className='navs';

(2)element.setAttribute('属性’，‘值’);主要针对自定义属性

div.setAttribute('index','2');

div.steAttribute('class','footer'); 注意这里写的是class而不是className.

移除属性：removeAttribute(属性）

div.removeAttribute('index');

tab栏切换案例：

思路分析：（1）点击会改变背景颜色，排他思想，加上变颜色类名

（2）下面显示模块和上面的相对应，核心思路：给上面的小li添加自定义属性index，属性从0开始编号；（不是直接添加而是使用setAttribute(）添加）

（3）当我们点击tab_con里面对应序号的内容显示，其余隐藏（排他思想）

<!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">
    <link rel="stylesheet" href="./fonts/font_9wrj6x0kdmd/iconfont.css">
    <link rel="stylesheet" href="./fonts/font-rigth/iconfont.css">
    <title>div</title>
    <style>
        li{
            list-style: none;
        }
        .tab {
            width: 600px;
            margin: 100px auto;
        }
        .tab_list{
            width: 1000px;
        }
        .tab_list ul {
            display: flex;
        }
        .tab_list li{
            /* float: left; */
            height: 39px;
            line-height: 39px;
            padding: 0 20px;
            text-align: center;
            cursor: pointer;
            background-color: gray;
        }
        .tab_list .current{
            background-color: #c81623;
            color: #fff;
        }

        .item_info{
            padding: 20px 0 0 20px;
        }
        .item {
            display: none;
        }
    </style>
     
</head>

<body>
    <div class="tab">
        <div class="tab_list">
            <ul>
                <li class="current" >商品介绍</li>
                <li >规格与包装</li>
                <li >售后与保障</li>
                <li >商品评价</li>
                <li >手机社区</li>
            </ul>
        </div>
        <div class="tab_con">
            <div class="item" style="display:block;" >
                商品介绍模块内容
            </div>
            <div class="item" >
                规格介绍模块内容
            </div>
            <div class="item" >
                售后介绍模块内容
            </div>
            <div class="item">
                评价介绍模块内容
            </div>
            <div class="item">
                手机介绍模块内容
            </div>
        </div>
    </div>

    <>
        //排他思想，点击一个背景颜色改变其他的恢复。
        var tab_list=document.querySelector('.tab_list');
        var lis=tab_list.querySelectorAll('li');
        var items=document .querySelectorAll('.item');
        for(var i=0;i<lis.length;i++){
            lis[i].setAttribute('index',i);
            lis[i].onclick=function(){
                //清楚其他所有li的样式
                for(var i=0;i<lis.length;i++){
                    lis[i].className='';
                }
                //留下自己的样式
                this.className='current';
                var index=this.getAttribute('index');
                console.log(index);
                for(var i=0;i<items.length;i++){
                    items[i].style.display='none';
                }
                items[index].style.display='block';
            }
        }

    </>
    
</body>
</html>

阳阳2013哈哈

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
js中根据id获取节点,js获取id对应的组件

element.属性获取属性值;获取内置属性值element.getAttribute('属性’);主要获得自定义的属性值，我们程序员自定义的属性值。（1）element.属性=‘值’ 例：div.id='test';(2)element.setAttribute('属性’，‘值’);主要针对自定义属性'class','footer');注意这里写的是class而不是className.
复制链接

扫一扫