JavaScript-HTML DOM的用法

题记

javascript中html dom的用法

通过id查找元素


html>
<html>
<head>
<meta charset="utf-8">
<title>实例title>
head>
<body>
 
<p id="intro">你好世界!p>
<p>该实例展示了 <b>getElementByIdb> 方法!p>
<script>
x=document.getElementById("intro");
document.write("文本来自 id 为 intro 段落: " + x.innerHTML + "
");
script>
 
body>
html>

通过标签名查找元素


html>
<html>
<head>
<meta charset="utf-8">
<title>实例title>
head>
<body>
 
<p>你好世界!p>
<div id="main">
<p> DOM 是非常有用的。p>
<p>该实例展示了  <b>getElementsByTagNameb> 方法p>
div>
<script>
var x=document.getElementById("main");
var y=x.getElementsByTagName("p");
document.write('id="main"元素中的第一个段落为：' + y[0].innerHTML);
script>
 
body>
html>

通过类名查找元素


html>
<html>
<head>
<meta charset="utf-8">
<title>实例title>
head>
<body>
 
<p class="intro">你好世界!p>
<p>该实例展示了 <b>getElementsByClassNameb> 方法!p>
<script>
x=document.getElementsByClassName("intro");
document.write("文本来自 class 为 intro 段落: " + x[0].innerHTML + "
");
script>
<p><b>注意：b>Internet Explorer 8 及更早 IE 版本不支持 getElementsByClassName() 方法。p>
body>
html>

后记

觉得有用可以点赞或收藏！

相关阅读:
第十二届蓝桥杯《杨辉三角》-二分法
【Kubernetes系列】Kubernetes相关概念介绍
JMeter笔记4 | JMeter界面介绍
代码随想录训练营二刷第四十六天 | 完全背包 518. 零钱兑换 II 377. 组合总和 Ⅳ
HarmonyOS 实战项目
【LeetCode刷题】新手一看就会的——动态规划详解—入门
AcWing算法提高课-5.6.1同余方程
DOM中的node节点属性详解
Docker学习笔记
c++参数传递

原文地址：https://blog.csdn.net/m0_70819559/article/details/134009695