感觉又学到了不少,在这里写下来,但也有一个问题,不知道是为甚吗?

今天具体学习了如何去访问和修改HTML元素的内容与样式,也就是DOM中的节点

在这里有三种方法:

  • 通过使用 getElementById() 方法
  • 通过使用 getElementsByTagName() 方法
  • 通过使用 getElementsByClassName() 方法

 •  getElementById()方法:返回带有指定Id的元素

示例如下:

<!DOCTYPE html>
<html>
<body>

<p id="intro">Hello World!</p>
<p>本例演示 <b>getElementById</b> 方法!</p>

<script>
x=document.getElementById("intro");
document.write("<p>来自 intro 段落的文本:" + x.innerHTML + "</p>");
</script>

</body>
</html>

 

 •  getElementsByTagName() 方法:返回带有指定标签名的所有元素。

示例如下:

<!DOCTYPE html>
<html>
<body>

<p>Hello World!</p>
<p>DOM 很有用!</p>
<p>本例演示 <b>getElementsByTagName</b> 方法。</p>

<script>
x=document.getElementsByTagName("p");
document.write("第一段的文本: " + x[0].innerHTML);
</script>

</body>
</html>

 •  getElementsByClassName() 方法:如果您希望查找带有相同类名的所有 HTML 元素,请使用这个方法:

示例如下:

<!DOCTYPE html>
<html>
<body>
<p class="p">Hello World!</p>
<p class="p">DOM 很有用!</p>
<p>这个标签中的内容将不会出现</p>
<script>
x=document.getElementsByClassName("p");
alert(x.innerHTML);
</script>
</body>
</html>

我运行出来没有错误,但就是不显示我想要的内容,为什么?

注释:getElementsByClassName() 在 Internet Explorer 5,6,7,8 中无效。



我感觉这些方法很方便,比如我们想要改变或替换一篇文章中所有标签的内容或者样式,就可以使用它们了.

   •  简单的替换例子:

<!DOCTYPE html>
<html>
<body>
<p id="d1"><strong>勒布朗詹姆斯</strong></p>
<p><strong>凯文杜兰特</strong></p>
<script>
function change(){
document.getElementById("d1").innerHTML="科比布莱恩特";
}
</script>
<input type="button" value="替换" οnclick="change()" />
<p>点击这个按钮,我们将勒布朗詹姆斯替换为科比布莱恩特</p>
</body>
</html>

转载于:https://www.cnblogs.com/popstar8866/p/4008329.html

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/575173.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

java中Object和Objects类、toString方法和equals方法介绍

Object类&#xff1a; Object类位于java.lang包中&#xff0c;lang包下的类无需导包就可以使用&#xff0c;object是Java语言中的根类&#xff0c;即所有类的父类。Object中描述的所有方法其子类都可以使用。在对象实例化的时候&#xff0c;最终找的父类就是Object。 如果一个…

实现线段切割法_切割晶圆及玻璃产品的现代技术与设备

作者&#xff1a;韩卓申科VS1,2&#xff0c;伊凡诺夫VI3&#xff0c;吕鸿图2,4&#xff0c;纳乌莫夫A S2,4&#xff0c;王薇媛4摘要&#xff1a;由于需以各种非金属半导体材料晶圆制造使用价值低之微电子产品&#xff0c;对其加工高精度及品质改善的要求更为严苛&#xff0c;因…

学python最重要的是_Python学习,要选哪个版本?

纵观各大编程语言在 2017 年的发展情况&#xff0c;我们会发现涌现出诸如 Go、Swift 这类后起之秀&#xff0c;而其中最为耀眼的当属 Python。之所以 Python 如此受捧&#xff0c;不仅仅是人工智能、数字科学领域的兴起&#xff0c;而且与其自身的特性必不可分&#xff0c;正应…

ARX中实现实体的偏移

static AcDbObjectId OffsetEnty(const ACHAR* BlkName,AcDbObjectId entId,double OfsValue,AcDbDatabase *pDbCrtEntity:: pPurDb); //&#xff01;&#xff08;多段线特别处理&#xff09; AcDbObjectId EditEntity::OffsetEnty(const ACHAR* BlkName,AcDbObjectId entId,do…

java中Date类、DateFormat及SimpleDateFormat简介

Date类&#xff1a; Date类表示日期和时间&#xff0c;精确到毫秒&#xff08;千分之一秒&#xff09;位于java.util.Date下。日期是可以计算的&#xff0c;其本质是利用毫秒值进行计算&#xff0c;任何一个时间点都可以转换为毫秒值&#xff0c;毫秒值表示一个瞬间。 时间原…

gettype获取类名_在TypeScript中运行时获取对象的类名

在TypeScript中运行时获取对象的类名是否可以使用typescript在运行时获取对象的类/类型名称&#xff1f;class MyClass{}var instance new MyClass();console.log(instance.????); // Should output "MyClass"Adam Mills asked 2019-04-11T03:14:30Z9个解决方案…

LeetCode-Maximal Rectangle-最大矩形

https://oj.leetcode.com/problems/maximal-rectangle/ 一堆0,1矩阵中计算出由1组成的长方形的最大面积。 使用了直方图求最大面积的算法。枚举每一行p&#xff0c;然后在将一行上的所有列看做朝i>p方向出发的直方图&#xff0c;然后在这个直方图上用栈存储递增序列的那个一…

cefsharp 加载网页慢_网站访问慢的排查方案(史上最详细)

说实话&#xff0c;比起网站打不开&#xff0c;网站访问慢更让人抓狂。因为造成网站访问慢的因素太多了&#xff0c;一般用户根本无从下手&#xff01;任他千头万绪的问题&#xff0c;从以下三个方面入手&#xff0c;也能轻松破解访问慢的大难题 &#xff1a;响应时间、执行时间…

java中日历类:Calendar

Calendar日历类 该类为抽象类&#xff0c;将所有可能用到的时间信息封装为静态成员变量&#xff0c;方便获取时间属性&#xff0c;其位于java.util.Calendar&#xff0c; 其中的getInstance方法可以返回一个Calendar类的子类对象&#xff0c;可以直接使用次子类进行创建对象&am…

typescript语法高亮插件_vscode常用插件

插件介绍HTML Snippets > 初级H5代码片段及提示HTML CSS Support > 初级H5代码片段及提示Debugger for Chrome > 让 vscode 映射 chrome 的 debug功能&#xff0c;静态页面都可以用 vscode 来打断点调试jQuery Code Snippets > jquery 重度患者必须品&#xff0c;废…

cfree运行程序错误_C/C++程序调试和内存检测

程序出现错误很正常&#xff0c;一个优秀的程序员必须学会调试&#xff0c;发现错误并改正。减少程序错误最有效的方法是&#xff1a;在敲代码之前&#xff0c;多花点时间思考&#xff0c;如何构造程序&#xff0c;数据结构和算法&#xff0c;尽量把细节提前写下来&#xff0c;…

java中System类、String Builder类简介

System类&#xff1a; System类为系统类&#xff0c;此包位于java.lang.System下&#xff0c;可以获得与系统相关的信息或系统操作&#xff0c;如&#xff1a; public class SystemClass{public static void main(String[] args){// 1.System下有许多静态的方法&#xff0c;其…

session的removeattribute移除一个不存在的属性会怎么用_公认峡谷机制最完美,对线几乎无解,夏侯惇高端局为何火不起来?...

Hello各位亲爱的小伙伴们&#xff0c;大家好&#xff0c;我是沐辰。在王者荣耀中始终有这么一个说法&#xff1a;“夏侯惇是王者峡谷机制最完美的英雄”&#xff0c;当然这个可不是沐辰胡编乱造&#xff0c;而是策划在数年前就曾公开发表过的看法。从机制上来&#xff0c;夏侯惇…

python图标的演变_python day 22 CSS拾遗之箭头,目录,图标

lanxing4. CSS拾遗之箭头画法.up { border-top: 30px solid green; border-right: 30px solid transparent; border-bottom: 30px solid transparent; border-left: 30px solid transparent; display: inline-block; } .down { border-top: 30px solid transparent; border-rig…

PHP中生成UUID

一、什么是UUID 简单的说UUID就是一串全球唯一的(16进制)数字串。 UUID的全拼为“Universally Unique Identifier”&#xff0c;可以译为“通用唯一识别码”。UUID由开源软件基金会 (Open Software Foundation, OSF) 定义&#xff0c;是分布式计算环境 (Distributed Computing …

java中包装类介绍

包装类&#xff1a; 基本数据类型使用起来非常方便&#xff0c;但是没有对应的方法来操作这些基本类型的数据&#xff0c;我们只有通过一个类把基本类型的数据封装起来&#xff0c;并在类中定义一些方法&#xff0c;这个类就叫做包装类。 包装类对应基本数据类型中的四类八种…

岗位po是什么意思_面试时,面试官问你有什么优点和缺点?应该如何巧妙的回答?...

工作多年&#xff0c;被面试过很多次&#xff0c;也面试过很多人&#xff0c;其中有一次印象最深刻&#xff0c;这次我不是主面试官&#xff0c;经理要面试一个候选人&#xff0c;他就拉上了我&#xff0c;作为陪衬&#xff0c;用经理的话说就是撑撑场面&#xff0c; 所以问题的…

python新手入门课_Python基础视频12集入门课程

视频笔记:├─1简介与实验环境配置9│ Python基础.pptx│ Python简介.pptx│ 实验环境配置2-1.pdf│ 2.1简介与实验环境配置.mp4│ 请简述 Python 语言与 C 语言、 Java 语言的区别.txt│ 请简述使用 conda 管理 python 环境有哪些优势.txt│├─2编程模式与注释│ 你所认为的 …

java中Collection集合、Iterator迭代器接口、for each循环遍历集合或对象

Collection集合&#xff1a; 概念&#xff1a;集合是java中提供一种存储多个数据的容器;数组也是存储数据的容器&#xff0c;集合和数组的区别就是集合的长度可以改变&#xff0c;而数组的长度不可以改变&#xff1b;集合可以存储多种类型的对象数据&#xff0c;而数组只能存储…

工业镜头选型计算公式_变压器分接开关选型指南

如何选择变压器适用的分接开关型号&#xff1f;选型中又有哪些值得注意的事项呢&#xff1f;小编特别整理提炼了分接开关选型指南&#xff0c;让我们一起来看一下。分接开关的产品型号示例如下&#xff1a;型号中的各项参数和规格可通过以下步骤计算确定&#xff1a;1、确定调压…