JS的Document属性和方法小结

2023年6月10日下午2:57 • JavaScript

下面我将为大家详细讲解“JS的Document属性和方法小结”的完整攻略，包括什么是Document对象、常用的Document属性和方法，以及两条实例说明。

什么是Document对象

在JavaScript中，Document对象代表整个HTML文档，在代码中可以使用它来操作页面上的元素，例如获取元素、改变元素的样式和内容等。Document对象是浏览器中默认的全局对象，可以通过 document 来访问。

常用的Document属性和方法

属性

document.title：获取或设置文档标题
document.body：获取body元素
document.head：获取head元素
document.createElement(tagName)：创建指定标签名的元素
document.getElementById(id)：获取指定id的元素
document.getElementsByTagName(tagName)：获取指定标签名的元素集合
document.getElementsByName(name)：获取指定name属性的元素集合
document.getElementsByClassName(className)：获取指定类名的元素集合

方法

document.write()：向文档中写入HTML表达式或JavaScript语句，并显示结果
document.writeln()：与write()方法类似，不同之处在于它在输出内容结尾处插入一个换行符
document.open()：打开一个新文档，覆盖当前文档
document.close()：关闭当前已经打开的文档
各种DOM操作方法，例如：document.getElementById()、document.createElement()、document.appendChild()等

实例说明

下面通过两个实例来说明Document属性和方法的具体用法。

实例1：修改页面标题

<!DOCTYPE html>
<html>
<head>
    <title>Hello World</title>
    <script>
        function changeTitle() {
            document.title = "New Title";
        }
    </script>
</head>
<body onload="changeTitle()">
    <h1>Hello World</h1>
    <p>This is a simple page.</p>
</body>
</html>

在上面的代码中，我们通过JavaScript函数 changeTitle() 来修改网页的标题。在函数中，我们使用了 document.title 属性来获取或设置当前页面的标题。在HTML的body标签中，我们通过 onload 事件来调用这个函数，当页面加载完成后，就会自动执行这个函数并修改页面的标题为“New Title”。

实例2：动态渲染网页元素

<!DOCTYPE html>
<html>
<head>
    <title>Dynamic Rendering</title>
    <script>
        function renderElement() {
            var element = document.createElement("p");
            var textNode = document.createTextNode("This is a new paragraph.");
            element.appendChild(textNode);
            document.body.appendChild(element);
        }
    </script>
</head>
<body onload="renderElement()">
    <h1>Hello World</h1>
    <p>This is a simple page.</p>
</body>
</html>

在上面的代码中，通过JavaScript函数 renderElement() 来动态渲染一个paragraph（p）元素，并添加到文档中。在函数中，我们通过 document.createElement() 方法来创建一个paragraph元素，通过 document.createTextNode() 方法来创建并添加写入这个paragraph元素中的文本内容，最后我们通过 document.body.appendChild() 方法来将这个新创建的内容添加到文档中。

当页面加载完成后，即可执行 renderElement() 函数，这样就可以动态向网页中添加元素了。

以上两个实例均是 Document 属性和方法的常见应用场景，通过这些常用的属性和方法，我们可以更加方便的操纵页面元素，实现更多的交互效果。

本站文章如无特殊说明，均为本站原创，如若转载，请注明出处：JS的Document属性和方法小结 - Python技术站