JS(二十) DOM(1)查

写在最前面

什么是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方法类似 但是选择一组

但是以上两种都不是事实的!!!!!!

未完待续.......