首先建立一个表格（用于下面节点的查找），如下

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();

原文链接：https://blog.csdn.net/Shao_lei/article/details/117388335