DOM基本操作

查看元素节点

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

  节点的类型

• 元素节点   —— 1
• 属性节点   —— 2
• 文本节点   —— 3
• 注释节点   —— 8
• document  —— 9
• DocumentFragment  ——  11

获取节点类型   nodeType

 

遍历节点树：

1. parentNode——父节点    最顶端document
2. childNodes——子节点们（直接子节点，空格-文本节点，注释节点，不包括孙子）
3. firstChild——第一个子节点
4. lastChild——最后一个子节点
5. nextSibling——后一个兄弟节点，previousSibing——前一个兄弟节点

所有浏览器都可用

 基于元素节点树的遍历：

1. parentElement——返回当前元素的父元素节点（IE不兼容） 顶端html
2. children——只返回当前元素的子节点
3. node.childElementCount === node.children.length  当前元素节点的子元素节点个数
4. firstElementchild——返回第一个元素节点（IE不兼容）
5. lastElementchild——返回第一个元素节点（IE不兼容）
6. nextElementSbling/previousElementSbling——返回后一个/前一个兄弟元素节点（IE不兼容）

在PC端，IE上访问元素节点，只能用children

节点的四个属性

1. nodeName——元素的标签名，以大写形式表示,只读
2. nodeValue——Text节点或Comment节点的文本内容,可读写
3. nodeType——该节点的类型，只读
4. attributes——Element 节点的属性集合

节点的一个方法  

1. Node.hasChildNodes();

DOM节点树

1. getElemengtById ——Document.prototype
2. getElemengtByName ——HTML.Document.prototype
3. getElemengtByTagName——Document.prototype和Element.prototype
4. body head ——HTML.Document.prototype
5. documentElement——Document.prototype   指代html
6. getElemengtByClassName querySelectorAll querySelector—document

• byId 只能document用
• byTagName       随便用
• byClassName     随便用
• document.body ——> body 
• document.head ——>head
• document.documentElement——>html 

 

节点的操作

增

• document.createElement();   创建元素节点
• document.createTextNode();   创建文本节点
• document.createComment();   创建注释节点
• document.createDocumentFragment();   创建文档碎片节点，防止多次重排

插

• PARENTNODE.appendChild()在某元素上添加子节点
• PARENTNODE.insertBefore(a,b)在某元素中的b前面添加a         

删

• parent.removeChild()剪切出来

替换

• arent.replaceChild(new,origin)剪切出来

Element节点的一些属性

• innerHTML       获取标签中的html代码，可以替换，可以添加标签
• innerText(火狐不兼容) / textContent(老版本IE不好使)    获取标签中的文本内容，可以用文本替换，不能添加标签

Element节点的一些方法

• ele.setAttribute(‘属性名’)                   获取元素的属性
• ele.getAttribute(‘属性名’,’属性值’)     设置元素的属性，可以用来更改class类名来更换css属性
• ele.className=‘’   直接添加类名