JSDOM
目标:
- 能够说出什么是DOM
- 能够获取页面元素
- 能够给页面元素注册事件
- 能够操作DOM元素属性
- 能够创建元素
- 能够操作DOM节点
DOM简介
文档对象模型(Document Object Model,简称DOM),是W3C组织推荐的处理可扩展标记语言的标准编程接口,通过它,可改变页面的内容、结构和样式。
获取元素
- getElementById() 通过ID选择器获取
- getElementByName() 通过name获取
- getElementTagName() 通过标签获取
- getElementClassName() 通过类名获取
- querySelector() 获取选择器的第一个元素 H5
- queryAllSelector() 获取选择器的所有元素 H5
- document.getElement 获取html标签
- document.body 获取body标签
事件基础
- 事件源 获取元素
- 注册事件
- 写事件相关程序
操作元素
-
操作元素内容 innerText innerHTML
innerHTML 创建元素比较浪费内存,推荐将内容封在数组中
-
操作常见元素属性 src href title alt
-
操作表单属性 type value checked selectde disabled(禁用) element.disabled = true,这个元素禁用
-
操作元素样式属性: 行内样式操作 element.style 类名样式操作 element.className
-
循环精灵图 backgroundPosition
-
设置属性和获得属性值: element.setAttribute(属性名,属性值) element.getAttribute(‘属性名’)
-
移除属性:element.removeAttribute()
节点操作
-
父节点 parentNode parentElement
-
子节点: node.childNodes 返回一个NodeList集合,包含文本节点 和 元素节点
node.children 返回子元素节点集合
node.firstChild 返回树中节点的第一个子节点,如果节点是无子节点,则返回null
-
兄弟节点: node.nextSibling 返回下一个兄弟节点 包含文本节点 和 元素节点
node.nextElementSibling 返回下一个兄弟元素节点
node.previousSibling 返回上一个兄弟节点 包含文本节点 和 元素节点
node.nextElementSibling 返回上一个兄弟元素节点
以上都存在兼容性问题,IE9以下不支持,children除外
-
创建元素节点: document.createElement(’ ')
-
添加节点: node.appenChild(child) node是父节点,child是子节点 在后面追加节点 相当于push()
node.insertBefore(child,指定位置) 把一个元素插到指定元素的前面
-
删除节点: node.removeChild(child)
-
克隆节点: node.cloneNode( ) ul.children[0].cloneNode()
如果括号参数为空或者为false,则是浅拷贝,即只克隆复制节点本身,不克隆里面的子节点。
三种动态创建元素的区别
-
document.write( )
-
element.innerHTML
-
document.createElement( )
区别:
document.write( )每次创建元素都要重新绘制整个页面
innerHTML不需要重新绘制页面
innerHTML可以采用字符串拼接和数组方式创建元素,推荐使用数组的方式,效率更高
createElement相比innerHTML的数组方式效率要低,但是它结构更清晰
总结
JS的DOM相当于是对元素实现 增、删、改、查、