DOM:文本对象模型
DOM树或dom tree
ele.nodeType:获取节点类型
元素节点:数字1
document节点:数字9
文本节点:数字3(包括纯文字、换行、注释等)
注释节点:数字8
属性节点:数字2
ele.childNodes:获取某个元素下所有子节点,包括元素子节点(是一个类数组)
ele.children: 找到某个元素下所有元素子节点(是一个类数组)。不是标准的属性,但是所有浏览器都支持。
ele.attributes:获取元素的属性节点(是一个类数组,可以通过nodeValue查看属性值,nodeName查看属性名)
ele.parentNode: 查找某个元素的父节点
ele.nextElementSibling:查找下一个兄弟节点
ele.previousElementSibling:查找上一个兄弟节点
ele.firstElementChild:查找第一个子节点
ele.lastElementChild:查找最后一个子节点
ele.offsetLeft:左外边框到有定位父级的左内边框的距离
ele.offsetTop:上外边框到有定位父级的上内边框的距离
ele.offsetParent:显示最近的有定位属性的祖先节点(如果祖先节点都没有定位,那么默认为body)
getComputedStyle(ele)[attr]:获取元素计算之后的最终样式
ele.getBoundingClientRect():获取某个元素的信息,返回值为一个对象,获取的值会根据滚动条的变化而变化(高版本:left, top,right,bottom,width,height)
ele.getAttribute(key值):获取元素的行间属性值,可以获取src、herf的相对地址
ele.setAttribute(key值,value值):设置元素的行间属性和属性值
ele.removeAttribute(key值):删除元素的行间属性
ele.cilentWidth/ele.cilentHeight:获取元素的宽高,不包括边框的宽度,包括padding
ele.offsetWidth/ele.offsetHeight:获取元素的宽高,包括边框的宽度,padding
document.documentElement.clientWidth/document.documentElement.clientHeight:获取可视区的宽高
document.createElement(tagName):创建元素节点
parentNode.appendChild(childNode):将创建的子节点添加到父节点末尾上(向父级末尾添加一个元素)
parentNode.insertBefore(childNode1,childNode2):在childNode2之前插入childNode1,若第二个参数为假,则默认将childNode1插入到父级的末位
parentNode.removeChild(childNodes):删除子节点,如果指定的子节点不存在,则会报错
parentNode.relpaceChild(node,childNode):使用node来替换childNode子节点
node.cloneNode(boolean):克隆一个节点(参数为true时,克隆元素和元素包含的子孙节点,若为false,则克隆元素但不包含子孙节点,事件是不会被克隆的)
操作表格:
table.tHead:获取表格头部
table.tFoot:获取表格底部
table.tBodies:获取表格主体(类数组
table.rows:获取表格所有行(类数组)
Table.rows[n].cells[m]:获取表格第n行第m个单元格(n,m从0开始计数)