节点
Dom树由节点构成，节点分为多种类型,又有不同的方法
#节点属性:
Node.nodeName;//节点的名称
Node.nodeType;//节点类型
Node.nodeValue;//节点文本值
Node.children;//获取子元素集合
Node.parentElement;//获取父元素
Node.nextElementSibling;//下一个元素
Node.previousElementSibling;//上一个元素
Node.lastElementChild;//最后一个元素
Node.firstElementChild;//第一个元素
#常用操作:
Node.appendChild();//添加子节点
Node.hasChildNodes();//是否包含子节点
Node.cloneNode();//复制节点
Node.insertBefore();//在之前插入
Node.removeChild();//移除子节点
Node.replaceChild();//替换子节点
Node.contains();//是否包含子节点
Node.remove();//移除自身
Document节点
document是documentHTML的一个实例，也是window对象的一个属性，因此可以将document作为一个全局对象来访问。
# Document节点的属性:
document.documentElement;//html
document.head;//head
document.body;//body
//节点集合属性
document.links;//文档中 所有A标签
document.images;//文档中 所有图片元素
document.scripts;//文档中 所有脚本
document.forms;//文档中 所有表单元素
document.styleSheets;//文档中 所有样式表
//文档信息属性
document.Url;//文档网址
document.location;//文档location对象
document.title;//文档标题
document.cookie;//操作cookie
# Document节点的方法:
> 读写方法:
document.open();//新建并打开文档
document.close();//关闭当前文档
document.write();//向当前文档中写入内容
document.writeln();//向当前文档中写入内容并还行
> 查找节点:
document.querySelector();//传入一个css选择器,返回第一个匹配该选择器的元素节点
document.querySelectorAll();//传入一个css选择器,返回所有匹配该选择器的元素节点
document.getElementsByName();//选择拥有name属性的html元素
document.getElementsByTagName();//选择拥有指定标签的html元素
document.getElementById();//选择拥有指定ID的html元素
document.getElementsByClassName();//返回所有css名字符合的html元素
> 生成节点:
document.createElement();//新元素节点
document.createTextNode();//新文本节点
document.createAttribute();//新属性节点
> 事件方法:
document.addEventListener();//事件监听
document.removeEventListener();//取消事件监听
Element节点
Element 节点表示 HTML 文档中的元素。元素可包含属性、其他元素或文本
# Element节点属性:
> 特殊属性:
Element.attributes();//当前元素的所有属性
Element.id;//节点的id
Element.tagName;//节点的HTML标签
Element.className;//节点的class名字
Element.classList;//节点的class名字集合
Element.dataset;//节点的自定义属性
Element.innerHTML;//节点内插入内容(不包括自身)
Element.innerText;//节点内插入文本
Element.outerHTML;//节点(包括自身)替换成别的HTML代码
> 尺寸属性:
Element.clientHeight;//元素可见区域的高度
Element.clientWidth;//元素可见区域的宽度
Element.clientLeft;//元素节点左边框的宽度
Element.clientTop;//元素节点上边框的高度
Element.scrollHeight;//元素总高度
Element.scrollWidth;//元素总宽度
Element.scrollLeft;//元素距离左边的滚动距离
Element.scrollTop;//元素距离上边的滚动距离
Element.offsetHeight;//元素垂直高度
Element.offsetWidth;//元素水平宽度
Element.offsetLeft;//元素距离父元素左上角距离
Element.offsetTop;//返回水平位移
> 节点相关属性:
Element.children;//获取子元素集合
Element.parentElement;//获取父元素
Element.nextElementSibling;//下一个元素
Element.previousElementSibling;//上一个元素
Element.lastElementChild;//最后一个元素
Element.firstElementChild;//第一个元素
Element.offsetParent;//返回css属性不是static的父元素
# Element节点的方法
> 位置方法:
var box=document.getElementById('box');
box.getBoundingClientRect().top;// 元素上边距离页面上边的距离
box.getBoundingClientRect().right;// 元素右边距离页面上边的距离
box.getBoundingClientRect().bottom;// 元素下边距离页面上边的距离
box.getBoundingClientRect().left;// 元素左边距离页面上边的距离
box.getBoundingClientRect().width;// 元素自身的宽度
box.getBoundingClientRect().height;// 元素自身的高度
> 属性方法:
Element.setAttribute();//设置元素的属性
Element.getAttribute();//获取元素的属性
Element.removeAttribute();//移除元素的属性
Element.hasAttribute();//元素是否包含该属性
> 查找方法:
Element.querySelector();
Element.querySelectorAll();
Element.getElementsByTagName();
Element.getElementsByClassName();
> 事件方法:
Element.addEventListener();//事件监听
Element.removeEventListener();//取消事件监听
//ie8
Element.attachEvent();//事件监听
Element.detachEvent();//事件取消监听
//event对象
var event = event || window.event;
//target目标节点
var targe = event.target || event.srcElement;
> 其他
Element.insertAdjacentHTML("beforeBegin","<span>你好</span>");//插入到标签开始标记前
Element.insertAdjacentHTML("afterBegin","<span>你好</span>");//插入到标签开始标记后
Element.insertAdjacentHTML("beforeEnd","<span>你好</span>");//插入到标签结束标记前
Element.insertAdjacentHTML("afterEnd","<span>你好</span>"); //插入到标签结束标记后
