js中DOM总结

DOM概念

当网页被加载时，浏览器会创建页面的文档对象模型（Document Object Model）。  
DOM是“Document Object Model”（文档对象模型）的首字母缩写。

dom节点类型

元素类型	节点类型
元素element	1
属性attr	2
文本text	3
注释comments	8
文档document	9

节点属性

1.nodeName
定义和用法:nodeName 属性指定节点的节点名称。
如果节点是元素节点，则 nodeName 属性返回标签名。
如果节点是属性节点，则 nodeName 属性返回属性的名称。
文本节点的nodeName 永远  #text
对于其他节点类型，nodeName 属性返回不同节点类型的不同名称。

2.nodeValue
定义和用法：nodeValue 属性设置或返回指定节点的节点值。
注释：如果您希望返回元素的文本，请记住文本始终位于文本节点中，并且您必须返回文本节点的值（element.childNodes[0].nodeValue）。

3.nodeType
定义和用法：nodeType 属性返回以数字值返回指定节点的节点类型。
如果节点是元素节点，则 nodeType 属性将返回 1。
如果节点是属性节点，则 nodeType 属性将返回 2。
如果节点是文本节点，则 nodeType 属性将返回 3。
如果节点是注释节点，则 nodeType 属性将返回 8。

查找元素

1.getElementById() 方法可返回对拥有指定 ID 的第一个对象的引用。
2.getElementsByName() 方法可返回带有指定名称的对象的集合。
3.getElementsByTagName() 方法可返回带有指定标签名的对象的集合。（数组）
4.getElementsByClassName() 返回文档中所有指定类名的元素集合

元素属性

1.innerHTML 属性设置或返回标签的开始和结束标签之间的 HTML。
2.outerHTML.当前元素的开始标记和结束标记之间的所有文本和HTML标签。
3.innerText 设置或获取位于对象起始和结束标签内的文本 
4.outerText 设置(包括标签)或获取(不包括标签)对象的文本 
5.setAttribute() 方法添加指定的属性，并为其赋指定的值。如果这个指定的属性已存在，则仅设置/更改值。
6.tagName 属性返回被选元素的标签名。语法：elementNode.tagName
7.document.write()     向文档写 HTML 表达式 或 JavaScript 代码。

四者的区别

文档结构和遍历

  1、firstElementChild        第一个子元素节点
  2、lastElementChild        最后一个子元素节点
  3、nextElementSibling        下一个兄弟元素节点
  4、previousElementSibling     前一个兄弟元素节点
  5、childElementCount        子元素节点个数量
  6、children       获取所有的子元素节点，是一个只读属性，并且它在子节点变化时会实时更新。
  7、parentElement    获取父元素节点
注意：  这里的属性得到的都是元素节点 

节点操作

1.childNodes   获取当前元素对象的所有孩子节点
2.children    获取当前元素对象的所有子元素节点
3.createElement() createTextNode()  创建新的节点
4.appendChild()方法向节点的子节点列表的末尾添加新的子节点
5.插入节点   insertBefore(newchild,exichild) 
6.removeChild(exichild) 方法用于移除节点
7.replaceChild(newChild,exiChild) 方法 ，用于替换节点
8.cloneNode() 方法创建指定节点的精确拷贝。
9.createAttribute() 创建新的 Attr 节点。

DOM高级