首页 > 产品 > 视频播放

视频演示:Javascript 选取查找元素和修改元素属性/JavaScript 网页编程

您可以先体验部分视频,然后再购买.
00:00/00:00
JavaScript 网页编程 > Javascript 网页操作与控制

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类型,以及标签类型选取元素。

Javascript 选取查找元素和修改元素属性 - 问和答
用户提问:
您访问过的视频
您已经下载的视频
遺昕 | Weisim3.com 下载许可条款 ( 您必须接受同意才可免费下载 ) .