Java全栈学习：JavaScript---DOM编程

最新推荐文章于 2023-07-12 11:45:08 发布

Listener-1379

最新推荐文章于 2023-07-12 11:45:08 发布

阅读量127

点赞数

分类专栏： JavaScript

本文链接：https://blog.csdn.net/weixin_45965358/article/details/114218121

版权

JavaScript 专栏收录该内容

23 篇文章 0 订阅

订阅专栏

文章目录

一.DOM编程与BOM编程
二.DOM
三.DOM HTML
- 改变HTML内容
- 改变HTML属性
四.DOM CSS

一.DOM编程与BOM编程

在这里插入图片描述
简介
DOM：Document Object Model(文档对象模型，对网页中的文档对象进行增删改查)，HTML文档被当做一颗DOM树来看待。
BOM：Browser Object Model(浏览器对象模型，打开新的浏览器窗口，前进，后退，浏览器上的地址栏等)

联系与区别
DOM的顶级对象是document
BOM的顶级对象是window
BOM包含DOM

二.DOM

在这里插入图片描述
通过DOM,可以做下面的事情：

JavaScript 能够改变页面中的所有 HTML 元素
JavaScript 能够改变页面中的所有 HTML 属性
JavaScript 能够改变页面中的所有 CSS 样式
JavaScript 能够对页面中的所有事件做出反应

查找HTML：

通过 id 找到 HTML 元素(getElementById)
通过标签名找到 HTML 元素(getElementsByTagName)
通过类名找到 HTML 元素(getElementsByClassName)

三.DOM HTML

改变HTML内容

方法一：`document.getElementById(id).innerHTML=新的 HTML`

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style type = "text/css">
        #div1{
            background-color:bisque;
            width:500px;
            height:500px;
        }
    </style>
</head>
<body>
    <script type = "text/javascript">
        window.onload = function(){
            var divElt = document.getElementById("button1");
            divElt.onclick = function(){
                document.getElementById("div1").innerHTML = "<font color = 'blue'>Hello World</font>";
            }
        }
    </script>
    <input type = "button" id = "button1" value = "点击我"/><br/><br/>
    <div id = "div1"></div>
</body>
</html>

在这里插入图片描述

点击后变成了

在这里插入图片描述

方法二：document.getElementById(id).innerText=新的内容

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style type = "text/css">
        #div1{
            background-color:bisque;
            width:150px;
            height:150px;
        }
    </style>
</head>
<body>
    <script type = "text/javascript">
        window.onload = function(){
            var divElt = document.getElementById("button1");
            divElt.onclick = function(){
                //document.getElementById("div1").innerHTML = "<font color = 'blue'>Hello World</font>";
                document.getElementById("div1").innerText = "<font color = 'blue'>Hello World</font>";
            }
        }
    </script>
    <input type = "button" id = "button1" value = "点击我"/><br/><br/>
    <div id = "div1"></div>
</body>
</html>

在这里插入图片描述

可以看到两种方法都可以改变网页内容，但是innerText只能完全按照文本格式显示，不会解析HTML代码。但是innerHTML会解析HTML代码。

改变HTML属性

语法：document.getElementById(id).attribute=新属性值

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style type = "text/css">
        #div1{
            background-color:bisque;
            width:500px;
            height:500px;
        }
    </style>
</head>
<body>
    <script type = "text/javascript">
        window.onload = function(){
            var divElt = document.getElementById("button1");
            divElt.onclick = function(){
                document.getElementById("div1").value = "aaaaaaaaaaa";
            }
        }
    </script>
    <input type = "button" value = "设置文本框" id = "button1"/>
    <br/><br/>
    <input type = "button" id = "div1">
</body>
</html>

在这里插入图片描述

在这里插入图片描述
可以看到属性值value改变了。

四.DOM CSS

语法：

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

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style type = "text/css">
        #div1{
            background-color:bisque;
            width:150px;
            height:150px;
        }
    </style>
</head>
<body>
    <script type = "text/javascript">
        window.onload = function(){
            var divElt = document.getElementById("button1");
            divElt.onclick = function(){
                document.getElementById("div1").value = "aaaaaaaaaaa";
            }
            var divElt2 = document.getElementById("button2");
            divElt2.onclick = function(){
                document.getElementById("div1").style.backgroundColor = "blue";
            }
        }
    </script>
    <input type = "button" value = "设置文本框" id = "button1"/>
    <input type = "button" value = "设置颜色" id = "button2">
    <br/><br/>
    <input type = "button" id = "div1">
</body>
</html>

我们在之前的例子中加入一个按钮，通过点击按钮可以改变样式

在这里插入图片描述
点击过后，颜色变成如下的样式

Listener-1379

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Java全栈学习：JavaScript---DOM编程

文章目录一.DOM编程与BOM编程二.DOM三.DOM HTML改变HTML内容改变HTML属性四.DOM CSS一.DOM编程与BOM编程简介DOM：Document Object Model(文档对象模型，对网页中的文档对象进行增删改查)，HTML文档被当做一颗DOM树来看待。BOM：Browser Object Model(浏览器对象模型，打开新的浏览器窗口，前进，后退，浏览器上的地址栏等)联系与区别DOM的顶级对象是documentBOM的顶级对象是windowBOM包含DOM
复制链接

扫一扫

专栏目录