JS--Document对象

原创于 2024-07-03 14:10:17 发布

· 893 阅读

19 ·

版权

文章标签：

#javascript #前端 #html

javascript 专栏收录该内容

10 篇文章

订阅专栏

一、DOM(Document Object Model),文档对象模型

一个html文件就是一个document对象，文档中的每一个标签也都是一个对象，你可以把一个页面document对象及其下面的每一个标签对象组成的页面理解为dom树
document对象代表是当前的html页面，每个载入到浏览器的html文档都是一个document对象，页面中的每一个标签都是一个JavaScript对象，所以我们可以通过document对象来访问页面中的每一个元素
```
<script>
    let div01 = document.getElementById("show")
    div01.innerHtml = time
</script>

<div id = "show">
    
</div>
```
document对象是window对象的一个属性，可以通过window.document来使用，但是window对象可以省略

常用属性

URL：返回的是当前url

referrer：返回载入当前页面的url

<head>
    <meta charset="UTF-8">
    <title>one</title>
    <script>
        window.onload(alert(document.URL))
    </script>
</head>
<body>
    <button onclick = window.open('two.html')>登录</button>
    <h1>1111111</h1>
</body>
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script>
        let lastUrl = document.referrer;
        if (lastUrl == ""){
            document.write("请先登录，2秒后跳回登录页面")
            setTimeout("location.href = 'one.html'",2000)
        } else {
            alert(lastUrl)
            document.write("<h2>欢迎页面</h2>")
        }
    </script>
</head>

常用方法
- document.write()：向页面写内容
- document.getElementById("元素的id属性值")：通过元素的id属性值获取元素，返回值是一个值
- document.getElementsByName("元素的name属性值")：通过元素的name属性值获取元素，返回值是一个集合
- document.getElementsByTagName("元素的标签名")：通过元素的标签名获取元素，返回值是一个集合
- document.getElementsByClassName("元素的class属性值")：通过元素的class属性值获取元素，返回值是一个集合
- document.表单名.文本框名；//返回表单元素对象
操作对象
- 属性：
  - 获取对象的属性：let n = 对象.标签的属性名
```
let season = allSeason[i].value
```
  - 改变对象的属性：
    - 对象.属性名 = 属性值
- 标签的内容
  - 对象.innerText = '要设置的内容'//只能识别文本
  - 对象.innerHTML = '要设置的内容'//可以解析标签
  - 注意：赋值为设置值，不赋值为获取值
对象的style样式属性的显示和隐藏
- visibility
  - visible：显示
  - hidden：隐藏，隐藏元素后元素的位置保留
- display
  - block：以block显示，此元素将显示为块级元素
  - Inline：以inline显示，此元素将显示为行级元素
  - none：隐藏，隐藏元素后元素的位置不保留

复选框全选

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>复选框</title>
</head>
<body>
    <input type="checkbox" value="全选" onclick="checkAll()" id="chAll">全选 <br>
    <input type="checkbox" value="1" name="ch" onclick="check()"> 1 <br>
    <input type="checkbox" value="2" name="ch" onclick="check()"> 2 <br>
    <input type="checkbox" value="3" name="ch" onclick="check()"> 3

    <script>
        function checkAll() {
            //获取全选复选框
            let chAll = document.getElementById("chAll");
            //获取分项复选框
            let chs = document.getElementsByName("ch");
            //判断全选复选框的状态，如果是选中状态，则选中所有的分项，如果是取消选中状态，则取消分项的选中状态
            /*if (chAll.checked) {
                for (let i = 0; i < chs.length; i++) {
                    chs[i].checked = true;
                }
            } else {
                for (let i = 0; i < chs.length; i++) {
                    chs[i].checked = false;
                }
            }*/
            for (let i = 0; i < chs.length; i++) {
                chs[i].checked = chAll.checked;
            }
        }
        function check() {
            //获取全选复选框
            let chAll = document.getElementById("chAll");
            //获取分项复选框
            let chs = document.getElementsByName("ch");
            //分项选中的数目等于所有分项的总数，说明全选中
            let num = 0;
            for (let i = 0; i < chs.length; i++) {
                if (chs[i].checked) {
                    num++;
                }
            }
            if (num == chs.length) {
                chAll.checked = true;
            } else {
                chAll.checked = false;
            }
        }
    </script>
</body>
</html>