当前位置：首页 > wzjs >正文

广州宝安建网站精准营销推广

wzjs 2025/8/27 9:52:43

广州宝安建网站,精准营销推广,设计建筑的软件,html个人网站制作使用ID获取元素 id选择器getElementById 用于精确查找，如是没有找到则返回null 对于id选择器，若页面中存在多个id相同，则css样式对所有的该id名的元素都生效，但是js脚本只对第一个名为id的元素生效。获取和设置元素内容 inne…

使用ID获取元素

id选择器getElementById

用于精确查找，如是没有找到则返回null

对于id选择器，若页面中存在多个id相同，则css样式对所有的该id名的元素都生效，但是js脚本只对第一个名为id的元素生效。

获取和设置元素内容

innerText方法
返回标签内的文本值，不包含代码
innerHTML方法
返回是html标签中的内容，可能包含代码

  <div id="zxw"><p>这是内容</p></div><script>var a = document.getElementById("zxw");var b = a.innerText;var c = a.innerHTML;console.log(b)console.log(c)</script>

在这里插入图片描述

获取和设置元素属性

先获取，然后可以直接设置

   <input type="button" id="zxw" value="按钮"> </input><script>var a = document.getElementById("zxw");console.log(a.value)console.log(a.type)a.value = "Button";       //修改a.title = "添加后的title";  //设置console.log(a.title)</script>

在这里插入图片描述

获取和设置元素属性的通用方法

getAttribute(“属性名”)
setAttribute(“属性名”,“属性值”)

    <input type="button" id="zxw" value="按钮"> </input><script>var a = document.getElementById("zxw");var b = a.getAttribute("value"); //获取a元素value值a.setAttribute("id","zwxxgd")  //设置a元素的id值为zwxxgdconsole.log(b)console.log(a.id)</script>

在这里插入图片描述

获取或设置行内样式

获取行内样式：document.getElementById(“zxw”).style.cssText
根据id获取元素后设置行内样式：a.style.cssText =“color:red”

   <div id="zxw" style="color: antiquewhite; font-size: 24px;">这是一个div元素</div><script>var a = document.getElementById("zxw")a.style.cssText ="color:red";  //设置a的行内样式console.log(a.style.cssText)var b = document.getElementById("zxw").style.cssText; //获取行内样式b = "font-size:12px"    //b本身就为行内样式了，因此可以直接改console.log(b)</script>

在这里插入图片描述

获取行内样式中的属性

获取行内样式中的某个样式：

元素.style.某个样式
console.log(a.style.color)

设置：

注意：若要属性名中有-，要使用驼峰命名法
a.style.backgroundColor = “blue”

添加和删除类名

已有相同的类名时不添加

  var a = document.getElementById("zxw")a.classList.add("zxw1","zxw2","zxw3")  //添加类名

删除的类名不存在时也不会报错

  a.classList.remove("zxw2")  //删除类名

切换类名：若有相同的类名时执行删除，没有时执行添加

  a.classList.toggle("abcd")  //切换类名

强制删除or添加类名

	a.classList.toggle("zxw1",true) //强制添加（true），删除（false）

使用类名获取元素

（类选择器）

getElementsByClassName(“zxw”)
返回所有的指定元素，而不是一个元素
可以当成数组处理

 var a = document.getElementsByClassName("zxw")a[0].style.color = "red"  //选取的数组内容必须写，代表给第几个元素的设置

 //   给获取到的全部元素都设置for(var i=0;i<a.length;i++){a[i].style.backgroundColor = "gray"}console.log(a)

在这里插入图片描述

使用标签以及name属性获取元素

标签名选择器

getElementsByTagName（“p”）
选取所有指定标签名的一组元素，而不是一个元素

使用组合方式获取元素

只有两种写法是对的

var a = document.getElementById("zxw").getElementsByTagName("p");
console.log(a);var b = document.getElementById("zxw").getElementsByClassName("zxw2");
console.log(b)

在这里插入图片描述

使用CSS选择器获取元素

返回文档中匹配指定CSS选择器的所有元素
语法：querySelectorAll（“css选择器”）
返回文档中匹配指定CSS选择的第一个元素
语法：querySelector（“css选择器”）

<div id="zxw" style="color: antiquewhite; font-size: 24px;">这是一个div元素<p class="zxw2">第二个div元素</p>
</div><script>var a = document.querySelectorAll("#zxw,.zxw2");console.log(a);var b = document.querySelector("#zxw p")console.log(b)
</script>