首先建立一个表格(用于下面节点的查找),如下
HTML部分:
<!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>
<script src="./new.js"></script>
</head>
<body>
<div id="table" style="width: 500px;margin: 0 auto;text-align: center;">
<h1>人员信息表</h1>
<table border="1px" style="margin: 0 auto;padding: 2px;">
<tr>
<td >姓名</td>
<td>年龄</td>
<td>职业</td>
<td>手机号</td>
<td>邮箱</td>
</tr>
<tr id="row_1">
<td name="name">李四</td>
<td id="age">21</td>
<td class="major">拖拉机驾驶员</td>
<td>13838383838</td>
<td>23123123@qq.com</td>
</tr>
<tr id="row_2">
<td name="name">张三</td>
<td id="age">18</td>
<td class="major">java开发工程师</td>
<td>15284723932</td>
<td>2217003908@qq.com</td>
</tr>
<tr id="row_3">
<td name="name">小明</td>
<td id="age">18</td>
<td class="major">厕所清洁员</td>
<td>15137680802</td>
<td>676862176@qq.com</td>
</tr>
</table>
</div>
<div style="width: 200px;height: 100px;border: 1px solid black;margin: 0 auto;position: relative;top: 35px;text-align: center;">
<button onclick="showHTML();">innerHTML</button>
<button onclick="showtext();">innerText</button>
</div>
<div style="width: 500px;height: 300px;border: 1px solid black;margin: 0 auto;position: relative;top: 70px;text-align: center;">
<img src="">
<button onclick="showimg();">显示图片</button>
<button onclick="changeimg();">调整图片</button>
</div>
</body>
</html>
表格展示效果如下
人员信息表
姓名 | 年龄 | 职业 | 手机号 | 邮箱 |
李四 | 21 | 拖拉机驾驶员 | 13838383838 | 23123123@qq.com |
张三 | 18 | java开发工程师 | 15284723932 | 2217003908@qq.com |
小明 | 18 | 厕所清洁员 | 15137680802 | 676862176@qq.com |
然后是javascript部分的代码
JavaScript
//查找节点
window.onload=function(){
//document.getElementById()方法查找节点
var names=document.getElementById("name");
console.log(names);
//document.getElementsByName()方法查找节点
var ages=document.getElementsByName("age");
console.log(ages[0]);
console.log(ages[1]);
//document.geElementByClassName()方法查找节点
var mjs = document.getElementsByClassName("major");
for(let i=0;i<mjs.length;i++){
console.log(mjs[i].innerHTMl);
}
//document.querySelector()方法查找节点
var row1=document.querySelector("#row_1");
console.log(row1);
var rds=document.querySelector(".major");
//document.querySelectorAll();方法查找节点
var tds1=document.querySelectorAll(".major");
for(let i=0;i<tds1.length;i++){
console.log("个数:"+tds1.length);
}
总结一下:
查找节点的方法有以下五种:
1.用指定的id/class属性----------对应的方法:
document.getElementById()
document.getElementsByClassName();
2.用指定的name属性----------对应的方法:
document.getElementsByClassName();
3.用指定的标签名字----------对应的方法:
document.getElementsByTagName();
4.用指定的css类----------对应的方法:
document.querySelector();
5.匹配指定的css选择器----------对应的方法:
document.querySelectorAll();