JavaScript HTML DOM 文档

JavaScript HTML DOM 文档

1、document.body
在document中有一个属性body， 它会保存的是body的引用。

2、document.documentElement
保存的是html的根标签

3、document.all
代表页面中所有的元素

var all = document.all;
console.log(all.length);

4、getElementsByClassName（）可以根据class属性值获取一组元素节点对象；
但是该方法不支持IE8及以下浏览器

5、document.querySelector()
需要一个选择器的字符串作为参数，可以根据一个CSS选择器来查询一个元素节点对象
虽然IE8没有getElementsByClassName（）但是可以使用querySelector（）
使用该方法总会返回唯一的一个元素，如果满足条件的元素有多个，你们他只会返回第一个元素

6、document.querySelectorAll()
该方法和querySelector()方法类似，不同的是它会将符合条件的元素封装到一个数组中返回。
即使符合条件的元素只有一个，也会返回数组。

7、document.createElement()
可以用于创建一个元素节点对象，
它需要一个标签名作为参数，将会根据改标签名创建元素节点的对象，并将创建好的对象返回值返回。

// 
var li = document.createElement();

8、document.createTextNode()
可以用来创建一个文本节点对象
需要一个文本内容作为参数，将会根据该内容创建文本节点，并将新的节点返回。

// 创建'广州'文本节点
var GZText = document.createTextNode("广州");

8、appendChild()
向一个父节点中添加一个新的子节点
用法：父节点.appendChild(子节点）；
z

// 将GZText 设置为li的子节点
li.appendChild(GZText);

9、insertBefore()

可以在指定的子节点前插入新的子节点
用法：父节点.insertBefore(新节点，旧节点）；

10、replaceChild()

可以使用指定的子节点替换已有的子节点
用法：父节点.replaceChild(新节点，旧节点）；

11、removeChild()

可以删除一个子节点
用法：
（1）父节点.removeChild(子节点）；
（2）子节点.parentNode.removeChild(子节点）；

12、innerHTML（）
读取HTML中元素，也可以实现DOM的增删改查，