2021-05-29 DOM操作HTMl（访问、查找节点的方法）

最新推荐文章于 2024-08-16 19:02:09 发布
最新推荐文章于 2024-08-16 19:02:09 发布
阅读量192 收藏
点赞数 1
文章标签： javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Shao_lei/article/details/117388335
版权

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

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拖拉机驾驶员1383838383823123123@qq.com
张三18java开发工程师152847239322217003908@qq.com
小明18厕所清洁员15137680802676862176@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();
Shao_lei
关注
  • 1
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
document对象+获取节点三种方法演示：
xdd_lmd的博客
07-30 6375
document对象的演示。 该对象将标记型文档进行封装。 该对象的作用，是可以对标记型文档进行操作。 最常见的操作就是，想要实现动态效果，需要对节点操作，那么要先获取到这个节点。 要想获取节点，必须要先获取到节点所属的文档对象document。 所以document对象最常见的操作就是获取页面中的节点。 获取节点的方法体现： 1，getElementById:通过标签的id属性值获取
HTML DOM 节点
冷月醉雪的博客
05-15 1312
   在HTML DOM中，所有事物都是节点。DOM是被视为节点树的HTML。 DOM 节点    根据 W3C 的 HTML DOM 标准，HTML 文档中的所有内容都是节点：   ·整个文档是一个文档节点   ·每个 HTML 元素是元素节点   ·HTML 元素内的文本是文本节点   ·每个 HTML 属性是属性节点   ·注释是注释节点 HTML DOM 节点树    H...
数据结构--知识点16--搜索算法(二叉树)
ANingL的博客
09-06 3008
文章目录一、树的概念1、特点2、树的术语3、树的种类4、树的存储与表示5、常见的树的应用场景二、二叉树1、概念2、性质 一、树的概念 树是一种抽象数据类型(ADT)或是视作这种抽象数据类型的数据结构 1、特点 每个节点有零个或多个子节点 没有父节点的节点称为根节点 每一个非根节点有且只有一个父节点 除了根节点外，每个子节点可以分为**多个不相交(因为都只有一个父节点)**的子树 2、树的术语 节点的度：一个节点含有的子树的个数称为该节点的度 树的度：一棵树中，最大的节点的度称为树的度 叶节点或终端节点
DOM文档对象模型，获取节点的方式
你还有我
01-09 867
这里写目录标题什么是dom获取节点的方式测试题-简答题 什么是dom DOM就是文档对象模型， 什么是文档对象模型？这就需要好好说说了。 HTML的文档document页面是一切的基础，没有它dom就无从谈起。当创建好一个页面并加载到浏览器时，DOM就悄然而生，它会把网页文档转换为一个文档对象，主要功能是处理网页内容。在这个文档对象里，所有的元素呈现出一种层次结构 每个载入浏览器的 HTML 文档都会成为 Document 对象。 Document 对象使我们可以从脚本中对 HTML 页面中的所有元素进行访
第十二讲 dom对象（DOM对象、document对象的常用方法、节点、查找结点、 查看/修改/删除属性节点、创建和增加节点）
Fiki515的博客
04-24 1493
一、查看节点 getElementById( ) getElementsByName( ) getElementsByTagName( ) <body> <div id="box">hello box</div> </body> <script> var oDiv = document.getElementById("box"); //div元素对象 // var oDiv = document..
document获取DOM节点的三种方法详解
热门推荐
她来听我的，演唱会。
12-12 1万+
最近转行做前端，刷js的时候看到document获取DOM元素的三种方法时懵逼了很久，自行研究一番后分享给大家。
2020-11-30 Dom基础 节点属性，查找元素的6种方法，获取或设置html内容，节点属性操作，节点遍历，元素遍历
Amanda&Rachel的博客
11-30 461
节点属性 1、nodeName 节点名称 元素--- 标签名 属性--- 属性名 文本--- #text 文档--- #document 2、nodeValue 元素--- null 或 undefined 属性--- 属性值 文本--- 自身 3、nodeType 验证节点类型 nodeType 元素 1 属性 2 文本 3 注释 8 文档 9 <div id="x">啊啊</div> 呵呵 <!-- 这是注释 --> var bodyDom
JQuery查找DOM节点的方法
12-29
先来最简单的查找节点操作。 为了能全面地讲解DOM操作，首先需要构建一个网页。因为每一张网页都能用DOM表示出来，而每一份DOM都可以看作一棵DOM树。HTML代码如下： 欢迎访问软件开发网>欢迎访问软件开发网 简单...
JS实现访问DOM对象指定节点的方法示例
10-18
本示例主要讲解如何使用JavaScript实现访问DOM对象指定的节点，包括使用`getElementById()`方法，以及通过`nodeName`、`nodeType`和`nodeValue`属性获取节点的相关信息。 **一、介绍** 1. **getElementById()方法*...
JavaScript基于Dom操作实现查找、修改HTML元素的内容及属性的方法
10-20
例如，`document`对象是整个HTML页面的根节点，而`getElementById`方法就是通过DOM接口来查找具有特定ID的元素。 在示例代码中，首先通过`getElementById`方法查找ID为"hw"的`<p>`元素，并显示其内容。这展示了如何...
详谈DOM简介及节点、属性、查找节点的方法
11-26
DOM将文档解析为一个可操作的对象模型，允许开发者通过JavaScript或其他支持DOM的脚本语言来创建、访问和修改文档内容。在这个模型中，每个部分都可以作为一个独立的节点进行操作，包括元素、属性、文本等。 DOM...
JS访问DOM节点方法详解
10-21
除了本文中提到的方法，还有很多其他的DOM操作方法，如`getElementsByClassName()`，`querySelector()`，`querySelectorAll()`等，它们也提供了强大的功能来访问和修改DOM节点。开发者可以根据实际需求选择合适的API...
js根据document接口查找dom节点的方法
iteye_1478的博客
03-10 296
 var b = a.childNodes;获取a的全部子节点； var c = a.parentNode;获取a的父节点； var d = a.nextSbiling;获取a的下一个兄弟节点、  var e = a.previousSbiling;获取a的上一个兄弟节点var f = a.firstChild;获取a的第一个子节点 var g = a.lastChild;获取a的最后一个子节...
DOM里面document的查找节点的方式
gmling的博客
08-21 2667
getElementById() ： 根据id属性值获取元素对象。id属性值一般唯一 getElementsByTagName()：根据元素名称获取元素对象们。返回值是一个数组 getElementsByClassName():根据Class属性值获取元素对象们。返回值是一个数组 getElementsByName(): 根据name属性值获取元素对象们。返回值是一个数组 ...
查找Dom节点的方式
weixin_54902466的博客
06-14 1145
查找Dom节点的方式1.根据 id 来查找dom元素节点注意事项2.查找html标签元素3.查找body标签元素 1.根据 id 来查找dom元素节点 <!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="v
HTML DOM文档对象查找元素的方法
我的博客
09-03 7260
一、HTML DOM 节点 在 HTML DOM (Document Object Model) 中 , 每一个元素都是 节点: 文档是一个文档节点。 所有的HTML元素都是元素节点。 所有 HTML 属性都是属性节点。 文本插入到 HTML 元素是文本节点。are text nodes。 注释是注释节点。 二、Document 对象 　　当浏览器载入 HTML 文档, 它就会成为 D...
javascript（15）——使用document获取结点以及结点的一些方法
木子 旭的博客
01-19 1522
1.document获取结点的三种方式 document.getElementsByTagName('h1')//通过标签名字 document.getElementById('p1'));//通过标签的id属性 document.getElementsByClassName('p2');//通过标签的class名字 2.结点的一些方法和变量 给其赋值的时候需要引号包裹，作为字符串进行赋值 var father = document.getElementById('father'); var childr
js获取页面中元素
人生就像旅程
01-08 629
本文摘自于：http://www.jb51.net/article/19705.htm   在Web应用程序特别是Web2.0程序开发中，经常要获取页面中某个元素，然后更新该元素的样式、内容等。 - 如何获取要更新的元素，是首先要解决的问题。令人欣慰的是，使用JavaScript获取节点的方法有很多种，这里简单做一下总结（以下方法在IE7和Firefox2.0.0.11测试通过）：
微信小程序骨架屏
最新发布
djjdjdjdjddjjdjd的博客
08-16 186
⑤ 在onLoad 中页面加载前定义 isLoading.value=true, 在加载完后定义 isLoading.value=false.骨架屏是页面的一个空白版本，通常会在页面完全渲染之前，通过一些灰色的区块大致勾勒出轮廓，待数据加载完成后，再替换成真实的内容。① 在相应微信小程序页面右下角点生成骨架屏，左侧小程序目录会自动生成 .wxml 、.wxss 文件，⑥ 在生成骨架屏页面中 v-if="isLoading" v-else 定义显示与隐藏。
理解DOM：节点操作与模型解析
DOM提供了一系列方法来访问和操作这些节点。例如，`nodeName`属性用于获取节点的名称，`nodeType`则用来识别节点的类型，1表示元素节点，2表示属性节点，3表示文本节点。`nodeValue`则返回节点的值，对于文本节点，...
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值