Document类型
Javascript通过使用Document类型表示文档。在浏览器中，document对象是HTMLDocument的一个实例，表示整个HTML页面。document对象是window对象的一个属性可以直接调用。HTMLDocument继承自Document。
1.属性
documentElement ：始终指向HTML页面中的<html>元素。
body ：直接指向<body>元素
doctype ：访问<!DOCTYPE>, 浏览器支持不一致，很少使用
title ：获取文档的标题
URL ：取得完整的路径URL
domain ：取得域名，并且可以进行设置，在跨域访问中经常会用到。
referrer ：取得链接到当前页面的那个页面的URL，即来源页面的URL。
images ：获取所有的img对象，返回HTMLCollection类数组对象
forms ：获取所有的form对象，返回HTMLCollection类数组对象
links ：获取文档中所有带href属性的<a>元素
<script>
window.onload=function(){
//document-*-表示整个html文档页面
console.log(document)
// html元素
console.log(document.documentElement);
// body元素
console.log(document.body);
// img元素
console.log(document.images)
// form元素
console.log(document.forms);
// a标签 带有href属性的
console.log(document.links);
// 获取域名 --只能通过服务器打开
console.log(document.domain,'111');
// 获取文档头信息
console.log(document.doctype);
// 获取文档标题
console.log(document.title);
// 获取URL
console.log(document.URL);
// 获取页面来源地址--只能通过服务器打开
console.log(document.referrer,'222');
}
</script>2.DOM编程界面
在 DOM 中，所有 HTML 元素都被定义为对象，编程界面是每个对象的属性和方法。
属性是获取或设置的值（比如改变 HTML 元素的内容）。
方法是您能够完成的动作（比如添加或删除 HTML 元素）。
<body>
<p id="demo"></p>
<script>
//getElementById是方法
//表示通过id访问元素，
var p1 = document.getElementById("demo");
//innerHTML是属性 用于设置或获取元素节点的内容
//向p标签插入内容
p1.innerHTML = "Hello World!";
</script>
</body>
3.方法
3.1查找元素
（1）getElementById()
通过元素 id 来查找元素，返回匹配指定id的一个元素
用法：document.getElementById(id名)
（2）getElementsByTagName()
通过标签名来查找元素，返回一个伪数组，包含匹配指定标签名的所有元素。
用法：document.getElementsByTagName(name)
（3）getElementsByClassName()
通过类名来查找元素，返回一个伪数组，包含匹配指定类名的所有元素
用法：document.getElementsByClassName(name)
（4）document.querySelector()
返回文档中匹配指定的CSS选择器的第一元素
用法：document.querySelector()
<div id="div1">我是一个div</div>
<div id="div1">我是一个div</div>
<script>
console.log(document.querySelector("#div1"));//<div id="div1">
// 替换第一个匹配元素的文本内容
document.querySelector("#div1").innerHTML = 'Hollo'
</script>（5）document.querySelectorAll()
HTML5中引入的新方法，返回文档中匹配的CSS选择器的所有元素节点列表
用法：document.querySelectorAll()
<div class="div1">我是一个div</div>
<div class="div1">我是一个div</div>
<script>
console.log(document.querySelectorAll(".div1"));//NodeList [ div.div1, div.div1 ]
</script>（6）其他方法
document.createElement(element)
用于创建新的HTML元素，与appendChild() 或 insertBefore()方法联合使用可添加元素
<script>
// 创建元素节点p
var p = document.createElement('p');
// 向p标签插入内容
p.innerHTML = '我是一个p标签';
// 将节点插入到body中
document.body.appendChild(p);
</script>document.write()
向文档写入文本或 HTML 表达式 或 JavaScript 代码。
<script>
document.write("<p>Hello world!</p>");
document.write("Hello Weekend!");
</script>Element类型
Element 对象对应网页的 HTML 元素。每一个 HTML 元素在 DOM 树上都会转化成一个Element节点对象。
1.属性
attributes：返回一个与该元素相关的所有属性的集合。
classList：返回该元素包含的 class 属性的集合。
className：获取或设置指定元素的 class 属性的值。
clientHeight：获取元素内部的高度，包含内边距，但不包括水平滚动条、边框和外边距。
clientTop：返回该元素距离它上边界的高度。
clientLeft：返回该元素距离它左边界的宽度。
clientWidth：返回该元素它内部的宽度，包括内边距，但不包括垂直滚动条、边框和外边距。
innerHTML：设置或获取 HTML 语法表示的元素的后代。
tagName：返回当前元素的标签名。
2.常用方法
element.innerHTML
属性设置或获取HTML语法表示的元素的后代。改变元素的 innerHTM
<div id="div1">我是一个div</div>
<script>
//获取节点的引用
var d1 = document.getElementById('div1');
// 设置新的文本内容
d1.innerHTML = '我是新的内容'
</script>
// 获取节点内部内容得方式和区别
// 1.innerHtml
// 2.innerText
// 3.textContent
console.log(body.innerHTML);//hello<div>one</div><!-- 我是一个注释 -->world
console.log(body.innerText);//hello one world
console.log(body.textContent);//hellooneworld
<body>
hello<div>one</div><!-- 我是一个注释 -->world
</body>element.attribute = value
修改已经存在的属性的值
<div id="div1">123</div>
<script>
var d1 = document.getElementById('div1');
// 直接将已经存在的属性进行修改
d1.id = 'div2';
</script>element.getAttribute()
返回元素节点的指定属性值。获取自定义属性
<div id="div1">我是一个div</div>
<script>
var div = document.getElementById('div1');
console.log(div.getAttribute('id')); // div1
</script>element.setAttribute(attribute, value)
把指定属性设置或更改为指定值。
<div id="div1">我是一个div</div>
<script>
var d1 = document.getElementById('div1');
// 设置div1的class为divCla
d1.setAttribute('class', 'divCla');
</script>element.style.property
设置或返回元素的 style 属性。
<div id="div1">我是一个div</div>
<script>
var d1 = document.getElementById('div1');
// 获取div1的style样式
console.log(d1.style);
// 设置div1的style
d1.style.backgroundColor = 'red';
</script>Text类型
Text 节点由 Text 类型表示，包含按字面解释的纯文本，也可能包含转义后的 HTML 字符，但不含 HTML 代码。
1.属性及方法
Length 文本长度
appendData(text) 追加文本
deleteData(beginIndex,count) 删除文本
insertData(beginIndex,text) 插入文本
replaceData(beginIndex,count,text) 替换文本
splitText(beginIndex) 从beginIndex位置将当前文本节点分成两个文本节点
document.createTextNode(text) 创建文本节点，参数为要插入节点中的文本
substringData(beginIndex,count) 从beginIndex开始提取count个子字符串
综合案例
<div id="container"></div>
<script>
// 创建文本节点
var textNode = document.createTextNode('Hello World!');
// 获取container
var div = document.getElementById('container');
// 将文本节点插入container
div.appendChild(textNode);
// 替换文本
textNode.replaceData(0,5,'Hi');
// 插入文本
textNode.insertData(0, 'Hello')
</script>