JavaScript-DOM

DOM(Document Object Modal,文档对象模型)连接着web页面和JavaScript，
1. Document
2. Element
3. Attribute
4. Event

Doucment常用属性和方法

文档对象使得我们能使用脚本对载入到浏览器的HTML文件中的元素进行访问。
获取到常用的元素集合：

//获取HTML中所有的元素
document.all();
//获取所有表单元素
document.forms();
//获取所有图像元素
document.images();
//获取所有带链接的元素,一般为area或a元素
document.links();

查询元素：

//通过元素id进行查找
document.getElementById();
//通过元素类名进行查找
document.getElementsByClassName();
//通过元素标签名进行查找
document.getElementsByTagName();
//通过元素name属性进行查找
document.getElementsByName();
//通过css选择器方式获取符合条件的第一个元素
document.querySelector();
//通过css选择器方式获取符合条件的所有元素
document.querySelectorAll();

对象属性：

//获取body元素
document.body;
//获取html元素
document.documentElement;
//设置或获取到cookie
document.cookie;
//获取当前文档的标题
**document.title;**

方法:

//向文档中写入字符
document.write();
//向文档中写入字符,并在结尾添加上换行符
document.writeln();

Element常用属性和方法

Element就是文档中的一个个元素，元素包括元素节点、文本节点、注释节点。
通过Document所带有的查询元素的方法，我们便能获取到Element。

获取其他元素的属性：

//获取元素最近的上级定位元素
element.offsetParent;
//获取元素实际的上级元素
element.parentNode;
//获取元素的子节点包含文本节点
element.childNodes;
//获取元素的子节点不包含文本节点
element.children;
//获取元素的上一个同级元素
element.previousSibling;
//获取元素的下一个同级元素
element.nextSibling;
//获取元素的最后一个子元素
element.lastChild;
//获取元素的第一个子元素
element.firstChild;

常用DOM操作方法和属性:

//在元素末尾添加一个新元素
element.appendChild(newElement);
//将元素中的一个子元素移除
element.removeChild(sonElement);
//将元素克隆一份
element.cloneNode();
//在元素的已有元素之前插入一个新元素
element.insertBefore(newElement,existElement);
//将元素的一个已有元素替换成新元素
element.replaceChild(newElement,existElement)
//设置或获取元素的内容,包含标签
element.innerHTML
//设置获取元素中的文本内容
element.innerText
element.textContent
//上面两个随作用相同，但有点区别
//IE:innerText，FF:textContent。textContent不对空格进行合并

常用元素的属性:

//获取元素属性，返回NamedNodeMap类型({0:'id',length:1})
element.attributes;
//获取或设置元素的类名，初始值为''
element.className;
//获取或设置元素的内容是否可编辑,初始值为'inherit',返回值为string类型（'true','false'）
element.contentEditable;
//返回元素的内容可编辑状态,为boolean类型
element.isContentEditable;
//获取或设置元素的文本方向,未设置则为'',('ltr'或'rtl')
element.dir;
//获取元素的id,未设置则为''
element.id;
//获取元素的标签名，用于所有的节点类型
element.nodeName;
//作用同上，但只适用于元素节点
element.tagName;
/*获取元素的标签类型对于
元素节点，nodeType=1
对于文本节点，nodeType=3
对于属性节点，nodeType=2
对于注释元素，nodeType=8
对于文档元素，nodeType=9*/
element.nodeType;
//获取节点的值，元素节点返回null
element.nodeValue;
//返回根元素：document
element.ownerDocument
//设置或获取元素的样式
elment.style
//设置或获取元素的标题
element.title

元素大小位置相关属性:

//获取元素的可视宽度
element.clientWidth;
//获取元素的可视高度
element.clientHeight;
//获取元素的宽度(包括滚动条的宽，如果有)
element.offsetWidth;
//获取元素的高度(包括滚动条的高，如果有)
element.offsetHeight;
//获取元素的水平偏移位置(相对于offsetParent)
element.offsetLeft;
//获取元素的垂直偏移位置(相对于offsetParent)
element.offsetTop;
//获取元素的整体宽度
element.scrollWidth;
//获取元素的整体高度
element.scrollHeight;
//获取元素被卷曲的高度
element.scrollTop;
//获取元素被卷曲的宽度
element.scrollWidth;

下面这个方法用于获取元素在网页中的位置:

function getRootOffset(ele) {
    if (!ele || ele.nodeName === 'HTML') {
        return {top: 0,left: 0};
    }
    var offTop = 0,offLeft = 0;
    offTop = ele.offsetTop + getRootOffset(ele.offsetParent).top;
    offLeft = ele.offsetLeft + getRootOffset(ele.offsetParent).left;
    return {top: offTop,left: offLeft};
}

Attribute(属性节点)常用属性

获取到属性节点：

element.getAttributeNode(attrName);

属性节点的属性：

//获取属性名
attr.name
attr.nodeName
//获取属性值
attr.value
attr.nodeValue
attr.textContent

Event事件

自我感觉应该单独来记录一下