直接获取节点

最新推荐文章于 2024-10-31 15:56:11 发布

BookerABC

最新推荐文章于 2024-10-31 15:56:11 发布

阅读量73

点赞数

分类专栏： javaScript 文章标签： javascript Powered by 金山文档

本文链接：https://blog.csdn.net/booker009/article/details/128543478

版权

javaScript 专栏收录该内容

31 篇文章 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>

操作节点属性

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

操作节点样式

通过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>