13前端javascript——DOM元素获取和操作
-
DOM:document object model
-
dom：一个页面就是一个文档document
-
节点：所有的内容都是节点node
-
标签节点
-
属性节点
-
文本节点
-
注释节点
-
-
元素：所有的标签都是元素element
getElementById('id')通过ID获取元素
-
返回时一个元素对象
getElementsByTagName('标签名')通过标签名获取元素
-
返回的是匹配的多个对象的伪数组：不能用push等方法
getElementsByClassName(‘类名’)通过类获取元素
querySeletor('选择器')返回指定选择器的第一个元素对象
-
‘#id’
-
‘.类名’
-
‘标签名’
querySeletorAll('选择器')返回指定选择器的所有元素对象的集合
-
返回的是一个伪数组
-
‘#id’
-
‘.类名’
-
‘标签名’
document.body获取body元素对象
document.documentElement返回html元素对象
事件
-
执行事件的步骤
-
获取事件源
-
绑定注册事件
-
添加事件处理程序
-
操作元素
innerText()修改元素内容，
-
从起始位置到终止位置
-
去除html标签、空格、换行
-
不识别html标签
innerHTML()修改元素内容
-
从起始位置到终止位置
-
保留空格、换行、html标签
-
识别html标签
获取和修改元素内部属性
-
修改img元素属性：img.src、img.title、img.href
-
修改form元素属性：form.type、form.value、form.checked、form.selected、form.disabled等
-
修改样式属性element.style行内样式操作
-
element.style.属性名 = ‘ ’
-
操作自定义属性
-
获取元素属性
-
element.属性只能获取内部属性
-
element.getAttribute（‘属性名’）自定义属性
-
element.dataset.'属性名' 或者element.dataset['属性名']
H5新增：dataset是一个集合，里面存放的所有以data开头的自定义属性
-
-
修改属性值
-
elment.属性 = ‘值’
-
element.setAttribute('属性名'，'值')
-
-
移除属性
-
element.removeAttribute('属性名')
-
-
h5要求自定义属性要以-data开头
操作节点
-
节点一般包括：
-
节点类型（元素节点1、属性节点2、文本节点3）
-
节点名称
-
节点值
-
-
父节点：node.parentNode 返回node节点的最近父节点，如果没有返回null
-
parentNode.childNodes 返回包含指定节点的子节点集合（啥类型的节点都有）
-
parentNode.children 返回所有子元素节点，无返回null
-
parentNode.firstChild 返回第一个子节点，无返回null
-
parentNode.lastChild 返回最后一个子节点，无返回null
-
parentNode.firstElementChild 返回第一个子元素节点，无返回null
-
parentNode.lastElementChild 返回最后一个子元素节点，无返回null
-
node.nextSibling 返回下一个兄弟节点
-
node.previousSibling 返回上一个兄弟节点
-
node.nextElementSibling 返回下一个兄弟元素节点ie9
-
node.previousElementSibling 返回上一个兄弟元素节点ie9
-
-
node.appendChild(child) 将节点添加到父节点的列表末尾
-
node.insertBefore(child,指定元素) 在父元素指定元素前插入节点 记住：要先创建节点，再追加节点
-
node.removeChild(child) 删除节点
-
node.cloneNode(xxx) 克隆之后要添加节点 如果xxx为空false，则是浅拷贝，只拷贝标签，不拷贝内容
