JS文档DOM对象模型总结

定义：文档对象模型DOM（DocumentObjectModel）定义访问和处理HTML文档的标准方法。DOM
将HTML文档呈现为带有元素、属性和文本的树结构（节点树）。

getElementsByName();
定义：返回带有指定名称的节点对象的集合
语法：document.getElementsByName(name);
注意：因为文档中的name属性可能不唯一，所有getElementsByName()方法返回的是元素的数组
示例：var mynode = document.getElementsByName("my");

getElementsByTagName();
定义：返回带有指定标签名的节点对象集合。返回元素的顺序是它们在文档中的顺序。
语法：document.getElementsByTagName(Tagname);
示例：var myLi = document.getElementsByName("li");

getAttribute();
定义：通过元素节点的属性名称获取属性的值。
语法：elementNode.getAttribute(name);

setAttribute();
定义：setAttribute()方法增加一个指定名称和值的新属性，或者把一个现有的属性设置为指定的值。
语法：elementNode.setAttribute(name,value);
示例：List[i].setAttribute("title","web前端");

节点属性：
nodeName:节点名称
1.元素节点的nodeName与标签名相同
2.属性节点的nodeName是属性的名称
3.文本节点的nodeName永远是text
4.文档节点的nodeName永远是document
nodeValue:节点的值
1.元素节点的nodeValue是undefined或null
2.文本节点的nodeValue是文本自身
3.属性节点的nodeValue是属性的值
nodeType:节点类型
元素：1
属性：2
文本：3
注释：8
文档：9

访问子节点childNodes
定义：访问选定元素节点下的所有子节点的列表，返回值可以看做是一个数组，它有length属性。
语法：elementNode.childNodes;

访问父节点parentNode
定义：获取指定节点的父节点
语法：elementNode.parentNode
示例：mylist.parentNode

访问兄弟节点
nextSibling属性可返回某个节点之后紧跟的节点（处于同一树层级中）
语法：nodeObject.nextSibling
previousSibling属性返回某个节点之前紧跟的节点（处于同级树层级中）
语法：nodeObject.previousSibling

插入节点appendChild()
定义：在指定节点的最后一个子节点列表之后添加一个新的子节点。
语法：appendChild(newnode)
示例：newnode.appendChild(newtext);

插入节点insertBefore()
定义：在已有的子节点前插入一个新的子节点
语法：insertBefore(newnode,node);

删除节点removeChild()
定义：方法从子节点列表中删除某个节点。如果删除成功，此方法返回被删除的节点，如果失败返回NULL
语法：nodeObject.removeChild(node)
示例：content.removeChild(childNode)

替换元素节点replaceChild()
定义：实现子节点（对象）的替换。返回被替换对象的引用
语法：node.replaceChild(newnode,oldnode)

创建元素节点createElement()
定义：方法可创建元素节点，此方法可返回一个Element对象
语法：document.createElement(tagName);
示例：var a = document.createElement("a");

创建文本节点createTextNode()
定义：方法创建的文本节点，返回新创建的Text节点。
语法：document.createTextNode(data)
示例：var element = document.createElement("p");
var textNode = document.createTextNode("i love javascript");
element.appendChild(textNode);
document.body.appendChild(element);

浏览器窗口可视区域大小
ie9+,Chrome,Firefox,Opera,Safair
window.innerHeight//浏览器窗口的内部高度
window.innerWidth//浏览器窗口的内部宽度
Ie5-8
document.documentElement.clientHeight表示HTML文档所在窗口的高度
document.documentElement.clientWidth表示HTML文档所在窗口的宽度
兼容性的javascript方案
var w = document.documentElement.clientWidth || document.body.clientWidth;
var h = document.documentElement.clientHeight || document.body.clientHeight;