JavaScript这门语言通过Document类型来表示文档。在浏览器中，**用document来表示整个HTML或者XML文档**。**document节点是文档的根节点，其它节点都是它的子节点**。只要浏览器开始载入HTML文档，这个节点对象就存在了，可以直接调用。

document节点：

- 子节点：
对于HTML文档来说，document对象一般有两个子节点。
1)第一个是document.doctype，它是一个对象，包含了当前文档类型信息。
不同浏览器对这个节点的支持差别很大，开发中尽量避免使用。
2)第二个是document.documentElement，返回当前文档的根节点（root）。即节点。
- 文档属性：
1)document.head属性返回当前文档的节点
2)document.body属性返回当前文档的节点
这两个属性总是存在的，如果网页源码里面省略了或，浏览器会自动创造。document.body在开发中经常被用到。
3)document.links返回当前文档所有设定了href属性的a及area元素。
4)document.forms返回页面中所有表单元素form。
5)document.images返回页面所有图片元素（即img标签）。
6)document.embeds返回网页中所有嵌入对象，即embed标签。
以上4个属性返回的总是节点对象的集合，可以通过类似访问数组的方式进行访问。
如：var images = document.images; images[0];
- 文档的信息
1)document.documentURI和document.URL
这两个属性返回表示当前文档的网址的字符串，不同之处是documentURI属性是所有文档都具备的，URL属性则是HTML文档独有的。

2)document.domain
返回当前文档的域名。比如，某张网页的网址是 http://www.example.com/test.html ，domain属性就等于www.example.com。如果网页无法获取域名，该属性返回null。
3)document.lastModified
这个属性返回当前文档最后修改的时间戳，格式为字符串。注意，lastModified属性的值是字符串，所以不能用来直接比较，两个文档谁的日期更新，需要用Date.parse方法转成时间戳格式，才能进行比较。

4)document.referrer
属性返回一个字符串，获取上一页的网页地址，如果当前文档不是通过超链接访问的，则为 null。

5)document.title
返回当前文档的标题，该属性是可写的。可以用这个属性来更改网页的标题
6)document.characterSet
这个属性返回渲染当前文档的字符集，比如UTF-8、GBK等。
7)document.location
这个属性返回location对象，提供了当前文档的URL信息。以下是它的一些属性：

location对象，还有一些方法：

使用location对象可以实现页面跳转：document.location = ‘http://www.baidu.com’;或document.location.href = ‘http://www.baidu.com’;
用以上方法跳转页面，会在浏览器中生成浏览记录，点击返回按钮可以返回到上一个页面。如果不想让用户点击返回按钮返回，那么请用location的raplace方法。
// 跳转到新网址，并将取代掉history对象中的当前记录
document.location.replace(‘http://www.google.com’);

- document节点–文档读写：
document.open() 和 document.close()
document.open方法用于新建一个文档，供write方法写入内容。它实际是把当前文档的内容清除，然后重新写入内容。
document.close方法用于关闭open方法所新建的文档。一旦关闭，write方法就无法写入内容了。如果再调用write方法，就等同于又调用open方法，新建一个文档，再写入内容。
document.write()
document.write方法用于向当前文档写入内容。只要当前文档还没有用close方法关闭，它所写入的内容就会追加在已有内容的后面。
document.writeln()
document.writeln方法与write方法完全一致，除了会在输出内容的尾部添加换行符。但是writeln方法添加的是ASCII码的换行符，渲染成HTML网页时不起作用，即在网页上显示不出换行。只会被浏览器认为是空格。

注意：在实际开发中，调试代码应该尽量避免使用document.write这个方法。多用console.log();

- 操作节点：
1、通过标签的id来获取元素节点对象.getElementById
2、通过标签的name属性获取元素节点对象组getElementsByName
3、通过标签名获取元素节点对象组getElements ByTagName
4、通过类名获取元素节点对象组getElementsByClassName
5、获取属性节点对象 属性节点位于标签内部，但不是元素节点的子节点。属于元素节点的组成部分。要想获取到属性节点，必须先获取元素节点对象，再获取对应的属性节点对象

var elementNode = document.getElementById(“标签id”);
var attNode = elementNode.getAttributeNode(“要获取属性名”);
6、缓存DOM查询 以上这些在DOM树中查找节点的方法叫做DOM查询。当需要多次使用这个元素时，应该使用一个全局变量来保存这个查询结果。这样会节省浏览器再次从DOM中查找同一个元素的时间。

• 创建元素节点
• 1、document.createElement()
  该方法用于创建一个元素节点，该方法接受一个参数，就是要创建的标签的名称。如div，span，h1，大小写不区分，但不能写尖括号< > var newNode = document.createElement(‘span’);
  -创建属性节点
  2、document.createAttribute()
  方法生成一个新的属性对象节点，并返回它。createAttribute方法的参数name，是属性的名称。创建好的属性节点应该被设置给元素节点。 var attribute = document.createAttribute(name)
• 创建文本节点
  document.createTextNode()
  用来生成文本节点，参数为所要生成的文本节点的内容。
  var newNode = document.createTextNode(‘文本内容’);
  创建好的节点对象，都应该被添加到网页内的容器中去。
• 添加节点
• Node.appendChild()
  该方法接受一个节点对象作为参数，将其作为最后一个子节点，插入当前节点内部。该方法会将插入的节点对象作为结果返回，任何节点都不能同时出现在文档的多个地方，如果用appendChild方法把第一个节点对象添加进去，那么它会变成文档的最后一个节点。
  -操作节点
  Node.hasChildNodes()
  该方法返回一个布尔值，表示判断当前节点是否有子节点。如果有节点，就返回true，否则返回false。
  Node.insertBefore()
  如果要把某个节点放到childNodes列表中的某个位置而不是最后，就可以用这个方法。该方法接受两个参数，第一个参数是要插入的节点对象。第二个参数是目标节点，要插入的节点就会放在它前面。方法返回插入的新节点对象。
  DOM不存在insertAfter方法，要实现插入节点到某个节点后面的效果，需要insertBefore()方法结合nextSibling属性。
  Node.removeChild()
  该方法接受一个子节点作为参数，用于从当前节点移除该子节点。它返回被移除的子节点。
  Node.replaceChild()
  方法用于将一个新的节点，替换当前节点的某一个子节点。它接受两个参数，第一个参数是用来替换的新节点，第二个参数是将要被替换走的子节点。它返回被替换走的那个节点。
  Node.contains()
  方法接受一个节点作为参数，返回一个布尔值，表示参数节点是否为当前节点的后代节点。
  Node.isEqualNode()
  isEqualNode方法返回一个布尔值，用于检查两个节点是否相等。相等的节点，指的是两个节点的类型相同、属性相同、子节点相同。
  Node.normallize()
  该方法用于规范一个文档，由于解析器的实现或DOM操作等等原因，可能会出现连续的文本或者空白文本。该函数的作用就是删除空白文本，合并连续文本。

element节点属性和操作

element（元素）节点也是非常重要的节点类型。元素节点的nodeType属性都是1，但是不同HTML标签生成的元素节点是不一样的。JavaScript内部使用不同的构造函数，生成不同的Element节点，比如标签的节点对象由HTMLAnchorElement()构造函数生成，标签的节点对象由HTMLButtonElement()构造函数生成。因此，元素节点不是一种对象，而是一组对象。

1. 属性
   Element.attributes
   该属性返回一个类似数组的对象，其中包含了当前元素节点的所有属性节点对象。是元素节点的特有属性。
   Element.id
   该属性返回指定元素的id属性，该属性可读写。我们可以用脚本对元素的id值进行修改。
   Element.tagName
   属性返回指定元素的大写标签名，与nodeName属性的值是一致的。. mdiv.tagName == mdiv.nodeName
   Element.innerHTML
   属性返回该元素包含的HTML代码。该属性可读写，常用来为某个节点设置内容。如果将该属性设为空，等于删除所有的子节点删除。var mdiv= document.getElementById(“mdiv”); mdiv.innerHTML = “”; //清空id为mdiv内部的所有节点
   使用innerHTML属性时，如果文本节点中包含大于(>)小于(<)等字符，用脚本获取其值时会自动将其转换为实体形式。<、>所以，不能用innerHTML属性设置标签 如果插入的是文本，可以考虑用textContent属性代替。Element.outerHTML
   属性返回一个字符串，内容为指定元素节点的所有HTML代码，包括它自身和包含的所有子元素。该属性可读可写。
   Element.className
   className属性用来读写当前元素节点的class属性。它的值是一个字符串，如果元素属于多个类。那么每个class之间用空格分割。
   Element.classList
   与className属性类似，也是用来读写当前元素节点的class属性。但是它返回的是一个类似数组的对象，包含所有的类。其length属性返回类的数量。
   

element-盒子模型相关属性

1. Element.clientHeight 和 Element.clientWidth
   Element.clientHeight属性返回元素内部可见的高度，
   Element.clientWidth属性返回元素内部可见的宽度。
   对于有滚动条的元素来说，它们等于滚动条围起来的区域大小。这两个属性的值包括Padding、但不包括滚动条、边框 和Margin。（滚动条一般为17px） 对于整张网页来说，当前可见高度/宽度（即视口,用户能看见的部分）要从document.documentElement对象（即节点）上获取;因此**，在开发中，这两个属性一般用在使用脚本检测当前设备的显示宽度和高度**。然后根据不同的尺寸显示不同的网页。
2. Element.clientLeft 和 Element.clientTop
   Element.clientLeft属性等于元素节点左边框（left border）的宽度，Element.clientTop属性等于元素节点顶部边框的宽度，单位为像素。
   注意：如果元素的显示设为display: inline，它的clientLeft属性一律为0，不管是否存在左边框
3. Element.scrollHeight，Element.scrollWidth
   Element.scrollHeight属性返回元素内部的总高度，
   Element.scrollWidth属性返回元素内部的总宽度，
   可以理解成元素在垂直和水平两个方向上可以滚动的距离。它们都包括由于溢出容器而无法显示在网页上的那部分高度或宽度。这两个属性是只读属性。
   它们返回的是整个元素的高度或宽度，包括由于存在滚动条而不可见的部分。默认情况下，它们包括Padding，但不包括Border和Margin。

如果元素内部的内容没有溢出，那么Element.scrollHeight和Element.clientHeight是相等的，scrollWidth属性与clientWidth属性是相等的。如果存在溢出，那么scrollHeight属性大于clientHeight属性，scrollWidth属性大于clientWidth属性。

4. Element.scrollLeft，Element.scrollTop
   Element.scrollLeft属性表示网页元素的水平滚动条向右侧滚动的像素数量，Element.scrollTop属性表示网页元素的垂直滚动条向下滚动的像素数量。对于那些没有滚动条的网页元素，这两个属性总是等于0。这两个属性没有单位，但是可读可写，设置一定的值，会导致滚动条滚动一定的距离。
   如果要查看整张网页的水平的和垂直的滚动距离，要从document.body元素上读取。
   document.body.scrollLeft
   document.body.scrollTop

5. lement.offsetHeight，Element.offsetWidth
   Element.offsetHeight属性返回元素的垂直高度，Element.offsetWidth属性返回水平宽度。offsetHeight可以理解成元素左下角距离左上角的位移，offsetWidth是元素右上角距离左上角的位移。它们的单位为像素，都是只读。这两个属性值包括Padding和Border、以及滚动条。这也意味着，如果不存在内容溢出，Element.offsetHeight只比Element.clientHeight多了边框的高度。

// 视口高度
window.innerHeight // 包括滚动条
document.documentElement.clientHeight // 不包括滚动条
// 视口宽度
window.innerWidth // 包括滚动条
document.documentElement.clientWidth // 不包括滚动条
// 获取网页总高度最常用的手段
document.body.offsetHeight
document.body.scrollHeight
// 网页总宽度最常用的手段
document.body.offsetWidth
document.body.scrollWidth

element内部属性和节点属性

1. name
   该属性表示属性节点的属性名，等同于节点对象的nodeName

2. value
   该属性表示属性节点的属性名，等同于节点对象的nodeValue

   HTML元素节点的标准属性（即在标准中定义的属性），会自动成为元素节点对象的属性。
   比如 标签的href属性，标签的src属性，标签的action属性和method属性。对于这些标准属性，我们可以直接对其进行读写操作。

3. Element.setAttribute()
   该方法用于为当前元素节点新增属性。如果已经存在同名的属性，则相当于编辑已存在的属性。

4. Element.getAttribute()
   该方法以字符串的形式返回当前元素节点的指定属性。如果指定属性不存在，则返回null。

5. Element. hasAttribute()
   该方法返回一个布尔值，用于判断当前元素节点是否包含指定属性。

6. Element.removeAttribute()
   该方法用于从当前元素节点移除属性。

Text节点属性和操作

Text 节点表示 HTML 或 XML 文档 中的一系列纯文本。而纯文本出现在 HTML 和 XML 的元素和属性中，所以 Text 节点通常作为 Element 节点和 Attr 节点的子节点出现。同时，文本节点时没有子节点的。

1. 获取方式：
   因为text节点一般是元素节点的子节点，所以，我们可以使用元素节点的firstChild来获取

使用document. createTextNode(‘文本内容’);创建好之后要添加到容器中去。

使用构造函数直接创建，空格也会被视为文本节点 var text = new Text(“This is a text node”);
2. 属性：
data
这个属性和nodeValue属性返回值一样。用来改变和读取Text节点内容。
length
这个属性返回文本节点的文本长度。空格也算一个字符。
nextElementSibling 和 previousElementSibling
这两个方法获取文本节点隔壁的节点对象。