JavaWeb——JavaScript（3/4）-JS对象：BOM、DOM（Window、Location，概念、标准模型、获取元素对象）

qiyi.sky

于 2024-09-08 08:00:00 发布

阅读量684

点赞数 9

分类专栏： JavaWeb 文章标签： javascript 前端开发语言 java 学习笔记

本文链接：https://blog.csdn.net/li13437542099/article/details/140594265

版权

JavaWeb 专栏收录该内容

4 篇文章 0 订阅

订阅专栏

JS对象

BOM

介绍

概念：Browser Object Model 浏览器对象模型，允许JavaScript与浏览器对话，JavaScript 将浏览器的各个组成部分封装为对象。
组成：

Window：浏览器窗口对象
Navigator：浏览器对象
Screen：屏幕对象
History：历史记录对象
Location：地址栏对象

Window

介绍：浏览器窗口对象。
获取：直接使用window，其中window.可以省略。window.alert("Hello Window"); alert("Hello Window");
属性
- history：对 History 对象的只读引用。请参阅History 对象。
- location：用于窗口或框架的 Location 对象。请参阅Location 对象。
- navigator：对 Navigator 对象的只读引用。请参阅Navigator 对象。
方法
- alert()：显示带有一段消息和一个确认按钮的警告框。
- confirm()：显示带有一段消息以及确认按钮和取消按钮的对话框。
- setlnterval()：按照指定的周期（以毫秒计）来调用函数或计算表达式。
- setTimeout()：在指定的毫秒数后调用函数或计算表达式。

案例(1)

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>对象-BOM</title>
    </head>
    <body>
        
    </body>
    <script>
        //获取
        window.alert("Hello BOM");
        alert("Hello BOM Window");

        //方法
        // confirm - 对话框 - 确认：true， 取消：false
        var flag = confirm("您确认删除该记录吗？");
        console.log("flag: "  + flag);

        //定时器 - setInterval - 周期性的执行某一个函数
        var i = 0;
        setInterval(function(){
            i++;
            console.log("定位器执行了" + i + "次");
        },2000);

        //定时器 - setTimeout - 延迟指定时间执行一次
        setTimeout(function(){
            console.log('JS');
        },10 * 1000);
    </script>
</html>

Location

介绍：地址栏对象。
获取：使用window.location获取，其中 window.可以省略。
- window.location.属性；
- location.属性；
属性：
- href：设置或返回完整的URL。
- location.href = "https://www.baidu.com" ;

DOM

概念

概念：Document Object Model，文档对象模型。
将标记语言的各个组成部分封装为对应的对象：
- Document：整个文档对象
- Element：元素对象
- Attribute：属性对象
- Text：文本对象
- Comment：注释对象
JavaScript 通过DOM，就能够对HTML进行操作：
- 改变 HTML 元素的内容
- 改变 HTML 元素的样式（CSS）
- 对 HTML DOM 事件作出反应
- 添加和删除 HTML 元素

<!DOCTYPE html>
<html lang="en">
<head>
    <title>对象-DOM</title>
</head>
<body>
    <h1>DOM对象标题</h1>
    <a href="https://www.baidu.com">百度</a>
</body>
</html>

标准模型

DOM是W3C（万维网联盟）的标准，定义了访问 HTML 和 XML 文档的标准，分为3个不同的部分：

Core DOM - 所有文档类型的标准类型
1. Document：整个文档对象
2. Element：元素对象
3. Attribute：属性对象
4. Text：文本对象
5. Comment：注释对象
XML DOM - XML文档的标准模型
HTML DOM - HTML文档的标准模型
1. Image：<img>
2. Button：<input type='button'>

（一）innerHTML 属性

获取内容：使用 innerHTML 获取元素内容时，会返回元素内部包含的所有 HTML 标记和文本内容。无论是元素标签、属性，还是文本节点，都会被包含在返回的结果中。
设置内容：当使用 innerHTML 设置元素内容时，它会完全覆盖原有的内容。并且，如果设置的新内容中包含有效的 HTML 标记，浏览器会对这些标记进行解析和渲染，将其转换为对应的页面元素。

（二）innerText 属性

获取内容：通过 innerText 获取元素内容时，只会返回元素内部的文本内容，会忽略所有的 HTML 标签，不会对标签进行解析。
设置内容：使用 innerText 设置元素内容时，同样会覆盖原有的内容。并且，如果设置的内容中存在 HTML 标签，这些标签不会被浏览器解析为实际的 HTML 元素，而是会将这些标签作为普通的文本进行显示，即进行了转义处理。

获取元素对象

HTML中的Element对象可以通过Document对象获取，而Document对象是通过window对象获取的。
Document对象中提供了以下获取Element元素对象的函数：

根据id属性值获取，返回单个Element对象
```
var h1 = document.getElementById('h1');
```
根据标签名称获取，返回Element对象数组
```
var divs = document.getElementsByTagName('div');
```
根据name属性值获取，返回Element对象数组
```
var hobbys = document.getElementsByName('hobby');
```
根据class属性值获取，返回Element对象数组
```
var clss = document.getElementsByClassName('cls');
```
根据名称获取检索到的第一个选择器，返回单个Element对象
```
var a = document.querySelector("a");
```
根据名称获取检索到的第一个选择器，返回Element对象数组
```
var a = document.querySelectorAll("a");
```

案例(2)

通过DOM操作，完成如下效果实现。

点亮灯泡
将所有的div标签的标签体内容后面加上：very good
使所有的复选框呈现被选中的状态

原始代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>对象-DOM-案例</title>
</head>

<body>
    <img id="h1" src="img/off.gif">  <br><br>

    <div class="cls">天上人间</div>   <br>
    <div class="cls">灯泡程序员</div>  <br>

    <input type="checkbox" name="hobby"> 电影
    <input type="checkbox" name="hobby"> 旅游
    <input type="checkbox" name="hobby"> 游戏
</body>

<script>
    //1. 点亮灯泡 


    //2. 将所有div标签的内容后面加上



    //3. 使所有的复选框呈现选中状态
    

</script>
</html>

完整代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>对象-DOM-案例</title>
</head>

<body>
    <img id="h1" src="img/off.gif">  <br><br>

    <div class="cls">天上人间</div>   <br>
    <div class="cls">灯泡程序员</div>  <br>

    <input type="checkbox" name="hobby"> 电影
    <input type="checkbox" name="hobby"> 旅游
    <input type="checkbox" name="hobby"> 游戏
</body>

<script>
    //1. 点亮灯泡 : src 属性值
    var img = document.getElementById('h1');
    img.src = "img/on.gif";


    //2. 将所有div标签的内容后面加上: very good (红色字体) -- <font color='red'></font>
    var divs = document.getElementsByTagName('div');
    for (let i = 0; i < divs.length; i++) {
        const div = divs[i];
        div.innerHTML += "<font color='red'>very good</font>"; 
    }


    //3. 使所有的复选框呈现选中状态
    var ins = document.getElementsByName('hobby');
    for (let i = 0; i < ins.length; i++) {
        const check = ins[i];
        check.checked = true;//选中
    }

</script>
</html>

END

学习自：黑马程序员——JavaWeb课程

qiyi.sky

关注

9
点赞
踩
18

收藏

觉得还不错? 一键收藏
0
评论
JavaWeb——JavaScript（3/4）-JS对象：BOM、DOM（Window、Location，概念、标准模型、获取元素对象）

BrowserObjectModel 浏览器对象模型，允许JavaScript与浏览器对话，JavaScript 将浏览器的各个组成部分封装为对象。组成：Window：浏览器窗口对象Navigator：浏览器对象Screen：屏幕对象History：历史记录对象Location：地址栏对象。
复制链接

扫一扫

专栏目录