写在最前面
什么是DOM
- DOM -->Document Object Model
- DOM定义了表示和修改文档所需的方法。DOM对象即为宿主对象,由浏览器厂商定义,用来操作HTML和Xml功能的一类对象的集合。也有人称DOM是对HTML以及xml的标准编程接口
对节点的增删改查
- 查
- 查看元素节点
- document代表整个文档
- document.getElementById(元素id在IE8以下的浏览器,不区分id大小写,而且也返回匹配name属性的元素)
- getElementsByTagName()(标签名)
- getElementsByName()(注意,只有部分标签name可以可以生效,老版本的浏览器)(表单,表单元素,img,iframe)
- getElementsByClassName()(类名->ie8以及ie8以下的ie版本中没有,可以多个class一起)
- querySelector()(css选择器 在IE7和ie7以下的版本中没有)
- queryselectorall()(css选择器 在IE7和ie7以下的版本中没有)
document
document代表的整个文档
如果你在script里面打印出document会在控制台显示
#document
document.getElementById
<div id = 'one'></div>
var div = document.getElementById('one');
console.log(div);
//打印出<div id = 'one'></div>
getElementsByTagName
<div>1<div>
<div>2<div>
var div = document.getElementsByTagName('div');
console.log(div);
//打印出一个类数组[div,div]
//只要是系统给我们生成的都是类数组
如果要想单独一个就
var divOne = document.getElementsByTagName('div')[0];
getElementsByName
<img src='' name="demo">
var divOne = document.getElementsByName('demo')[0];
console.log(divOne);
//打印出<img src='' name="demo">
getElementsByClassName
<div class="demo"></div>
var demo = document.getElementsByClassName('demo')[0];
console.log(demo);
//打印出一个类数组<div class="demo"></div>
querySelector
<div>
<span>
<i></i>
</span>
</div>
var i = document.querySelector('div>span i');
//querySelector() 方法返回文档中匹配指定 CSS 选择器的一个元素
//queryselectorAll方法类似 但是选择一组
但是以上两种都不是事实的!!!!!!