获取元素和操作元素

    科技2022-07-16  131

    获取元素

    获取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>

    Processed: 0.010, SQL: 8