JS的Document类型

Document

HTMLDocument继承自Document。在浏览器中，document对象是HTMLDocument的一个实例，表示整个HTML页面。document对象是window对象的一个属性，因此可以直接调用

1.属性

documentElement 指向HTML页面中的<html>元素。

title 获取文档的标题

URL 获取URL

domain 取得域名，并且可以进行设置，在跨域访问中经常会用到。

referrer 取得链接到当前页面的那个页面的URL，即来源页面的URL。

links 获取文档中所有带href属性的a元素

body 指向body元素

images 获取所有img对象，返回HTMLCollection类数组对象

forms 获取所有form对象，返回HTMLCollection类数组对象

2.查找元素的方法

getElementById() 返回指定 id 的一个元素。

getElementsByTagName() 返回一个HTMLCollection(伪数组)，包含指定标签名的所有元素。

getElementsByClassName() 返回一个HTML集合HTMLCollection(伪数组)，包含指定类名的所有元素。

<div id="div1">我是div1</div><div class="div2">啊啊</div><div class="div2">我是div2</div><script>//查询id为div1的元素var div = document.getElementById('div1');console.log(div); //<div id="div1">我是div1</div>//返回所有包含div标签的元素var div1 = document.getElementsByTagName('div');console.log(div1); // HTMLCollection(3) [div#div1,div.div2,div.div2,div1:div#div1]//返回所有包含匹配div2的所有元素。var div2 = document.getElementsByClassName('div2')console.log(div2);//HTMLCollection(2) [div.div2,div.div2]</script>

document.querySelector() 返回文档中指定的CSS选择器的第一个元素

<div id="div1">div1</div>
<div id="div1">div1</div>
<script>
//将第一个 div 里的内容替换为helloworld
document.querySelector("#div1").innerHTML = "HelloWorld!";
</script>

3.添加元素的方法

document.createElement(element)

创建一个新的HTML元素，一般需要与appendChild() 或 insertBefore()方法联合使用。

<div id="div1">div1</div><script>var d1 = document.getElementById('div1')var p1 = document.createElement('p')p1.innerHTML = '哈哈哈'// 向div1中插入p1d1.appendChild(p1);
</script>

4.写入

document.write() 向文档写如文本或 HTML 表达式或 JavaScript 代码。

<script>document.write("<p>Helloworld!</p>");document.write("<a>helloworld</a>");</script>