Element节点 常用 API

Element节点

Element节点的属性

特性属性

Element.attributes  //返回当前元素节点的所有属性节点
Element.id          //返回指定元素的id属性，可读写
Element.tagName     //返回指定元素的大写标签名
Element.innerHTML   //返回该元素包含的HTML代码，可读写
Element.outerHTML   //返回指定元素节点的所有HTML代码，包括它自身和包含的的所有子元素，可读写
Element.className   //返回当前元素的class属性，可读写
Element.classList   //返回当前元素节点的所有class集合
Element.dataset     //返回元素节点中所有的data-*属性。

尺寸属性

Element.clientHeight   //返回元素节点可见部分的高度
Element.clientWidth    //返回元素节点可见部分的宽度
Element.clientLeft     //返回元素节点左边框的宽度
Element.clientTop      //返回元素节点顶部边框的宽度
Element.scrollHeight   //返回元素节点的总高度
Element.scrollWidth    //返回元素节点的总宽度
Element.scrollLeft     //返回元素节点的水平滚动条向右滚动的像素数值,通过设置这个属性可以改变元素的滚动位置
Element.scrollTop      //返回元素节点的垂直滚动向下滚动的像素数值
Element.offsetHeight   //返回元素的垂直高度(包含border,padding)
Element.offsetWidth    //返回元素的水平宽度(包含border,padding)
Element.offsetLeft     //返回当前元素左上角相对于Element.offsetParent节点的垂直偏移
Element.offsetTop      //返回水平位移
Element.style          //返回元素节点的行内样式

节点相关属性

Element.children                //包括当前元素节点的所有子元素
Element.childElementCount       //返回当前元素节点包含的子HTML元素节点的个数
Element.firstElementChild       //返回当前节点的第一个Element子节点  
Element.lastElementChild        //返回当前节点的最后一个Element子节点  
Element.nextElementSibling      //返回当前元素节点的下一个兄弟HTML元素节点
Element.previousElementSibling  //返回当前元素节点的前一个兄弟HTML节点
Element.offsetParent            //返回当前元素节点的最靠近的、并且CSS的position属性不等于static的父元素。

Element节点的方法

位置方法

getBoundingClientRect()  
// getBoundingClientRect返回一个对象，包含top,left,right,bottom,width,height // width、height 元素自身宽高
// top 元素上外边界距窗口最上面的距离
// right 元素右外边界距窗口最上面的距离
// bottom 元素下外边界距窗口最上面的距离
// left 元素左外边界距窗口最上面的距离
// width 元素自身宽(包含border,padding) 
// height 元素自身高(包含border,padding) 

getClientRects()   //返回当前元素在页面上形参的所有矩形。

// 元素在页面上的偏移量  
var rect = el.getBoundingClientRect()  
return {   
  top: rect.top + document.body.scrollTop,   
  left: rect.left + document.body.scrollLeft  
}

属性方法.

Element.getAttribute()     //读取指定属性  
Element.setAttribute()     //设置指定属性  
Element.hasAttribute()     //返回一个布尔值，表示当前元素节点是否有指定的属性  
Element.removeAttribute()  //移除指定属性

查找方法

Element.querySelector(selectors)      // 一组用来匹配Element后代元素的选择器selectors；必须是合法的css选择器
Element.querySelectorAll(selectors)   // 返回一个non-live的NodeList, 它包含所有元素的非活动节点，该元素来自与其匹配指定的CSS选择器组的元素。
Element.getElementsByTagName(tagName) // 返回一个动态的包含所有指定标签名的元素的HTML集合HTMLCollection
Element.getElementsByClassName()      // 返回一个即时更新的（live） HTMLCollection，包含了所有拥有指定 class 的子元素

事件方法

Element.addEventListener(type, listener, options)	//添加事件的回调函数  
Element.removeEventListener(type, listener[, options])	  //移除事件监听函数  
Element.dispatchEvent()		                       //触发事件
Element.preventDefault()		                 //阻止默认的点击事件执行

//ie8
Element.attachEvent(oneventName,listener)
Element.detachEvent(oneventName,listener)

// event对象  
var event = window.event||event;    

// 事件的目标节点  
var target = event.target || event.srcElement;

// 事件代理  
ul.addEventListener('click', function(event) {   
  if (event.target.tagName.toLowerCase() === 'li') {   
    console.log(event.target.innerHTML)   
  }  
});

其他

Element.scrollIntoView()   								//滚动当前元素，进入浏览器的可见区域

Element.insertAdjacentHTML(where, htmlString);		    //解析HTML字符串，然后将生成的节点插入DOM树的指定位置。
Element.insertAdjacentHTML('beforeBegin', htmlString);  // 在该元素前插入  
Element.insertAdjacentHTML('afterBegin', htmlString);   // 在该元素第一个子元素前插入 
Element.insertAdjacentHTML('beforeEnd', htmlString);    // 在该元素最后一个子元素后面插入 
Element.insertAdjacentHTML('afterEnd', htmlString);     // 在该元素后插入

Element.remove()  //用于将当前元素节点从DOM中移除
Element.focus()   //用于将当前页面的焦点，转移到指定元素上

CSS操作

类名操作

//ie8以下
Element.className                        //获取元素节点的类名
Element.className += ' ' + newClassName  //新增一个类名

//判断是否有某个类名
function hasClass(element,className){
  return new RegExp(className,'gi').test(element.className);
}

//移除class
function removeClass(element,className){
  element.className = element.className.replace(new RegExp('(^|\\b)' + className.split(' ').join('|') + '(\\b|$)', 'gi'),'');
}

//ie10 
element.classList.add(className)     //新增
element.classList.remove(className)  //删除
element.classList.contains(className)//是否包含
element.classList.toggle(className)  //toggle class

style操作

element.setAttribute('style','')               // 设置指定元素上的某个属性值

element.style.backgroundColor = 'red'

element.style.cssText                          //用来读写或删除整个style属性

element.style.setProperty(propertyName,value)  //设置css属性
element.style.getPropertyValue(property)       //获取css属性
element.style.removeProperty(property)         //删除css属性
// 操作非内联样式
//ie8
element.currentStyle[attrName]
//ie9+
window.getComputedStyle(el,null)[attrName] 
window.getComputedStyle(el,null).getPropertyValue(attrName)
//伪类
window.getComputedStyle(el,':after')[attrName]