JavaScript- 通常用于操作 HTML 元素\通过指定的 id 来访问 HTML 元素，并改变其内容\写到文档输出

最新推荐文章于 2023-01-02 21:27:42 发布
最新推荐文章于 2023-01-02 21:27:42 发布
阅读量2.1k 收藏
点赞数
分类专栏： JavaScript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/u012701023/article/details/46235165
版权

通常用于操作 HTML 元素\

操作 HTML 元素

如需从 JavaScript 访问某个 HTML 元素，您可以使用 document.getElementById(id) 方法。

请使用 "id" 属性来标识 HTML 元素：


Windows 8 中的 JavaScript

提示：微软支持通过 JavaScript 创建 Windows 8 app。

对于因特网和视窗操作系统，JavaScript 都意味着未来。


通过指定的 id 来访问 HTML 元素，并改变其内容\

<!--JavaScript 由 web 浏览器来执行。在这种情况下，浏览器将访问 id="demo" 的 HTML 元素，并把它的内容（innerHTML）替换为 "My First JavaScript"。
-->


<!DOCTYPE html>
<html>
<head>
    <title></title>
</head>
<body>
<h1>My First Web Page</h1>

<p id="demo">My First Paragraph</p>

<script type="text/javascript">
    document.getElementById("demo").innerHTML="My First JavaScript";
</script>

</body>
</html>

写到文档输出

<!--下面的例子直接把 <p> 元素写到 HTML 文档输出中：
警告

请使用 document.write() 仅仅向文档输出写内容。

如果在文档已完成加载后执行 document.write，整个 HTML 页面将被覆盖：
-->


<!DOCTYPE html>
<html>
<head>
    <title></title>
</head>
<body>
<center>
    <script type="text/javascript">
    document.write("<p>My First javascript</p>");
    </script>
</center>

</body>
</html>



<!--
请使用 document.write() 仅仅向文档输出写内容。

如果在文档已完成加载后执行 document.write，整个 HTML 页面将被覆盖：
第二十行分号中英文写错，不会出现错误提示，但是不能执行此句代码
-->
<!DOCTYPE html>
<html>
<meta http-equiv="Content-Type" content="text/html charset=utf-8"/>
<head>
    <title></title>
</head>
<body>
<center>
    <h1>My First Web Page</h1>
    <button οnclick="myFunction()">点击这里</button>
    <script>
    function myFunction()
    {
        document.write("<h1>糟糕！文档消失了</h1>！");
    }
    </script>
</center>
</body>
</html>

-FIGHTING-
关注
专栏目录
js获取id后添加html代码,js获取Id的方法getElementById与$的由来和用Id判断元素是否存在及批量动态获取 Id...
weixin_35798118的博客
06-08 2272
要用js操作一个html元素必须获取到这个元素，而获取元素要用 getElementById() 方法，这个方法是通过元素的Id获取到元素这个对象。getElementById 字符比较多，写得比较长，所以现在常常又用$()来获取html元素对象，这又是怎么回事？其实$()本质还是通过getElementById()方法获取到html元素对象，只不过把这个获取方法定义为简单的$，这样书写简短快捷方...
开发知识点-HTML/JavaScript
最新发布
aming小老弟
12-21 654
对象解构语法可以让你从一个对象中提取出若干属性，然后将其赋值给对应的变量，让代码看起来更简洁、易读。这在处理复杂的数据结构时尤为有用，例如从 API 返回的 JSON 数据中提取出需要的属性。字符串数组。使用解构赋值语法将数组的元素按照顺序依次赋值给对应的变量。不足元素，对应位置的变量将会被赋值为 undefined。
HTML的id如何设置,如何使用javascript设置ID？
weixin_35925259的博客
06-22 1691
你的意思是这样吗？var hello1 = document.getElementById('hello1');hello1.id = btoa(hello1.id);为了进一步说明这个例子,你想要使用’abc’类的所有元素.我们可以使用querySelectorAll()来实现：HTMLJSvar abcElements = document.querySelectorAll('.abc');/...
取出html中指定id的元素的内容
weixin_33851429的博客
11-28 646
private void btnGet_Click(object sender, EventArgs e) { string PageUrl = "http://www.cnblogs.com/suizhikuo"; //需要获取源代码的网页 WebClient wc = new WebClient(); /...
JS截取页面，并保存到本地
weixin_34301132的博客
07-05 270
想截取浏览器上内容，并做成图片保存到本地。 可以使用html2canvas.js进行操作。 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <script sr...
HTML之【元素的id属性】
weixin_48485216的博客
04-18 2072
1、在HTML文档中，任何元素（节点）都有id属性，id属性值是该节点的唯一标识，所以在同一个HTML文档中id值不能重复。 2、表单提交数据的时候，只和name有关，和id无关。 3、id属性是为了更方便地获取元素，通过id获取元素对象。 4、DOM树（Document）：HTML文档是一棵树，树上有很多节点，每个结点都有自己的id。 ...
JavaScript高级程序设计 第十四章---DOM 文档对象模型
weixin_40794404的博客
09-03 1165
第十四章 本章内容 理解文档对象模型（DOM）的构成 节点类型 浏览器兼容性 MutationObserver 接口 文档对象模型（DOM，Document Object Model）是HTML 和XML 文档的编程接口。DOM 表示由多层节点构成的文档，通过它开发者可以添加、删除和修改页面的各个部分。脱胎于网景和微软早期的动态HTML（DHTML，Dynamic HTML），DOM 现在是真正跨平台、语言无关的表示和操作网页的方式。 14.1 节点层级 任何HTML 或XML 文档都可以用DOM表示
javascript-image_alternate_text:返回图像的替代文本
07-08
在上述代码中，`document.getElementById()`方法用于根据指定的ID找到图像元素，然后`.alt`属性用来读取该元素的`alt`值。这将输出图像的替代文本，帮助我们理解图片的含义。 JavaScript不仅可以读取`alt`属性，还...
JavaScript基础入门之---输出、注释、变量、数据类型、运算符、控制语句、错误处理、事件
qq_53016083的博客
01-18 1334
JavaScript基础---输出、注释、变量、数据类型、运算符、控制语句、错误处理、事件
HTML5和CSS3 WEB技术开发
张晨光老师的播客
01-02 6425
B站视频参考：https://www.bilibili.com/video/BV1H44y1k7ze/[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-Uwbid43Z-1672665963237)(asseits/image-20210831212039584.png)]HTML:超文本标记语言(Hyper Text Markup Language)，标准通用标记语言下的一个应用。 HTML 不是一种编程语言（C、Java、python、R等），而是一种标记语言 (markup
JavaScript向页面输出内容的四种方法
热门推荐
默茉的博客
04-22 3万+
javascript可以通过不同的方式来输出数据 1.使用window.alert()输出警告框 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>弹出框</title> </head> <script> aler...
DOM文档对象模型
我爱学习的博客
10-10 135
DOM文档对象模型   文档对象模型其实就是操作html标签的一些能力，比如我们可以获取、创建、添加或移除某个标签，也可以给元素绑定一些事件，获取元素的属性，给元素添加一些css样式等等。   DOM的和新对象是document，document对象是浏览器内置的一个对象，它有各种专门用来操作元素的方法。DOM实际上是页面中的标签，通过js获取到以后，就把这个对象叫做DOM对象。 一、document获取html元素的方法： 通过id名获取 document.getElementById('id’名)
html目标选择器有什么用,HTML基础-css选择器
weixin_39581972的博客
06-03 294
要想将CSS样式应用于特定的HTML元素, 首先需要找到该目标元素.在CSS中, 执行这一任务的样式规则部分被称为选择器.元素选择器元素选择器,又称标签选择器, 是指用HTML标签名作为选择器, 为页面某一类标签指定统一的CSS样式标签名 {属性1:属性值1;属性2:属性值2;}/* 元素选择器 */div {width:400px;height:200px;background-color:re...
js把页面内容写入页面
m0_48541096的博客
05-25 962
这是效果图，但是没有其他效果，仅仅是一种将内容用js写入页面的方法。 在data里面给出我们想要写到页面的内容，这里注意需要进行页面初始化，写一个工具函数，在工具函数里面遍历循环，创建6个Li,然后innerHTMl写入页面数据结构中 <script> var data ={ imgArr:["./image/img/1.jpg","./image/img/2.jpg","./image/img/3.jpg","./image/img/4.jpg","....
通过JS改变HTML
qq_37816453的博客
10-23 967
JS控制HTML元素的显示和隐藏 利用来JS控制页面控件显示和隐藏有两种方法，两种方法分别利用HTML的style中的两个属性，两种方法的不同之处在于控件隐藏后是否还在页面上占空位。  　　方法一： 1 2 document.getElementById("EleId").style.visibility="hidden"; document...
HTML id 属性
qq_39540493的博客
10-20 4130
一、使用 id 属性 id属性指定 HTML 元素的唯一 ID。id属性的值在 HTML 文档中必须是唯一的。 id属性用于指向样式表中的特定样式声明。JavaScript 也可使用它来访问和操作拥有特定 ID 的元素。 id 的语法是：写一个井号 (#)，后跟一个 id 名称。然后，在花括号 {} 中定义 CSS 属性。 注：id 名称对大小写敏感！id 必须包含至少一个字符，且不能包含空白字符（空格、制表符等）。 二、Class 与 ID 的差异 同一个类名可以由多个 HTML 元素...
DOM文档对象模型通过id来访问HTML元素
lx__angel的博客
12-07 1272
Document Object Model文档对象模型 DOM模型中的节点--文档可以说是由节点构成的集合。在DOM模型中有以下3种节点： 元素节点：、 文本节点:被包含在原始节点内部 属性节点：修饰元素节点海通科技 元素节点 属性节点 文本节点DOM主要提供了两种方式来访问HTML元素 1、根据id访问，通过document对象调用getElementById()方法来查找具有
JS的输出
dazhi_100的专栏
03-08 711
JavaScript 通常用于操作 HTML 元素。 操作 HTML 元素 如需从 JavaScript 访问某个 HTML 元素，您可以使用 document.getElementById(id) 方法。 请使用 "id" 属性来标识 HTML 元素： 例子 通过指定的 id 来访问 HTML 元素，并改变其内容： My First Web Page id="dem
JavaScript窗口与输入输出详解-Web编程基础
然而，JavaScript可以通过访问这些元素的值来获取用户输入，例如使用`document.getElementById('inputID').value`获取指定ID的输入框的值。 在输出方面，JavaScript主要通过文档对象模型（DOM）来实现。DOM是HTML和...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值