JavaScript访问HTML元素

最新推荐文章于 2022-09-19 22:00:00 发布

VIP文章 qiao_quite

最新推荐文章于 2022-09-19 22:00:00 发布

阅读量1.4k

点赞数

分类专栏：前端

本文链接：https://blog.csdn.net/weixin_38746118/article/details/90213327

版权

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

最低0.47元/天解锁文章

qiao_quite

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
JavaScript访问HTML元素

js 动态修改 html 元素，访问 html 元素的方式1. 根据 ID 访问 html 元素2. 根据 CSS 选择器访问 html 元素3. 利用节点关系访问 html 元素根据ID访问HTML元素document.getElementById( idval ):返回文档中 id 属性值为 idval 的 HTML 元素。<! DOCTYPE html>&...
复制链接

扫一扫