无纸化教育传媒 伴随着您成长 伴随着您进步
Javascript 选取查找元素和修改元素属性 |
类别属性：程序Web开发 > Javascript/Html | 发布时间：2020/7/12 0:01:22 | 视频长度：00:09:13
Javascript 选取查找元素和修改元素属性
本示例视频介绍详细的getElementById() 、getElementsByClassName()、getElementsByName()、getElementsByTagName()、querySelector()和querySelectorAll()的元素选取查找和修改元素属性的用法。
getElementById()示例：
document.getElementById("View").style.color = "blue";
document.getElementById("View").style.border="1px solid red";
选取Id为“View”的元素，然后设置style样式属性，
getElementsByClassName()示例：
document.getElementsByClassName("caption")[0].innerHTML = "元素获取的五种方法";
document.getElementsByClassName("caption")[0].style.color = "red";
选取class名为“caption”的元素，getElementsByClassName()方法返回的是一个元素集合，在一个页面中有可能有多个元素同时都使用同一个class名，所以这里就需要指定索引值，格式就是“document.getElementsByClassName("class名")[数字索引值]”，索引也是从0开始。
getElementsByName()示例：
document.getElementsByName("Data")[0].value = "Html";
一般控件或form表单，有name属性，getElementsByName()方法就是用来选取name名，该方法也是返回索引集合，需要指定索引值。
getElementsByTagName()示例
alert("div的数量：" + document.getElementsByTagName("div").length);//弹出div数量。
document.getElementsByTagName("div")[0].innerHTML = "〈h1〉" + document.getElementsByTagName("div")[0].innerHTML + "〈/h1〉";
选取元素标签名，这个方法也是返回页面所有指定元素标签名的集合，getElementsByTagName("任意元素名")；
querySelector()和querySelectorAll()示例：
document.querySelector("li").style.color = "orange";
document.querySelectorAll("li")[1].style.color = "red";
document.querySelectorAll("input[type=text]")[0].style.color = "green";
document.querySelector("#View").style.color = "#aaa";
document.querySelector(".caption").style.border = "1px solid #888";
document.querySelector(".caption").style.margin = "3px";
querySelector()和querySelectorAll()的使用规则大部分相同，区别在于querySelector()只能指定到页面第一个元素，而querySelectorAll()是返回页面所有所选的元素集合，它们都可以根据Id、class 、type类型，以及标签类型选取元素。
