Document的常用属性

秋下1

已于 2023-12-28 17:02:11 修改

阅读量510

点赞数 18

文章标签： javascript 前端

于 2023-12-28 16:43:03 首次发布

本文链接：https://blog.csdn.net/zz14664656/article/details/135271035

版权

什么是Document

Document（文档）是指任何形式的记录或文件，包括文字、图像、声音、视频等。它可以是一篇文章、一份报告、一本书籍、一段代码、一张图片、一段音乐等等。文档通常用于记录和传递信息，可以用于存档、沟通、教育、娱乐等各种目的。文档可以以电子或纸质的形式存在，也可以通过计算机网络进行共享和传输。在计算机科学领域，文档通常指的是以某种结构化格式（如HTML、XML等）编写的文件，用于存储和展示信息。

为什么要使用Document

使用Document的原因有以下几点：

1. 组织和管理信息：Document可以帮助我们组织和管理大量的信息。通过将相关的信息归类和整理在一个文档中，我们可以更方便地查找和访问这些信息。

2. 共享和协作：Document是一种方便共享和协作的方式。我们可以将文档发送给其他人，让他们查看、编辑和评论。这样可以提高团队协作的效率，并确保每个人都能获得最新的信息。

3. 学习和教育：Document是学习和教育的重要工具。通过编写和阅读文档，我们可以分享知识、经验和观点。文档可以用来记录学习笔记、写作报告和教学课件等。

4. 维护和更新：Document可以帮助我们维护和更新信息。通过定期更新文档，我们可以保持信息的准确性和完整性。而且，Document可以帮助我们跟踪和记录变更历史，以便将来参考和审查。

总而言之，使用Document可以帮助我们组织、共享和维护信息，提高协作效率，并促进学习和教育。它是我们日常工作和学习中不可或缺的工具之一。

document 常用属性与方法有哪些？

1.document 常见的属性

body 提供对元素的直接访问。对于定义了框架集的文档，该属性引用最外层的

const body = document.body;
body.innerHTML = 'Hello World';

domain 返回当前文档的域名

var docDomain = document.domain;
document.domain = "example.com";

title 返回当前文档的标题

const title = document.title;
console.log(title); // 输出文档标题

document.title = 'New Title'; // 设置文档标题

URL 返回当前文档的 URL

const url = document.URL;
console.log(url); // 输出当前文档的URL地址

2.document常见的方法

write()：动态向页面写入内容

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script>
        //write动态向页面写入内容
        function fun()
        {
            document.write("你好javaScript")//点击后的效果
        }
    </script>
</head>
<body>
<input type="button" value="点击" onclick="fun()">
</body>
</html>

效果图:

createElement()：创建一个 HTML 标签对象

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

</head>
<body>
<button onclick="fun1()">点我</button>
<script>
    //createElement创建一个HTML标签对象
    function fun1() {
        var Tag=document.createElement("BUTTON")
        document.body.appendChild(Tag);
    }
</script>
</body>
</html>

效果图:

getElementById()：获得指定 id 的对象(只能获取一个)

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

</head>
<body>
<!--点击什么颜色变成什么颜色-->
<p id="bon">这里有一些文本</p>
<input type="button" value="蓝色" onclick="changeColor('blue')">
<input type="button" value="绿色" onclick="changeColor('chartreuse')">
<script>
    function changeColor(newColor) {
        const elem = document.getElementById("bon");
        elem.style.color = newColor;
    }
</script>
</body>
</html>

效果图:

getElementsByName()：获得之前 Name 的对象

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script>
        function getAllParaElems() {
            var allParas = document.getElementsByTagName("p");
            var num = allParas.length;//长度
            alert("There are " + num + " paragraph in this document");
        }
    </script>
</head>
<body>
<input type="button" value="点击" onclick="getAllParaElems()">
</body>
</html>

效果图:

body.appendChild()：向 HTML 中插入元素对象

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script>
        function fun()
        {
            // 创建一个新的 <h2> 元素节点
            var heading = document.createElement("h2");
            heading.textContent = "这是一个新的标题";//插入的对象

            // 将新的 <h2> 元素节点添加到 <body> 元素中
            document.body.appendChild(heading);

        }
    </script>
</head>
<body>
<input type="button" value="插入" onclick="fun()">
</body>
</html>

效果图:

总结

document常见的方法
write()：	动态向页面写入内容
createElement()：	创建一个 HTML 标签对象
getElementById()：	获得指定 id 的对象(只能获取一个)
body.appendChild()：	向 HTML 中插入元素对象

秋下1

关注

18
点赞
踩
10

收藏

觉得还不错? 一键收藏
1
评论
Document的常用属性

Document（文档）是指任何形式的记录或文件，包括文字、图像、声音、视频等。它可以是一篇文章、一份报告、一本书籍、一段代码、一张图片、一段音乐等等。文档通常用于记录和传递信息，可以用于存档、沟通、教育、娱乐等各种目的。文档可以以电子或纸质的形式存在，也可以通过计算机网络进行共享和传输。在计算机科学领域，文档通常指的是以某种结构化格式（如HTML、XML等）编写的文件，用于存储和展示信息。
复制链接

扫一扫