Html页面Dom对象之Document

Document对象是HTML页面的根节点，它表示整个HTML文档，类似于树的根节点。Document对象提供了许多方法和属性，用于操作和访问HTML文档。

一、方法

1. getElementById(id)：根据id属性获取元素对象。

2. getElementsByClassName(className)：根据类名获取元素对象集合。

3. getElementsByTagName(tagName)：根据标签名获取元素对象集合。

4. querySelector(selector)：根据选择器获取匹配的第一个元素对象。

5. querySelectorAll(selector)：根据选择器获取匹配的所有元素对象。

二、属性

1. doctype：返回文档类型。

2. title：获取或设置文档的标题。

3. URL：返回文档的完整URL。

4. domain：返回文档的域名。

5. characterSet：返回文档使用的字符集。

6. body：获取文档的body元素。

7. head：获取文档的head元素。

三、案例说明

1. 获取页面的标题：

```javascript

var title = document.title;

console.log(title);

```

2. 获取页面的URL：

```javascript

var url = document.URL;

console.log(url);

```

3. 获取页面的所有链接：

```javascript

var links = document.getElementsByTagName("a");

for(var i = 0; i < links.length; i++) {

console.log(links[i].href);

}

```

4. 修改页面的标题：

```javascript

document.title = "新标题";

```

5. 添加新的元素到页面：

```javascript

var div = document.createElement("div");

div.innerHTML = "这是一个新的div元素";

document.body.appendChild(div);

```

6. 绑定事件监听器：

```javascript

function handleClick() {

console.log("点击事件触发");

}

var button = document.getElementById("myButton");

button.addEventListener("click", handleClick);

```

以上只是一些常用的Document对象的方法和属性，还有更多其他可以使用的方法和属性。使用Document对象可以轻松地访问和操作HTML文档的内容，使得页面的开发更加方便和灵活。

壹涵网络我们是一家专注于网站建设、企业营销、网站关键词排名、AI内容生成、新媒体营销和短视频营销等业务的公司。我们拥有一支优秀的团队，专门致力于为客户提供优质的服务。

我们致力于为客户提供一站式的互联网营销服务，帮助客户在激烈的市场竞争中获得更大的优势和发展机会！