document 对象下的方法

直接在DOM树中写入内容：write()方法：将括号里面的信息输出到浏览器的文档区，而且可以解析html标签。

window.document.write(“

我是document对象输出的内容

document.write(“

documentElement：返回当前元素节点的文档。

常用方法：document.documentElement //返回HTML的根节点，即 HTML 。

这个用法和 document.body 的区别是， document.body 返回的是 dom 中的 body 节点。

clientWidth,clientHeigth ，元素可见区的宽高

1.创建元素

document.createElement( 元素节点 )：创建一个元素节点，参数是创建的元素，追加给文档。创建的参数是标签名称。

（Tips：元素被创建出来后，需要插入到HTML文档中才会显示出来，否则仅仅只是创建了一个模板并未被使用）

var cDiv = document.createElement(‘div’); // 创建一个div元素

cDiv.innerHTML = ‘我是创建出来的div里面的内容’；//在div标签之间加入一段文字

2.添加或者追加元素

appendChild( 创建的元素 )：将创建的元素（只能算作子元素）追加给某个父元素的内部的最后位置。语法为 father.appendChild(创建的元素)，该方法是写在要创建元素的父元素后面。

document.body.appendChild( cDiv ); // 父元素可以是任意元素

var father = document.querySelector( ‘.father’ ); // 获取存在的元素，当作创建元素的父元素

3.插入元素

父节点.insertBefore( 新的节点，存在的节点 )； 在父节点内，把新元素插入到已存在的元素的前面。该方法是写在要创建元素的父元素后面。内含两个参数，第一个参数是要创建的元素，第二个是要插入在哪个标签元素之前。

// var father = document.querySelector(‘.father’); //获取元素，当作创建元素的父元素。

// var p1 = document.querySelector(‘.father p’); //获取存在的元素。

// father.insertBefore(cDiv, p1); //将创建的元素cDiv插入到father盒子的内部，p标签的前面。

4.删除元素：两种方式

1.删除内部的某个子元素： removeChild()

var father = document.querySelector(‘.father’); //父元素。

var p1 = document.querySelector(‘.father p’); //子元素。

father.removeChild(p1); //将father的子元素p1删除。

2.删除自身：remove()

var father = document.querySelector(‘.father’); //父元素。

father.remove();

5.克隆元素

元素.cloneNode(true) 克隆(复制)元素节点，如果参数为true，连同元素节点子元素一起克隆，如果为空或者false,只复制父元素本身。

var father = document.querySelector(‘.father’); //父元素。

var cloneFather = father.cloneNode(true); //如果参数为true，连同元素节点子元素一起克隆。

document.body.appendChild(cloneFather);

6.替换子元素元素

父节点.replaceChild(新元素, 被替换的元素)

var father = document.querySelector(‘.father’); //父元素。

var p1 = document.querySelector(‘.father p’); //子元素。

var cH1 = document.createElement(‘h1’); //创建h1

cH1.innerHTML = ‘我是创建出来的’;

father.replaceChild(cH1, p1); //cH1替换p1,全部替换包括里面的内容。