一、获取HTML标签的属性值
在JavaScript中,获取HTML标签的属性值可以通过以下方法:
// HTML代码 <div id="myDiv" class="box" style="display: none"></div> // JavaScript代码 var myDiv = document.getElementById("myDiv"); console.log(myDiv.getAttribute("id")); // 输出:myDiv console.log(myDiv.getAttribute("class")); // 输出:box console.log(myDiv.getAttribute("style")); // 输出:display: none
上述代码中,我们首先使用document.getElementById()方法获取到了HTML标签<div>,然后通过getAttribute()方法来获取标签的属性值。其中getAttribute()方法的参数为属性名,返回值为属性值。
另外,如果我们要获取标签的class属性值,还可以使用以下方法:
// HTML代码 <div id="myDiv" class="box" style="display: none"></div> // JavaScript代码 var myDiv = document.getElementById("myDiv"); console.log(myDiv.classList); // 输出:["box"]
上述代码中,我们使用了classList属性来获取标签的class属性值,返回值为一个数组,包含了标签的所有class值。
二、动态修改HTML标签的属性值
在JavaScript中,我们可以通过setAttribute()方法来动态修改HTML标签的属性值。例如:
// HTML代码 <div id="myDiv" class="box" style="display: none"></div> // JavaScript代码 var myDiv = document.getElementById("myDiv"); myDiv.setAttribute("class", "container"); console.log(myDiv.getAttribute("class")); // 输出:container
上述代码中,我们首先获取了HTML标签<div>,然后使用setAttribute()方法来修改class属性的值为"container"。最后再使用getAttribute()方法来获取修改后的值,输出结果为"container"。
三、获取表单元素的值
在JavaScript中,获取表单元素的值可以通过以下方法:
// HTML代码 <form> <input type="text" id="username" value="John"> <input type="password" id="password" value="123456"> <select id="gender"> <option value="male">Male</option> <option value="female" selected>Female</option> </select> </form> // JavaScript代码 var username = document.getElementById("username").value; var password = document.getElementById("password").value; var gender = document.getElementById("gender").value; console.log(username); // 输出:John console.log(password); // 输出:123456 console.log(gender); // 输出:female
上述代码中,我们通过document.getElementById()方法获取到了表单元素,然后通过value属性来获取元素的值。值得注意的是,对于<select>元素,我们需要获取选中的<option>元素的value值来获取整个表单元素的值。
四、获取链接元素的href属性
在JavaScript中,获取链接元素的href属性可以通过以下方法:
// HTML代码 <a href="https://www.baidu.com">百度一下,你就知道</a> // JavaScript代码 var link = document.getElementsByTagName("a")[0]; console.log(link.href); // 输出:https://www.baidu.com
上述代码中,我们首先使用getElementsByTagName()方法获取页面中所有的<a>元素,然后通过数组下标获取其中的一个元素,最后使用href属性来获取链接的地址。
五、获取图片元素的src属性
在JavaScript中,获取图片元素的src属性可以通过以下方法:
// HTML代码 <img src="https://www.baidu.com/img/bd_logo1.png" alt="百度logo"> // JavaScript代码 var img = document.getElementsByTagName("img")[0]; console.log(img.src); // 输出:https://www.baidu.com/img/bd_logo1.png
上述代码中,我们使用了getElementsByTagName()方法获取页面中所有的<img>元素,然后通过数组下标获取其中的一个元素,最后使用src属性来获取图片的地址。