javaScript Dom操作（上）

    什么是DOM

1. DOM — > Document Object Model
2. 定义了表示和修改文档所需的对象、这些对象的行为和属性以及这些对象之间的关系。DOM对象即为宿主对象，由浏览器厂商定义，用来操作html和css功能的一类对象的集合。也有人称DOM是对HTML以及XML的标准编程接口。

    DOM基本操作

        查询

• document代表整个文档
• document.getElementById() //元素id 在Ie8以下的浏览器，不区分id大小写，而且也返回匹配name属性的元素
• getElementsByTagName() // 标签名
• getElementByName(); //，需注意，只有部分标签name可生效（表单，表单元素，img，iframe）
• getElementsByClassName() // 类名 -> ie8和ie8以下的ie版本中没有，可以多个class一起
• querySelector() // css选择器   在ie7和ie7以下的版本中没有  而且不能实现动态更改
• querySelectorAll() // css选择器 在ie7和ie7以下的版本中没有 而且不能实现动态更改

       节点的类型

• 元素节点   —— 1
• 属性节点   —— 2
• 文本节点   —— 3
• 注释节点   —— 8
• document  —— 9
• DocumentFragment  ——  11 
• 获取节点类型： node.nodeType 

    节点的几个属性

• nodeName // 元素的标签名，以大写形式表示,只读
• nodeValue // Text节点或Comment节点的文本内容,可读写
• nodeType // 该节点的类型，只读
• attributes // Element 节点的属性集合
• innerHTML
• innerText(火狐不兼容) / textContent(老版本IE不好使) //  注意使用这个两个方法的时候会覆盖之前的所有内容, 谨慎使用，并且建议使用innerText

    Element节点的一些方法

• ele.setAttribute()
• ele.getAttribute()
• Node.hasChildNodes();

•  

    遍历节点树(这里说的是所有的节点类型，兼容性好)

• parentNode -> 父节点  (最顶端的parentNode为#document);
• childNodes -> 子节点们   // 包括所有的节点类型
• firstChild -> 第一个子节点
• lastChild -> 最后一个子节点
• nextSibling->后一个兄弟元素 previousSibling->前一个兄弟元素

     基于元素节点树的遍历(遍历的是元素节点，兼容性不是很好)

• parentElement -> 返回当前元素的父元素节点 (IE不兼容)
• children -> 只返回当前元素的元素子节点
• node.childElementCount  === node.children.length当前元素节点的子元素节点个数(IE不兼容)
• firstElementChild -> 返回的是第一个元素节点(IE不兼容)
• lastElementChild -> 返回的是最后一个元素节点(IE不兼容)
• nextElementSibling / previousElementSibling ->返回后一个/前一个兄弟元素节点（IE不兼容)

    增加

• document.createElement();
• document.createTextNode();
• document.createComment();
• document.createDocumentFragment();

    插入

• PARENTNODE.appendChild();
• PARENTNODE.insertBefore(a, b):

    删除

• parent.removeChild();
• child.remove()

    替换

• parent.replaceChild(new, origin);

  DOM树

        

上图中展示了DOM的结构，其中每一个都是一个对象, 通过原型链的方式继承属性和方法, 在使用的时候要分清楚哪些方法能用哪些方法不在此原型链上不能使用。