前言
介绍几种获取网页对象的方法,包括:通过Class、通过id、通过name、通过Selector。
源码实现
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div>这是原始div文本内容</div>
<p class="text">这是原始p标签文本内容</p>
<form name="login"></form>
<div id="root">这是id为root的div</div>
<div class="nav">这是类名为nav的第一个div</div>
<div class="nav">这是类名为nav的第二个div</div>
<script>
var div1 = document.getElementsByTagName("div")[0]
div1.innerHTML = "改变div文本内容"
var text = document.getElementsByClassName("text")[0];
text.innerHTML = "改变p标签文本内容"
var name = document.getElementsByName("login")[0]
console.log(name);
var root = document.getElementById("root");
root.innerHTML = "改变id为root的div内容"
var nav = document.querySelector(".nav");
console.log(nav);
var navs = document.querySelectorAll(".nav")[1];
console.log(navs);
</script>
</body>
</html>
网页上实现效果: