DOM的document对象属性与方法大全，初学必看

谦虚且进步

已于 2022-08-06 20:47:26 修改

阅读量698

点赞数

分类专栏： JavaScript 文章标签： javascript 开发语言 ecmascript

于 2022-06-15 13:38:36 首次发布

本文链接：https://blog.csdn.net/weixin_44992737/article/details/125269443

版权

JavaScript 专栏收录该内容

31 篇文章 2 订阅

订阅专栏

document对象是DOM中的老大，他指代的就是当前的html文档，即在内存中以树结构存储的html文档，也就是DOM树。换句话说，document是一个变量，他与DOM树的内存地址始终进行绑定。DOM对象由浏览器生成。

一、document对象属性一览

二，document对象属性详解

1，document.doctype属性

2，document.documentElement属性

3，document.head&document.body属性

三，document对象方法之获取元素节点篇

1，总览

2，document.getElementsByTagName()方法

2，document.getElementsByClassName()方法

3，document.getElementsByName()方法

4，document.getElementById()方法

5，document.querySelector()

6，document.querySelectorAll()

四，document对象方法之创建元素节点篇

1，总览

2，document.createElement()

3，document.createTextNode()

4，document.createAttribute()

一、document对象属性一览

二，document对象属性详解

1，document.doctype属性

即文档类型声明，HTML5一般为：<!DOCTYPE html>。如果我们没有声明文档类型，则属性值为null。

2，document.documentElement属性

console.log(document.documentElement)//打印出整个<html></html>之间的内容

3，document.head&document.body属性

4，document.forms属性

记录着所有表单节点，因为一个html中会存在多个form表单，所有至少一个。但是html标签和body只能有一个。如果有多个表单，则多个表单使用伪数组(容器)的形式进行储存。

5，document.images属性

6，document.scripts属性

7，document.domain属性

用于返回当前文档的域名。

三，document对象方法之获取元素节点篇

1，总览

2，document.getElementsByTagName()方法

见名知意，通过标签名字得到元素，他的参数是一个字符串，字符串内容为html的元素。这个方法返回一个容器对象HTMLCollection实例，类似于数组。

var paras = document.getElementsByTagName('p');//获取html文档中所有的p标签的内容
var allElements = document.getElementsByTagName('*');//获取html文档中所有的元素

2，document.getElementsByClassName()方法

通过html标签的class属性来找节点。如果多个标签的class名字相同，则都会被选择存入容器中。

<body>
    <div class="box1">1</div>
    <div class="box2">2</div>
    <div class="box3">3</div>
    <script>
        var divs = document.getElementsByClassName('box1')
        console.log(divs)
    </script>
</body>

3，document.getElementsByName()方法

通过html标签的name属性来找节点。

4，document.getElementById()方法

通过html标签的id属性来找节点。

5，document.querySelector()

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

var el1 = document.queryselector('.myclass');

6，document.querySelectorAll()

将所有找到的元素节点都返回，存在一个nodelist容器里面。

四，document对象方法之创建元素节点篇

1，总览

2，document.createElement()

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

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

3，document.createTextNode()

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

var newDiv = document.createElement('div');//创建一个div标签
var newcontent = document.createTextNode('He11o');//创建元素内容对象
newDiv.appendchild(newcontent);//向父元素中添加内容。

4，document.createAttribute()

document.createAttribute方法生成一个新的属性节点（Attr实例)，并返回它。

var root = document.getElementById('root');//
var it = document.createAttribute('name');//创建一个name属性，并与it进行绑定
it.value = 'it';//设置属性的值为it
root.setAttributeNode(it);//将属性添加到id为root的标签