您当前的位置: 首页 > 技术文章 > 前端开发

一文带你快速了解JS中HTML DOM 修改

作者: 时间:2022-05-24阅读数: 人阅读

 文章目录

 文章目录

前言

改变HTML输出流

具体示例

注意

改变 HTML的内容

具体示例

注意

改变HTML的属性

具体示例

改变HTML样式

具体示例


前言

大家好,我是遇见ice。

个人主页:遇见ice的博客

本文主要讲了改变HTML输出流、内容、属性、样式等内容。

走过路过的小伙伴们点个赞和关注再走吧,欢迎评论区交流。学一点,就会进步一点,就从这篇文开始吧!大家一起加油呀!笔芯

 一文带你快速了解JS中HTML DOM 修改(图1)


改变HTML输出流

HTML DOM 允许 JavaScript 改变 HTML 元素的内容。前边有提过document.write(text)是写入 HTML 输出流的方法,可用于直接向 HTML 输出流写内容。如下

具体示例

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>修改</title>

</head>

<body>

<script>

  document.write(Date());

</script>

</body>

</html>

一文带你快速了解JS中HTML DOM 修改(图2)

注意

但绝对不要在文档(DOM)加载完成之后使用 document.write()。这会覆盖该文档。注意看注释的解释

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>修改</title>

</head>

<body>

<!--运行在浏览器打开,会显示"一开始的内容",此时页面加载完成。点击按钮,引发相应事件响应执行,按钮执行的内容会覆盖一开始的内容。按钮1和按钮2两个当点击按钮时都能覆盖原来的内容-->

<button>按钮1</button>

<button onclick="function1()">按钮2</button>

<script>

  document.write("一开始的内容");

</script>

<script>

    //通过标签名获取元素,加[0]是因为getElementsByTagName("标签名")得到的是一个集合,而我们要的只是某个元素,也就是第一个。

    var button=document.getElementsByTagName("button")[0];

    button.onclick = function() {

        document.write("点击按钮1时执行的内容1");

    }

</script>

<script>

    function function1()

    {

        document.write("点击按钮2时执行的内容2");

    }

</script>

</body>

</html>

改变 HTML的内容

修改 HTML 内容的最简单的方法是使用 innerHTML 属性。

语法格式如下:

document.getElementById(id).innerHTML=”新的 HTML”

具体示例

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>DOM修改元素内容</title>

    <style type="text/css">

        #item1{}

        #item2{}

    </style>

</head>

<body>

<ul>

    <li id="item1">内容1</li>

    <li id="item2">

        <input type="text"value="click">

    </li>

</ul>

<script>

    //先输出没修改之前的内容,内容1

    document.write(document.getElementById("item1").innerHTML+"<br>");

    //经过修改HTML内容的操作

    document.getElementById("item1").innerHTML="修改后的内容1";

    //修改后再次输出可发现输出内容改变为,修改后的内容1

    document.write(document.getElementById("item1").innerHTML);

</script>

</body>

</html>

一文带你快速了解JS中HTML DOM 修改(图3)

注意

1.innerHTML不是只能改变例子中列表标签中的内容,<p>、<h1>等标签都可以。

2.例子中用getElementById(“”)来获取元素

改变HTML的属性

改变 HTML 的属性值两种方式:element.attribute = 新的 value

改变 HTML 元素的属性值:element.setAttribute(attribute,value)

注:attribute是属性,value是值

具体示例

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>DOM修改HTML属性</title>

    <style type="text/css">

        #image{}

        #image1{}

    </style>

</head>

<body>

<img id="image" src="https://blog.csdn.net/m0_70117514/article/details/img.png" width="200" height="160">

<img id="image1" src="https://blog.csdn.net/m0_70117514/article/details/img.png" width="300" height="200">

<script>

    // 第一种方式

    document.getElementById("image").src="https://blog.csdn.net/m0_70117514/article/details/螺狮粉.jpg";

    //第二个方式,属性记得加"",不然会出错哦  

    document.getElementById("image1").setAttribute("src","火锅.jpg");

</script>

</body>

</html>

一文带你快速了解JS中HTML DOM 修改(图4)

有点饿,就找了美食图片,更饿了呜呜,馋死我了!

改变HTML样式

HTML DOM 允许 JavaScript 改变 HTML 元素的样式。

可以使用如下语法:

document.getElementById(id).style.property=新样式

具体示例

<!DOCTYPE html>
<html lang="en">
<head>

    <meta charset="UTF-8">

    <title>改变HTML样式</title>

    <style type="text/css">

        #p1{color: red;}

        #p2{color: red;}

    </style>

</head>

<body>

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

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

<script>

    //只改变id为p2的样式,用p1做比较,设置两个一开始颜色为红色

    //设置颜色为蓝色

    document.getElementById("p2").style.color="blue";

    //设置字体为黑体

    document.getElementById("p2").style.fontFamily="黑体";

    //设置字体大小相对变大

    document.getElementById("p2").style.fontSize="larger";

</script>
</body>

</html>

一文带你快速了解JS中HTML DOM 修改(图5)一文带你快速了解JS中HTML DOM 修改(图6)一文带你快速了解JS中HTML DOM 修改(图7)  一文带你快速了解JS中HTML DOM 修改(图8)

本站所有文章、数据、图片均来自互联网,一切版权均归源网站或源作者所有。

如果侵犯了你的权益请来信告知我们删除。邮箱:licqi@yunshuaiweb.com

标签: javascript html DOM
加载中~
如果您对我们的成果表示认同并且觉得对你有所帮助可以给我们捐赠。您的帮助是对我们最大的支持和动力!
捐赠我们
扫码支持 扫码支持
扫码捐赠,你说多少就多少
2
5
10
20
50
自定义
您当前余额:元
支付宝
微信
余额

打开支付宝扫一扫,即可进行扫码捐赠哦

打开微信扫一扫,即可进行扫码捐赠哦

打开QQ钱包扫一扫,即可进行扫码捐赠哦

天猫38节现货-全屋智能