直接获取节点

今天药忘吃喽~ 2023-09-27 13:46 21阅读 0赞

直接获取节点的几种方式

<!DOCTYPE html>
    <html>
            <head>
                    <meta charset="UTF-8">
                    <title></title>
                    <script>
                            function fun1(){
                                    // 获得document对象
                                    var element1 =document.getElementById("d1");
                                    console.log(element1);
                                    
                                    element1.innerText="这是我的div";
                            }
                            function fun2(className){
                                    var elements =document.getElementsByClassName(className);
                                    console.log(elements)
                                    for(var i =0;i<elements.length;i++){
                                            console.log(elements[i])
                                    }
                            }
                            function fun3(){
                                    var elements =document.getElementsByTagName("input");
                                    console.log(elements);
                                    for(var i =0;i<elements.length;i++){
                                            console.log(elements[i])
                                    }
                            }
                            function fun4(){
                                    var elements=document.getElementsByName("hobby");
                                    console.log(elements);
                                    for(var i =0;i<elements.length;i++){
                                            console.log(elements[i])
                                    }
                            }
                    </script>
            </head>
            <body>
                    <div id='d1' class="a">这是第一个div</div>
                    <div id='d2' class="a">这是第二个div</div>
                    <div id='d3' class="a">这是第三个div</div>
                    <input id='i1' class="a" name='name1'/>
                    <div id='d4' class="b" name='name1'>这是第四个div</div>
                    <div id='d5' class="b">这是第五个div</div>
                    爱好:
                    <input type="checkbox" name="hobby"  value="1" />篮球
                    <input type="checkbox" name="hobby"  value="2" />足球
                    <input type="checkbox" name="hobby"  value="3" />羽毛球
            
                    <hr />
                    <input type="button" value="id值获取" onclick='fun1()' />
                    <input type="button" value="class属性值获取" onclick='fun2("b")' />
                    <input type="button" value="标签名获取" onclick='fun3()' />
                    <input type="button" value="name属性值获取" onclick='fun4()' />
            </body>
    </html>

![91ad6acbb62f05988e6577de65a614bf.gif][]

![f034a2c01682feb3352cb39758e9998d.gif][]

操作节点属性

<!DOCTYPE html>
    <html>
            <head>
                    <meta charset="UTF-8">
                    <title></title>
                    <script>
                            function fun1(){
                                    //获得属性值
                                    var node =document.getElementById("in1");
                                    
                                    // 语法1     获得  节点.属性名    修改  节点.属性名 =属性值
                                    console.log(node.type);
                                    console.log(node.value);
                                    //改变属性值
                                    node.type="button";
                                    node.value="你好我也好";
                                    
                                    
                                    // 语法2  getAttribute   setAttribute
                                    console.log(node.getAttribute("type"));
                                    console.log(node.getAttribute("value"));
                            
                                    node.setAttribute("type","button");
                                    node.setAttribute("value","大家好");
                            }
                            
                            
                    </script>
            </head>
            <body>
                    <input type="text" value="你好呀" id="in1" /> 
                    <hr />
                    <input type="button" value="变" onclick="fun1()"  />
                    
            </body>
    </html>

![a1ce2cc8fec6c5bf567de5f3050ceaa5.gif][]

![6ced1961db7ad947624b8c1989e6fda3.gif][]

操作节点样式

通过style.css样式名和通过设置class属性两种方式实现

<!DOCTYPE html>
    <html>
            <head>
                    <meta charset="UTF-8">
                    <title></title>
                    <style>
                            #div1{
                                    width: 100px;
                                    height: 100px;
                                    border: 1px solid red;
                                    
                            }
                            .a{
                                    background-color: lightblue;
                                    color: blue;
                                    font-size: 40px;
                            }
                    </style>
                    <script>
                            function fun1(){
                                    // 节点.style.样式名=样式值
                                    var element =document.getElementById("div1");
                                    element.style.width="200px";
                                    element.style.height="200px";
                                    element.style.border="10px solid green";
                                    // css样式在更多的时候是以class选择器的形式作用到元素上
                                    // 可以通过修改class属性,影响div的样式
                                    element.setAttribute("class","a")
                            }
                    </script>
            </head>
            <body>
                    <div id="div1" >
                            你好呀
                    </div>
                    <hr/>
                    <input type="button" value="测试" onclick="fun1()" />
            </body>
    </html>

![bfb50dbd9f57e6e17ddb5d0f270ec5f7.gif][]

![a58c60450edb0bcbf2a0519080c231ca.gif][]

[91ad6acbb62f05988e6577de65a614bf.gif]: https://img-blog.csdnimg.cn/img_convert/91ad6acbb62f05988e6577de65a614bf.gif
[f034a2c01682feb3352cb39758e9998d.gif]: https://img-blog.csdnimg.cn/img_convert/f034a2c01682feb3352cb39758e9998d.gif
[a1ce2cc8fec6c5bf567de5f3050ceaa5.gif]: https://img-blog.csdnimg.cn/img_convert/a1ce2cc8fec6c5bf567de5f3050ceaa5.gif
[6ced1961db7ad947624b8c1989e6fda3.gif]: https://img-blog.csdnimg.cn/img_convert/6ced1961db7ad947624b8c1989e6fda3.gif
[bfb50dbd9f57e6e17ddb5d0f270ec5f7.gif]: https://img-blog.csdnimg.cn/img_convert/bfb50dbd9f57e6e17ddb5d0f270ec5f7.gif
[a58c60450edb0bcbf2a0519080c231ca.gif]: https://img-blog.csdnimg.cn/img_convert/a58c60450edb0bcbf2a0519080c231ca.gif