Java登陆第二十四天——JavaScriptBOM、DOM

合集 - Java登陆(70)

1.Java登陆第一天——Mysql安装2023-11-08 2.Java登陆第一天——Maven入门2023-11-08 3.Java登陆第二天——SQL之DDL2023-11-09 4.Java登陆第二天——SQL之DML2023-11-09 5.Java登陆第三天——SQL之DQL(一)基础查询、聚合函数、分组查询2023-11-10 6.Java登陆第四天——SQL之DQL(二)分页查询、多表查询、自连接2023-11-11 7.Java登陆第五天——SQL之DQL(三)子查询2023-11-12 8.Java登陆第六天——SQL之表复制，表去重，合并查询2023-11-14 9.Java登陆第六天——SQL之SQL(四)外连接2023-11-14 10.Java登陆第六天——SQL之约束2023-11-14 11.Java登陆第七天——SQL之事务2023-11-15 12.Java登陆第七天——SQL之事务隔离2023-11-16 13.Java登陆第八天——SQL之DCL2023-11-16 14.Java登陆第九天——JDBC(一)DriverManager、Connection、Statement2023-11-19 15.Java登陆第十天——JDBC(二)ResultSet2023-11-20 16.Java登陆第十一天——JDBC(三)PreparedStatement、CLOB、BLOB2023-11-21 17.Java登陆第十二天——网络编程(一)网络的概念2023-11-23 18.Java登陆第十二天——网络编程(二)InetAddress、Socket2023-11-23 19.Java登陆第十三天——网络编程(三)DatagramSocket2023-11-24 20.Java登陆第十四天——网络编程(四)韩顺平网络编程2023-11-25 21.Java登陆第十五天——网络编程(四)韩顺平网络编程2023-11-29 22.Java登陆第十六天——网络编程(四)韩顺平网络编程2023-11-30 23.Java登陆第十七天——网络编程(四)韩顺平网络编程完成2023-12-04 24.Java登陆第十七天——正则表达式2023-12-04 25.Java登陆第十八天——Java8之Lambda表达式2023-12-05 26.Java登陆第十九天——HTML规范与语法2023-12-06 27.Java登陆第二十天——HTML常用标签2023-12-07 28.Java登陆第二十一天——CSS2023-12-10 29.Java登陆第二十二天——JavaScript入门2023-12-11 30.Java登陆第二十三天——JavaScript对象、JSON、事件2023-12-12

31.Java登陆第二十四天——JavaScriptBOM、DOM2023-12-14

BOM

BOM指的是浏览器对象模型，在JS中可以通过BOM操作浏览器。菜鸟教程JSBOM

一般BOM指的都是window对象(window对象是浏览器自动生成的浏览器对象)菜鸟教程JSBOM更多对象

Window对象常用方法

方法名	描述
alert(message)	显示带有一段消息和一个确认按钮的警告框。
confirm(message)	显示带有一段消息以及确认按钮和取消按钮的对话框。
setTimeout(function, milliseconds)	在指定的毫秒数后调用某方法
setInterval(function, milliseconds)	循环在指定的毫秒数后调用某方法

alert(message)

显示带有一段消息和一个确认按钮的警告框。

栗子：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script>
      window.onload=function () {
          alert("onload是浏览器事件，加载完毕事件")
      }
    </script>
</head>
<body>

</body>
</html>

运行效果如下：

以下 HTML 标签支持 onload事件:

<body>, <frame>, <frameset>, <iframe>, <img>
<input type="image">, <link>, <script>, <style>

confirm(message)

显示带有一段消息以及确认按钮和取消按钮的对话框。

栗子：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script>
      window.onload=function () {
       var flag= confirm("confirm点击确认或取消总是会返回一个布尔值");
       console.log(flag);
      }
    </script>
</head>
<body>
</body>
</html>

运行效果如下：

点击确认

setTimeout(function, milliseconds)

在指定的毫秒数后调用某方法

栗子：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script>
      window.onload=function () {
        setTimeout(function () {
            console.log("使用时查阅文档即可，不用牢记每个方法")
        },2000)
      }
    </script>
</head>
<body>
</body>
</html>

运行效果如下：

setInterval(function, milliseconds)

循环在指定的毫秒数后调用某方法

栗子：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script>
      window.onload=function () {
        setInterval(function () {
            console.log("使用时查阅文档即可，不用牢记每个方法")
        },1000)
      }
    </script>
</head>
<body>
</body>
</html>

运行效果如下：

有关BOM再提一句，遇见学习即可，不用记忆！查询文档也是一个程序员的必修课

DOM

严格来说DOM其实也是属于BOM，只不过DOM的功能太丰富，所以分割出来了。

DOM指的是文档对象模型，在JS中可以通过DOM操作整个HTML页面。

BOM是浏览器对象，DOM是文档(HTML页面)对象。菜鸟教程JSDOM

解析

用户通过URL请求某资源，服务器响应用户请求返回html页面，用户的浏览器解析服务器返回的html页面，并自动生成window对象和document对象

URL名字是什么？统一资源定位符呀！服务器内部存储的都是各种资源！所以可以通过URL访问各项资源！！

在DOM中，万物皆节点

HTML中	DOM中
标签	元素节点(element)
标签属性	属性节点(Attribute)
标签内文本	文本节点(text)
注释	注释节点

DOM是树形结构

便于理解，逻辑上DOM是树形结构

document对象常用方法

方法	描述
document.getElementById(elementID)	通过ID获取元素节点
document.getElementsByClassName(classname)	通过CLASS名获取元素节点
element.getAttribute(attributename)	获取元素的某属性
element.innerHTML	获取或设置元素的内容
element.innerText	获取或设置元素的文本
element.style	获取或设置元素的样式属性(CSS)

菜鸟教程JSdocument方法
 菜鸟教程JS更多元素节点方法

document.getElementById(elementID)

document.getElementsByClassName(classname)

根据ID和CLASS获取元素节点

栗子：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script>
      window.onload=function () {
         console.log(document.getElementById("p1"));
         console.log("===================");
       var ps= document.getElementsByClassName("p2");
       //class是组，所以返回对象可能不止一个，需要遍历
          for (var i = 0; i <ps.length ; i++) {
              console.log(ps[i]);
          }
      }
    </script>
</head>
<body>
    <p id="p1">document万物皆节点</p>
    <p class="p2">标签等于元素节点、属性等于属性节点、文本等于文本节点</p>
</body>
</html>

运行效果如下：

element.getAttribute(attributename)

获取元素的某属性值

栗子：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script>
        window.onload = function () {
            var p1 = document.getElementById("p1");
            console.log(p1.getAttribute("id"));//id当然也是属性啊
        }
    </script>
</head>
<body>
<p id="p1">document万物皆节点</p>
</body>
</html>

运行效果如下：

element.innerHTML

element.innerText

栗子：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script>
        window.onload = function () {
            var p1 = document.getElementById("p1");
            console.log(p1.innerText);
            console.log(p1.innerHTML);
            console.log("=========");
           var s1= document.getElementById("s1");
           console.log(s1.innerText);
           console.log(s1.innerHTML);
        }
    </script>
</head>
<body>
<p id="p1">document万物皆节点</p>
<select id="s1">
    <option>1</option>
    <option>2</option>
    <option>3</option>
</select>
</body>
</html>

运行效果如下：

从运行结果可以发现区别，innerText是元素的文本，innerHTML则是元素的内容

使用innerText设置内容呢？

栗子：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script>
        window.onload = function () {
            var p1 = document.getElementById("p1");
            p1.innerText="123T";
            console.log("=========");
           var s1= document.getElementById("s1");
          s1.innerText="<option>123T</option>";
        }
    </script>
</head>
<body>
<p id="p1">document万物皆节点</p>
<select id="s1">
    <option>1</option>
    <option>2</option>
    <option>3</option>
</select>
</body>
</html>

运行效果如下：

使用innerHTML设置内容呢？

栗子：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script>
        window.onload = function () {
            var p1 = document.getElementById("p1");
            p1.innerHTML="321H";
            console.log("=========");
           var s1= document.getElementById("s1");
          s1.innerHTML="<option>321H</option>";
        }
    </script>
</head>
<body>
<p id="p1">document万物皆节点</p>
<select id="s1">
    <option>1</option>
    <option>2</option>
    <option>3</option>
</select>
</body>
</html>

运行效果如下：

更改元素的文本使用innerText。
更改元素的内容使用innerHTML。

element.style

栗子：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script>
        window.onload = function () {
            var p1 = document.getElementById("p1");
            console.log(p1.style);
            p1.style.color="red";
        }
    </script>
</head>
<body>
<p id="p1" style="font-size: 20px">document万物皆节点</p>
</body>
</html>

运行效果如下：

更多的方法不止于此，切记！！！查看文档！！！菜鸟教程JSDOM

posted @ 2023-12-14 00:22 rowbed 阅读(8) 评论(0) 编辑收藏举报

刷新页面返回顶部

登录后才能查看或发表评论，立即登录或者逛逛博客园首页

相关博文：

· Java登陆第二十三天——JavaScript对象、JSON、事件

· Java登陆第二十二天——JavaScript入门

· 2024-1-2bom对象

· JavaScriptBOM与DOM

· js中的Bom

阅读排行：
· TypeScript + Deepseek 打造卜卦网站：技术与玄学的结合
· Manus的开源复刻OpenManus初探
· AI 智能体引爆开源社区「GitHub 热点速览」
· 从HTTP原因短语缺失研究HTTP/2和HTTP/3的设计差异
· 三行代码完成国际化适配，妙~啊~

公告

昵称： rowbed
园龄： 2年5个月
粉丝： 1
关注： 7

+加关注

2025年3月

日

一

二

三

四

五

六

Java登陆第二十四天——JavaScriptBOM、DOM

BOM

Window对象常用方法

alert(message)

confirm(message)

setTimeout(function, milliseconds)

setInterval(function, milliseconds)

DOM

解析

在DOM中，万物皆节点

DOM是树形结构

document对象常用方法

document.getElementById(elementID)

document.getElementsByClassName(classname)

element.getAttribute(attributename)

element.innerHTML

element.innerText

使用innerText设置内容呢？

使用innerHTML设置内容呢？

element.style

公告

搜索

常用链接

合集

随笔分类

随笔档案

阅读排行榜

评论排行榜

最新评论