语法:
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>注意: 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>