HTML DOM文档对象查找元素的方法

最新推荐文章于 2024-06-24 16:28:05 发布
最新推荐文章于 2024-06-24 16:28:05 发布
阅读量7.2k 收藏 10
点赞数 3
分类专栏： JavaScript HTML+CSS 文章标签： getElementByName getElementByTagName getElementByClassName getElementById
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/wd2011063437/article/details/80987809
版权

一、HTML DOM 节点

在 HTML DOM (Document Object Model) 中 , 每一个元素都是 节点:

  1. 文档是一个文档节点。
  2. 所有的HTML元素都是元素节点。
  3. 所有 HTML 属性都是属性节点。
  4. 文本插入到 HTML 元素是文本节点。
  5. 注释是注释节点。

二、Document 对象

当浏览器载入 HTML 文档, 它就会成为 Document 对象。
　　Document 对象是 HTML 文档的根节点。
　　Document 对象使我们可以从脚本中对 HTML 页面中的所有元素进行访问。
　　提示：Document 对象是 Window 对象的一部分，可通过 window.document 属性对其进行访问。

三、HTML DOM 定义的查找对象的方法

HTML文档常见的方法:

  • getElementsByName()
  • getElementsByTagName()
  • getElementsByClassName()
  • getElementById()

（一）、getElementsByName()

1、定义和用法
　　getElementsByName() 方法可返回带有指定名称的对象的集合。

2、语法
　　document.getElementsByName(name)

3、参数
　　name 必须。元素的名称。

4、实例

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>getElementsByName()实例</title>
	<script>
		function getElements(){
    
			var f=document.getElementsByName("fruit");
			alert(f.length);
		}
	</script>
</head>
<body>
	苹果:<input name="fruit" type="radio" value="苹果">
	香蕉:<input name="fruit" type="radio" value="香蕉">
	<input type="button" onclick="getElements()" value="name为 'fruit'的元素数量?">
</body>
</
最低0.47元/天 解锁文章
苦的人生遇见甜
关注
  • 3
    点赞
  • 踩
  • 10
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
document对象+获取节点三种方法演示：
xdd_lmd的博客
07-30 6366
document对象的演示。 该对象将标记型文档进行封装。 该对象的作用，是可以对标记型文档进行操作。 最常见的操作就是，想要实现动态效果，需要对节点操作，那么要先获取到这个节点。 要想获取节点，必须要先获取到节点所属的文档对象document。 所以document对象最常见的操作就是获取页面中的节点。 获取节点的方法体现： 1，getElementById:通过标签的id属性值获取
DOM元素操作方法（获取元素或者操作元素）
初漾的博客
09-03 6021
什么是 DOM？DOM 是 W3C（万维网联盟）的标准。 DOM 定义了访问 HTML 和 XML 文档的标准： “W3C 文档对象模型 （DOM） 是中立于平台和语言的接口，它允许程序和脚本动态地访问和更新文档的内容、结构和样式。” W3C DOM 标准被分为 3 个不同的部分： 核心 DOM - 针对任何结构化文档的标准模型 XML DOM - 针对 XML 文档的标准模型 HTML
第十二讲 dom对象（DOM对象、document对象的常用方法、节点、查找结点、 查看/修改/删除属性节点、创建和增加节点）
Fiki515的博客
04-24 1479
一、查看节点 getElementById( ) getElementsByName( ) getElementsByTagName( ) <body> <div id="box">hello box</div> </body> <script> var oDiv = document.getElementById("box"); //div元素对象 // var oDiv = document..
JavaScript核心知识第一章---DOM 文档对象模型（含大量案例分析）
最新发布
2401_85124119的博客
06-24 958
1️⃣ 文档对象模型（Document Object Model，简称DOM），是 W3C 组织推荐的处理可扩展标记语言（HTML或者XML）的标准编程接口。2️⃣ W3C 已经定义了一系列的DOM接口，通过这些DOM接口可以改变网页的内容、结构和样式。1️⃣ JavaScript 使我们有能力创建动态页面，而事件是可以被 JavaScript 侦测到的行为。简单理解： 触发— 响应机制。
原生JS获取HTML DOM元素的8种方法
热门推荐
荧光之烛
06-13 2万+
JS获取DOM元素的方法（8种） 通过ID获取（getElementById） 通过name属性（getElementsByName） 通过标签名（getElementsByTagName） 通过类名（getElementsByClassName） 通过选择器获取一个元素（querySelector） 通过选择器获取一组元素（querySelectorAll） 获取html的方法（docume...
DOM文档对象模型通过id来访问HTML元素
lx__angel的博客
12-07 1247
Document Object Model文档对象模型 DOM模型中的节点--文档可以说是由节点构成的集合。在DOM模型中有以下3种节点： 元素节点：、 文本节点:被包含在原始节点内部 属性节点：修饰元素节点海通科技 元素节点 属性节点 文本节点DOM主要提供了两种方式来访问HTML元素 1、根据id访问，通过document对象调用getElementById()方法来查找具有
遍历DOM对象内的元素属性示例代码
09-04
在Web开发中，DOM（Document Object Model）是HTML或XML文档的一种结构化表示，它允许我们通过编程方式访问和操作页面上的元素。当需要遍历DOM对象内的元素属性时，通常是为了获取或修改元素的各种特性。这个过程...
JavaScript基于Dom操作实现查找、修改HTML元素的内容及属性的方法
10-20
例如，`document`对象是整个HTML页面的根节点，而`getElementById`方法就是通过DOM接口来查找具有特定ID的元素。 在示例代码中，首先通过`getElementById`方法查找ID为"hw"的`<p>`元素，并显示其内容。这展示了如何...
Prototype中dom对象方法汇总
12-10
如果未提供，它会在整个文档中查找具有指定类名的元素。 3. **Element.extend**(element)：扩展给定的`element`，使其能够直接调用`Element`、`Form.Element`或`Form`对象中定义的方法，增强元素的功能。 接下来，...
JS中使用DOM来控制HTML元素
10-21
DOM提供了许多方法来查找、访问、修改以及添加或删除HTML元素。在本文中，我们将深入探讨如何使用DOM来控制HTML元素，主要关注以下四个关键知识点： 1. **getElementsByNames()**：此方法用于根据元素的`name`属性...
JavaScript HTML DOM元素 节点操作汇总
10-16
DOM（Document Object Model）是一种标准，它将HTML或XML文档表示为一个树形结构，其中每个部分都对应一个对象，称为节点。节点分为多种类型，如元素节点、属性节点、文本节点等。节点具有关键属性，如`nodeName`...
document获取对象三方法
蜗牛学习笔记
03-01 1万+
综上三种获取对象的方式，可以看出，getElementById 是获取对象最直接的方式，也是效率最高的方式；但是如果元素没有id属性，但有name属性，那么就使用getElementsByName 来获取对象的集合，再遍历集合中的每一个对象；如果元素也没有name属性呢，那就只有使用getElementsByName 来获取对象了。
类数组（伪数组）
m0_37068028的博客
10-17 1341
类数组（伪数组）什么叫类数组类数组是一个含有length属性的json对象，它是按照索引的方式存储数据，它并不具有数组的一些方法。产生类数组的方式：var divs = document.getElementsByTagName('div'); console.log(divs); // HTMLCollection var node = document.getElementsByName('xx
JS中DOM元素获取的宽和高的方法小结
不想写代码的一天
05-28 2万+
网页可见区域宽： document.body.clientWidth （可变） 网页可见区域高： document.body.clientHeight （可变） 网页可见区域宽： document.body.offsetWidth (包括边线的宽) 网页可见区域高： document.body.offsetHeight (包括边线的高) 网页正文全文宽： document.body.scro...
如何判断类页面元素数组和类页面元素对象
desuosu2755的博客
04-16 137
var a = document.getElementById('divId'); var b = document.getElementsByTagName('p'); //一般我们以为a返回的是一个对象，b返回的是一个数组，其实不是这样的，两个都是对象 a instanceof Object; //true b instanceof Array; //false b ...
JavaScript 学习-27.查找HTML DOM节点(元素)
qq_27371025的博客
05-28 877
前言 如何查找和访问 HTML 页面中的节点元素？也就是我们经常说的定位元素的一些方法。 查询 HTML 节点(元素)一些方法 查找 html 页面上的元素，可以用以下方法 方法 节点类型 getElementById() 通过 id 查找 HTML 元素 getElementsByClassName() 通过标 class 属性查找 HTML 元素 getElementsByName() 通过标 name 属性查找 HTML 元素 getElementsByTagName()
5个常用DOM方法
暖心~的博客
11-18 2538
1、getElementById:   返回一个与给定id属性值的元素节点对应的对象。   是document对象特有的函数。     只有一个参数：要获得的元素的id属性的值，id值必须放在单引号或双引号。 2、getElementsByTagName:   获取没有id属性的对象.   返回一个对象数组。   只有一个参数：参数是标签的名字。   getElem
Dom 通过html元素的标签属性找节点 通过关系找标签
love_zjl的博客
02-22 1208
/*   DOM(Document Object Model) 文档对象模型 一个html页面被浏览器加载的时候，浏览器就会对整个html页面上的所有标签都会创建一个对应的 对象进行描述，我在浏览器上看到的信息只不过就是这些html对象的属性信息而已。我们只要能找到 对应的对象操作对象的属性，则可以改变浏览器当前显示的内容。   var allNodes = document.al
如何学习html dom对象关于定位的内容
08-05
同时，及时查阅相关的文档和教程，如MDN（Mozilla开发者网络）上的DOM文档，可以帮助我们进一步理解和学习DOM对象的定位内容。 总结起来，学习HTML DOM对象关于定位的内容需要理解DOM的基本概念和层次结构，掌握...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值