获得HTML元素

最新推荐文章于 2020-05-16 09:02:49 发布

更好的自己520

最新推荐文章于 2020-05-16 09:02:49 发布

阅读量213

点赞数

分类专栏： Javascript总结文章标签： html

本文链接：https://blog.csdn.net/a3060858469/article/details/79120535

版权

Javascript总结专栏收录该内容

3 篇文章 0 订阅

订阅专栏

通过id查找HTML元素

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

</body>

通过标签名查找HTML元素

<body>

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

</body>

通过类名找到HTML元素

<body>

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

HTML DOM改变HTML

1：改变HTML输出流

<script>
document.write(Date());
</script>

在 JavaScript 中，document.write() 可用于直接向 HTML 输出流写内容（绝对不要在文档加载完成之后使用 document.write()。这会覆盖该文档。）

2：改变HTML内容
修改 HTML 内容的最简单的方法时使用 innerHTML 属性。
如需改变 HTML 元素的内容，请使用这个语法：
document.getElementById(id).innerHTML=新的 HTML

<p id="p1">Hello World!</p>

<script>
document.getElementById("p1").innerHTML="新文本!";
</script>

实例讲解：
我们使用 HTML DOM 来获得 id=”header” 的元素，JavaScript 更改此元素的内容 (innerHTML)

3：改变HTML属性

<img id="image" src="smiley.gif">

<script>
document.getElementById("image").src="landscape.jpg";
</script>

实例讲解：
我们使用 HTML DOM 来获得 id=”image” 的元素，JavaScript 更改此元素的属性（把 “smiley.gif” 改为 “landscape.jpg”）

如需改变 HTML 元素的属性，请使用这个语法：
document.getElementById(id).attribute=新属性值

参考：http://www.runoob.com/js/js-htmldom.html

更好的自己520

关注

0
点赞
踩
0

收藏

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

通过id查找HTML元素<body>你好世界!该实例展示了 getElementById 方法!<script>x=document.getElementById("intro");document.write("文本来自 id 为 intro 段落: " + x.innerHTML + "");</scrip
复制链接

扫一扫