获取元素和操作元素

最新推荐文章于 2022-07-17 20:55:35 发布

n7%

最新推荐文章于 2022-07-17 20:55:35 发布

阅读量363

点赞数 1

文章标签： js

本文链接：https://blog.csdn.net/Love_Roro/article/details/108921745

版权

获取元素

获取id元素

语法：

document.getElementById()

例子：

<body>
    <p id="p1">你好</p>
    <script>
        var a1=document.getElementById('a1')
        console.log(p1);
    </script>
</body>

或者

<body>
    <p id="p2">你好</p>
    <script>
        console.log(document.getElementById('p2'));
    </script>
</body>

注意：如果有相同id的元素，只能获取靠前的那个元素

使用js可以设置元素的css样式，但是要遵循两个原则

元素.style.css属性的方式设置
属性拼写与css属性并不完全一致
–如果属性是一个单词，如color.width.height等，可以原样书写
-如果属性是由-连接的多个单词组成，如background-color，则应该将第一个单词的首字母小写，其他单词的首字母大写，并去除连接符(-)

根据元素标签名称获取元素

根据id只能获取一个元素，如果向同时获取多个元素，可以根据标签获取

getElementsByTagName方法的返回值是一个数组类型（伪数组），即使只获取了一个元素，也会以致组的形式返回
getElementsByTagName方法返回的是数组，不能直接为其设置css属性，只能为一个元素通过.style的方式设置css属性，所以必须使用循环，遍历每一个元素，为其设置css属性

根据类名获取元素

语法：

<body>
    <p id="aa" class="a1">你好</p>
    <h3 class="a1">我很好</h3>
    <script>
        var AB=document.getElementsByClassName('a1')
        console.log(AB);
        for (var i=0;i<AB.length;i++){
            AB[i].style.color='blue'
        }
    </script>

在这里插入图片描述

h5新增方法

queryselecotr

<body>
    <p>我很好</p>
    <p id="aa">你好</p>
    <p class="aa">你也很好</p>
    <script>
        document.querySelector('#aa').style.color='green'
        document.querySelector('p').style.color='red'
        document.querySelector('.aa').style.color='blue'
    </script>
</body>

在这里插入图片描述

注意：
queryselecotr 方法只能获取一个元素，当存在多个同名元素时，只会获取第一个

queryselecotrAll 方法可以获取多个元素

<body>
    <p>我很好</p>
    <p id="aa">你好</p>
    <p class="aa">你也很好</p>
    <script>
        document.querySelector('#aa').style.color='green'
        document.querySelector('p').style.color='red'
        document.querySelector('.aa').style.color='blue'
        var ABC=document.querySelectorAll('p')
        console.log(ABC);
    </script>
</body>

在这里插入图片描述

操作元素

改变元素内容

开始标记和结束标记之间就是元素内容

获取内容

<body>
    <p><span>111</span></p>
    <script>
        var p=document.querySelector('p')
        console.log(p.innerHTML);
        // 设置内容
        // p.innerHTML='张三'
        console.log(p.innerText);
    </script>
</body>

在这里插入图片描述

<body>
    <p><span>111</span></p>
    <script>
        var p=document.querySelector('p')
        console.log(p.innerHTML);

        p.innerHTML='张三'
        console.log(p.innerText);
    </script>
</body>

在这里插入图片描述
另外一种情况

<body>
    <p><span>111</span></p>
    <script>
        var p=document.querySelector('p')
        console.log(p.innerHTML);
 
        console.log(p.innerText);
        
        p.innerHTML='<p>张三</p>'
        
    </script>

在这里插入图片描述

<body>
    <p><span>111</span></p>
    <script>
        var p=document.querySelector('p')
        console.log(p.innerHTML);
 
        console.log(p.innerText);
        
        // p.innerHTML='<p>张三</p>'
        p.innerText='<p>张三</p>'
    </script>
</body>

在这里插入图片描述