DOM操作
获取页面中元素的方法:
document.getElementById();
context.getElementsByName(tagName);
把指定容器中子孙辈的所有标签名为tagName的标签都获取到了
context.getElementsByClassName(className)
IE6-8不兼容
context.getElementsByName(name)
只对表单元素起作用
document.body();
document.documentElement();
context.querySelector();/context.querySelectorAll()
移动端常用,IE6-8不兼容,通过它获取到的集合是不存在DOM映射的
描述节点和节点之间关系的属性,标准浏览器中会把换行和空格当做节点处理
childNodes
获取所有子节点,包括文本注释等
children
获取所有元素子节点,IE6-8下获取的结果和标准浏览器下获取的结果不一致
parentNode
父节点
previousSibling/previousElementSibling
上一个(元素)哥哥节点
nextSibling/nextElementSibling
lastChild/lastElementChild
firstChild/firstElementChild
所有带element
的都在IE6-8下不兼容
一个页面中最常用的节点有四种,文本,注释,元素,document
元素节点
:nodeType:1;noneName:大写的标签名;nodevalue:none
注释节点
:nodeType:3;noneName:#text;nodevalue:文本内容
文本节点
:nodeType:8;noneName:#commont;nodevalue:注释内容
document节点
:nodeType:9;noneName:#document;nodevalue:none
通过nodeType
属性即可知道当前节点的类型
动态操作DOM的方法(DOM的增删改)
createElement
:创建标签
document.createDocumentFragment
:创建文档碎片
appendChild
:添加到当前元素的末尾
insertBefore
:添加到当前元素之前
cloneNode(true/false)
:深(浅)克隆当前元素
replaceChild/removeChild
:替换/移除子节点
get/set/removeAttribute
:获取/设置/删除自定义的属性
DOM盒子模型
clientHeight/clientWidth
clientLeft/clientTop
offsetHeight/offsetWidth
offsetLeft/offsetTop
offsetParent
scrollHeight/scrollWidth
scrollLeft/scrollTop
getComputedStyle
currentStyle