JavaScript访问HTML元素

最新推荐文章于 2024-03-29 09:20:15 发布
原创 最新推荐文章于 2024-03-29 09:20:15 发布 · 1.6k 阅读 · 2 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。

本文介绍了JavaScript访问HTML元素的各种方式，包括根据ID、CSS选择器、节点关系来访问，以及如何访问表单控件、列表框、下拉菜单选项和表格子元素。详细讲解了document.getElementById、querySelector、querySelectorAll等方法的使用。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

js 动态修改 html 元素，访问 html 元素的方式

1. 根据 ID 访问 html 元素
2. 根据 CSS 选择器访问 html 元素
3. 利用节点关系访问 html 元素

1. 根据ID访问HTML元素

  • document.getElementById( idval ):返回文档中 id 属性值为 idval 的 HTML 元素。
<! DOCTYPE html>
<html>
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
	<title>id</title>
	<script >
		var accessById = function(){
			alert(document.querySelector("#a").innerHTML +"\n"+document.getElementById("b").value);
		}
	</script >
	
</head>
<body >
	<div id="a">wo shi java</div>
	<textarea id="b" rows="3" cols='25'>javaee</textarea>
	<input type="button" value="访问两个元素" onclick="accessById();">
</body >

结果
在这里插入图片描述

2 - 根据 CSS 选择器访问 html 元素

  • Eelemnt querySelector（Selectos）：该方法的参数即可是一个 css 选择器，也可用逗号隔开的多个 css 选择器；该方法返回 html 文档中第一个符合选择器参数的 html 元素。
  • NodeList querySelectorAll（Selectos）：该方法与前一个方法类似，只是该方法返回符合 css 选择器的所有 html 元素。
<! DOCTYPE html>
<html>
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
	<title>,,</title>
	<script >
		var change = function(){
			var divList = document.querySelectorAll("div");
			alert(divList);
			for (var i in divList){
				divList[i].innerHTML = "测试内容"+ i;
				divList[i].style.width = "300px";
				divList[i].style.height = "50px";
				divList[i].style.margin = "10px";
				divList[i].style.backgroundColor = "#faa";
			}
		}
	</script >
	
</head>
<body >
	<div ></div>
	<div ></div>
	<div ></div>
	<input type="button" onclick="change()" value="修改全部div元素">
	
</body >

结果
在这里插入图片描述

3- 利用节点关系访问 html 元素

  • Node parentNode：返回当前节点的父节点，只读属性
  • Node previousSibling：返回当前节点的前一个兄弟节点，只读属性
  • Node nextSibling：返回当前节点的后一个兄弟节点，只读属性
  • Node[ ] childNodes：返回当前节点的所有子节点，只读属性
  • Node[ ] getElementByTagName（tagname）：返回当前节点的具有制定标签名的所有子节点。
  • Node firstChild：返回当前节点的第一个节点，只读属性
  • Node lastChild：返回当前节点的最后一个节点，只读属性
<! DOCTYPE html>
<html>
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
	<title>利用节点关系访问 html 元素</title>
	<style >
		.selected{
			background-color:#66f;
		}
	</style >
	
</head>
<body >
	<ol id="books">
		<li id="java">java1	</li>
		<li id="c">c1</li>
		<li id="ajax" class="selected">c++1</li>
		<li id="python">python1	</li>
		<li id="php">php1</li>
		<li id="go">go1</li>
	</ol>
	<input type="button" value="父节点" onclick="change(curTarget.parentNode);" />
	<input type="button" value="第一个" onclick="change(curTarget.parentNode.firstChild.nextSibling);" />
	<input type="button" value="上一个" onclick="change(curTarget.previousSibling.previousSibling);" />
	<input type="button" value="下一个" onclick="change(curTarget.nextSibling.nextSibling);" />
	<input type="button" value="最后一个" onclick="change(curTarget.parentNode.lastChild.previousSibling);" />
	<script type="text/javascript">
		var curTarget = document.getElementById("ajax");
		var change = function(target){
			alert(target.innerHTML);
		}
	</script>
</body >

结果
在这里插入图片描述

4- 访问表单控件

属性1介绍
action返回表单的action属性，读写属性
elements返回表单内全部表单控件组成的数组
length返回表单内单域的个数
method返回表单的method属性
target用于确定提交表单时的结果窗口，可以是_self 、_parent 、_top 、_blank的值
reset（）重设表单
submit（）提交表单
<! DOCTYPE html>
<html>
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
	<title>访问表单控件</title>

	
</head>
<body >
	<form id="d" action="" method="get">
		<input name="user" type="text" /><br/>
		<input name="pass" type="text" /><br/>
		<select name="color" >
			<option value="red">red</option>
			<option value="blue">blue</option>
		</select><br/>
		<input type="button" value="第一个" onclick="alert(document.getElementById('d').elements[0].value);" />
		<input type="button" value="第2个" onclick="alert(document.getElementById('d').elements['pass'].value);" />
		<input type="button" value="第3个" onclick="alert(document.getElementById('d').color.value);" />
	</form>
</body >

结果
在这里插入图片描述

5- 访问列表框、下拉菜单的选项

属性1介绍
form返回列表框、下拉菜单所在的表单对象。只读属性
length返回列表框、下拉菜单的选项个数。该属性的值可通过增加或刷险选项来改变。只读属性。
options返回列表框、下拉菜单里所有选项组成的数组。只读属性。
selectedIndex返回下拉列表中选中选项的索引，如果有多个选项被选中，第一个被选中选项的索引。读写属性。
type返回下拉列表的类型，即是否允许多选。如果允许多选，则返回sle 如果不支持多选，则返回select-one。
select.options[index]返回列表框、下 拉菜单的第index+1个选项。
form返回包含该选项所处列表框、下拉菜单的表单对象。
defaultSelected返回该选项默认是否被选中。只读属性。
value返回每个选项的value值。
	<select name="co" id="co" size="6">
		<option value="red">red</option>
		<option value="blue">blue</option>
		<option value="python">python</option>
		<option value="php">php</option>
		<option value="c">c</option>
		<option value="a">a</option>
	</select><br/>
	<input type="button" value="第一个" onclick="change(curTarget.options[0]);" />
	<input type="button" value="上一个" onclick="change(curTarget.options[curTarget.selectedIndex -1]);" />
	<input type="button" value="下一个" onclick="change(curTarget.options[curTarget.selectedIndex +1]);" />
	<input type="button" value="最后" onclick="change(curTarget.options[curTarget.length -1]);" />
	<script>
		var curTarget = document.getElementById("co");
		var change = function (target){
			alert(target.text);
		}
	</script>

结果
在这里插入图片描述

6- 访问表格子元素

属性1介绍
caption返回该表格的标题对象。可通过修改该属性来改变表格标题。
HTMLollction roOWs返回该表格里的所有表格行，该属性会返回<thead…/>、<tfoot…/>、<tbody…/>元素里的所有表格行。只读属性
HTMLCollction tBodies返回该表格里所<tbody…/>元素组成的数组
table.rows[index]返回该表格第index+ 1行的表格行
cells返回该表格行内所有的单元格组成的数组。只读属性
rowIndex返回该表格行在表格内的索引值。只读属性。
cellIndex返回该单元格在该表格内的索引值。只读属性
js读取服务器html文件,【未解决】js中将html内容保存到服务器上的本地的html文件...
weixin_36202273的博客
06-30 1129
【背景】之前已经实现了：网页中，点击某个按钮，可以调用到js获得到KindEditor的html的内容：function submitGoodsContent(){var kindeditor = window.editor;// 取得HTML内容html = kindeditor.html();console.log(html);}商品名：在此输入新产品的介绍内容提交当前页面现在希望实现，不仅仅...
javascript访问html元素的内容(1)
weixin_34292287的博客
03-26 280
形如如下格式的html元素: <p id="my_p">I'm <strong>BIG</strong> panda!!!</p> 有3种方式获取其内容，可以获取起全部的子内容，或是获取其子内容的text纯文本标识，或是以对象方式获取其子内容。 可以使用元素对象的innerHTM...
JavaScript对HTML文件进行数据访问，web端开发
m0_60229361的博客
03-21 829
对于框架原理只能说个大概，真的深入某一部分具体的代码和实现方式就只能写出一个框架，许多细节注意不到。开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】算法方面还是很薄弱，好在面试官都很和蔼可亲，擅长发现人的美哈哈哈…（最好多刷一刷，不然影响你的工资和成功率???在投递简历之前，最好通过各种渠道找到公司内部的人，先提前了解业务，也可以帮助后期优秀 offer 的决策。
js 访问html对象属性,js常见基础对象属性方法(一)
weixin_42132352的博客
06-04 449
js基础对象属性方法Object.keys()Object.keys()方法会返回一个由一个给定对象的自身可枚举属性组成的数组，数组中属性名的排列顺序和使用 for...in 循环遍历改对象时返回的顺序一致(两者的主要区别是一个for-in 循环还会枚举器原型链上的属性)//examples// simple arrayvar arr = ['a', 'b', 'c'];console.log(O...
JavaScript读文件（HTML5）
qq_37555524的博客
09-18 569
在HTML5中，我们可以使用FileReader对象来读取INPUT-INPUT控件中选中的文件的内容。下面是例子： <inputtype="file"id="f"/> <script> w...
JavaScript操作HTML元素和样式的方法详解
10-23
本文将详细介绍JavaScript操作HTML元素和样式的各种方法，这些操作都是通过HTML文档对象模型（HTML DOM）来实现的。 首先，创建新的HTML元素是操作HTML文档的基本技能之一。在JavaScript中，创建元素涉及到创建元素...
JavaScript中获取HTML元素值的三种方法
10-22
在JavaScript中，获取HTML元素值是网页动态交互的基础，它允许开发者从用户输入或页面上其他元素中收集信息。本文将详细介绍三种常用的方法：getElementById()、getElementsByName() 和 getElementsByTagName()，并...
头歌教学实践平台 Web前端开发基础 JavaScript学习手册十四：HTML DOM-文档元素的操作（二）
01-20
DOM是HTML和XML文档的一种结构化表示，它将网页内容转化为树形结构，使得JavaScript可以方便地访问和修改每个元素。在这个部分，我们将学习更多关于DOM元素操作的方法和技巧。 首先，`getElementById()`是获取特定...
JavaScript基于Dom操作实现查找、修改HTML元素的内容及属性的方法
10-20
每个HTML元素在DOM中都表现为一个对象，这些对象可以被JavaScript访问和操作。例如，`document`对象是整个HTML页面的根节点，而`getElementById`方法就是通过DOM接口来查找具有特定ID的元素。 在示例代码中，首先...
javascript 获取HTMl文件指定元素的代码
10-29
文档中提到的代码示例详细地展示了如何使用JavaScript来获取页面上不同的HTML元素，并且演示了不同的函数来展示它们的标签名和数量。 知识点： 1. 使用`document.all`方法获取元素： 文档中提到的`document.all`...
用JS(javascript)从另一个html中读取标题和正文body
01-30
用JS(javascript)从另一个html中读取标题和正文body
用html+javascript读写txt文件
05-19
用html+javascript读出写入txt文件
JavaScript对HTML文件进行数据访问，万字长文轻松彻底入门Flutter
m0_60453176的博客
03-27 936
其实前端开发的知识点就那么多，面试问来问去还是那么点东西。所以面试没有其他的诀窍，只看你对这些知识点准备的充分程度。so，出去面试时先看看自己复习到了哪个阶段就好。这里再分享一个复习的路线：（以下体系的复习资料是我从各路大佬收集整理好的）《前端开发四大模块核心知识笔记》最后，说个题外话，我在一线互联网企业工作十余年里，指导过不少同行后辈。帮助很多人得到了学习和成长。开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】
JaveScript 通常用来操作HTML元素，
weixin_30346033的博客
05-07 191
如需从 JavaScript 访问某个 HTML 元素，您可以使用 document.getElementById(id) 方法。 请使用 "id" 属性来标识 HTML 元素： 例子 通过指定的 id 来访问 HTML 元素，并改变其内容： <!DOCTYPE html> <html> <body> <h1>My ...
JavaScript对HTML文件进行数据访问
最新发布
2401_83817971的博客
03-29 801
技术是没有终点的，也是学不完的，最重要的是活着、不秃。零基础入门的时候看书还是看视频，我觉得成年人，何必做选择题呢，两个都要。喜欢看书就看书，喜欢看视频就看视频。最重要的是在自学的过程中，一定不要眼高手低，要实战，把学到的技术投入到项目当中，解决问题，之后进一步锤炼自己的技术。技术学到手后，就要开始准备面试了，找工作的时候一定要好好准备简历，毕竟简历是找工作的敲门砖，还有就是要多做面试题，复习巩固。有需要面试题资料的朋友点击这里即可获取！！！。，解决问题，之后进一步锤炼自己的技术。
JS的输出
dazhi_100的专栏
03-08 741
JavaScript 通常用于操作 HTML 元素。 操作 HTML 元素 如需从 JavaScript 访问某个 HTML 元素，您可以使用 document.getElementById(id) 方法。 请使用 "id" 属性来标识 HTML 元素： 例子 通过指定的 id 来访问 HTML 元素，并改变其内容： My First Web Page id="dem
js 读取另一个html,如何获取同页面内另一个js内的匿名对象
weixin_33019705的博客
06-28 501
比如bilibili的window下的player对象，少了很多内置有用函数window.player1. i {play: ƒ, pause: ƒ, reload: ƒ, seek: ƒ, volume: ƒ,…}1. addEventListener: ƒ (i,e)2. addViewPoints: ƒ (i)3. appendToPlaylist: ƒ (i)4. biliMe...
前端开发笔记（文件的读取）JS文件读取HTML5
qq_55956902的博客
03-23 2793
笔记
javascript中innerHTML，属性设置或返回表格行的开始和结束标签之间的 HTML使用方法代码
徊忆羽菲
06-11 1465
javascript中innerHTML使用方法代码innerHTML的写法将指定元素的html代码分配给变量用指定元素替换变量的值清空指定的元素innerHTML使用的具体示例使用innerHTML来清空元素的代码 innerHTML属性允许更改html元素的内容，可以设置或返回表格行的开始和结束标签之间的HTML，本篇文章就来给大家介绍关于innerHTML的用法，下面我们来看具体内容。 in...
JavaScript获取HTML元素方法详解
在网页开发中，JavaScript是用于交互式操作HTML元素的强大工具。以下是几种常用的方法来获取HTML元素： 1. `getElementById`: 这是最直接和最常用的方法，通过元素的唯一ID来获取元素。例如，如果有一个`<a>`标签其...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值