JavaScript document对象

最新推荐文章于 2024-05-14 00:52:41 发布

blankです

最新推荐文章于 2024-05-14 00:52:41 发布

阅读量3.6k

点赞数 4

文章标签：前端

本文链接：https://blog.csdn.net/weixin_47782618/article/details/124367821

版权

1. 什么是document对象

document对象是文档的根节点，每张网页都有自己的document对象只要浏览器开始载入 HTML 文档，该对象就存在了，可以直接使用。

2. document对象的属性

2.1 document.doctype

document.doctype，指向<doctype>节点，即文档类型（Document Type Declaration，简写DTD）节点。HTML 的文档类型节点，一般写成<!DOCTYPE HTML>。如果网页没有声明 DTD，该属性返回null。

<!DOCTYPE html>
<html lang="en">
<head></head>
<body>
    <script>
        console.log(document.doctype);    
    </script>
    <!-- <!DOCTYPE html> -->
</body>
</html>

2.2 document.documentElement

document.documentElement属性返回当前文档的根节点（root），一般是<html>节点。

2.3 document.head

document.body属性指向<head>节点。

2.4 document.body

document.head属性指向<body>节点。

3. document对象的方法

3.1 document.write()

document.write方法用于向当前文档写入内容。

3.2 document.getElementsByTagName()

document.getElementsByTagName方法搜索 HTML 标签名，返回符合条件的元素。它的返回值是一个类似数组对象（HTMLCollection实例），可以实时反映 HTML 文档的变化。如果没有任何匹配的元素，就返回一个空集。

<!DOCTYPE html>
<html lang="en">
<head></head>
<body>
    <p>文本1</p>
    <p>文本2</p>
    <p>文本3</p>
    <script>
        console.log(document.getElementsByTagName("p"));
    </script>
    <!-- HTMLCollection(3) [p, p, p] -->
</body>
</html>

3.3 document.getElementsByClassName()

document.getElementsByClassName方法返回一个类似数组的对象（HTMLCollection实例），包括了所有class名字符合指定条件的元素，元素的变化实时反映在返回结果中。

<!DOCTYPE html>
<html lang="en">
<head></head>
<body>
    <div class="box">文本1</div>
    <div>文本2</div>
    <div class="box">文本3</div>
    <script>
        console.log(document.getElementsByClassName("box"));
    </script>
    <!-- HTMLCollection(2) [div.box, div.box]-->
</body>
</html>

3.4 document.getElementById()

document.getElementById方法返回匹配指定id属性的元素节点。如果没有发现匹配的节点，则返回null。

<!DOCTYPE html>
<html lang="en">
<head></head>
<body>
    <div>文本1</div>
    <div id="box">文本2</div>
    <div>文本3</div>
    <script>
        console.log(document.getElementById("box"));
    </script>
    <!-- <div id="box">文本2</div> -->
</body>
</html>

3.5 document.querySelector()和document.querySelectorAll()

document.querySelector方法接受一个 CSS 选择器作为参数，返回匹配该选择器的元素节点。如果有多个节点满足匹配条件，则返回第一个匹配的节点。如果没有发现匹配的节点，则返回null。

document.querySelectorAll方法返回所有匹配选择器的元素节点。

<!DOCTYPE html>
<html lang="en">
<head></head>
<body>
    <div>文本1</div>
    <div>文本2</div>
    <div>文本3</div>
    <script>
        console.log(document.querySelector("div"));
        <!-- <div>文本1</div> -->
        console.log(document.querySelectorAll("div"));
        <!-- NodeList(3) [div, div, div] -->
    </script>
</body>
</html>

3.6 document.createElement()

document.createElement方法用来生成元素节点，并返回该节点。

var newDiv = document.createElement('div');

3.7 document.createTextNode()

document.createTextNode方法用来生成文本节点（Text实例），并返回该节点。它的参数是文本节点的内容。

var newContent = document.createTextNode('Hello');

3.8 document.createAttribute()

document.createAttribute方法生成一个新的属性节点（Attr实例），并返回该节点。它的参数是属性的名称。

var attribute = document.createAttribute("class");

blankです

关注

4
点赞
踩
21

收藏

觉得还不错? 一键收藏
0
评论
JavaScript document对象

1. 什么是document对象document对象是文档的根节点，每张网页都有自己的document对象只要浏览器开始载入 HTML 文档，该对象就存在了，可以直接使用。2. document对象的属性2.1 document.doctypedocument.doctype，指向<doctype>节点，即文档类型（Document Type Declaration，简写DTD）节点。HTML 的文档类型节点，一般写成<!DOCTYPE HTML>。如果网页没有声明
复制链接

扫一扫