写在最前面

什么是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
**

  1. document代表的整个文档
  2.     如果你在script里面打印出document会在控制台显示
  3.     #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方法类似 但是选择一组
但是以上两种都不是事实的!!!!!!

未完待续…….