1 文档结构(元素关系)
1.1 节点树
childNodes 获取所有子节点组成的集合,是个Nodelist类型的对象,成员可以有文本注释
firstChild 获取第一个子节点
lastChild 获取最后一个子节点
parentNode 获取父节点
previousSibling 获取前一个兄弟节点
nextSibling 获取后一个兄弟节点
1.2 元素树
children 获取所有子元素组成的集合,是个HTMLCollection类型的对象,成员只能有元素
firstElementChild 获取第一个子元素
lastElementChild 获取最后一个子元素
parentElement 获取父元素
previousElementSibling 获取前一个兄弟元素
nextElementSibling 获取后一个兄弟元素
注:
document
是html
的父节点但不是父元素,因为document
不是元素;其他对象的父节点=父元素。
2 元素的属性操作
2.1 读写内置属性
元素对象.属性; //可读可写
注:HTML标签有什么内置属性,元素对象也有什么属性。(是HTML的属性,不是CSS属性!)
2.2 读写自定义属性
//获取属性值
元素对象.getAttribute('属性名');
//修改属性的值 如果是不存在的属性会添加到标签上
元素对象.setAttribute('属性名','属性值');
注:
getAttribute
和setAttribute
本质上是读写写在HTML标签上的属性,不管是内置属性还是自定义属性,都可以读写。
2.3 data-*形式的自定义属性(W3C规定)
<img data-name="" data-user-address="">
// 可读可写,自动转为小驼峰,对应HTML中的-语法
imgNode.dataset.name;
imgNOde.dataset.userAddress;
3 元素的CSS样式操作
3.1 读写行内样式
//可读可写,只能读取行内的样式,使用该方式设置css样式也会设置到行内。
元素对象.style.属性名;
3.2 读取计算样式
//只读,.window可省,行内、内嵌、外链式都可读取,如果在多处设置了同一种样式,则根据优先级计算读取哪个
window.getComputedStyle(元素对象); //返回值是一个对象,对象中的属性和属性值是作用在该元素对象上的所有样式(即使没有设置某样式,也会返回其默认值)
window.getComputedStyle(元素对象).属性名; //单独读取某样式
/**
* 兼容性写法, 兼容IE8
* @param element ele 要获取样式的元素对象
* @param string attrName CSS属性名
* @return attrName的值
*/
function getStyle(ele, attrName) {
// 判断是否支持 getComputedStyle
if (window.getComputedStyle) {
// 非IE 和 IE9+
return getComputedStyle(ele)[attrName];
} else if (ele.currentStyle) {
// IE8 以及以下
return ele.currentStyle[attrName];
}
}
3. 3 通过设置元素的类名操作样式
当样式较多时,推荐将样式设置在CSS类名选择器中,再通过JavaScript给元素对象添加类名或删除类名来控制元素样式。
① className
元素对象.className; //可读可写,对应HTML元素的内置属性class
② classList
元素对象.classList; //得到一个类数组对象,是该元素所有class值的列表,该属性专门用于操作元素的类名
元素对象.classList.add(); //添加一个类名
元素对象.classList.remove();//删除一个类名
元素对象.classList.toggle();//切换一个类名(有则删除,没有则添加)
4 读写元素的文本内容(可读可写)
innerHTML 读写元素内部的文本内容和html代码
outerHTML 读写元素本身以及元素内部的文本内容和html代码
innerText 读写元素内部的文本内容(不包括html代码)
textContent 相比于innerText,会保留原文本的缩进格式
5 读取元素的尺寸(只读)
属性:
offsetWidth/offsetHeight 获取元素总宽高(内容+内边距+边框)
clientWidth/clientHeight 获取元素宽高(内容+内边距)
scrollWidth/scrollHeight 获取元素宽高(在clientWidth/clientHeight基础上加上溢出内容的大小)
方法:
getBoundingClientRect() 返回一个对象,其中有 width 和 height 属性,能够获取元素的总宽高,同 offsetWidht/offsetHeight
6 读取元素的位置(只读)
属性:
offsetLeft/offsetTop 获取相对于第一个定位的祖先元素的位置,如果其祖先元素都没有定位,则相对于整个页面
clientLeft/clientTop 获取元素左边框宽/上边框宽
方法:
getBoundingClientRect() 返回一个对象,对象中与位置有关的属性有(坐标原点是视口左上角):
left / top :可获取元素左上角在视口上的位置,与祖先元素是否定位无关
x / y : 同上
right / bottom : 可获取元素右下角在视口上的位置
7 读写元素中内容的滚动距离(可读可写)
前提:内容溢出,且给元素设置CSS属性overflow
的值不为visible
。
scrollLeft 设置或获取元素内容向左滚动的距离(值越大向左滚动得越多)
scrollTop 设置或获取元素内容向上滚动得距离(值越大向上滚动得越多)
//获取页面在视口中的垂直滚动距离(documentElement适用于Chrome,body适用于IE):
document.documentElement.scrollTop || document.body.scrollTop