JSDOM

目标：

• 能够说出什么是DOM
• 能够获取页面元素
• 能够给页面元素注册事件
• 能够操作DOM元素属性
• 能够创建元素
• 能够操作DOM节点

DOM简介

文档对象模型（Document Object Model,简称DOM）,是W3C组织推荐的处理可扩展标记语言的标准编程接口，通过它，可改变页面的内容、结构和样式。

获取元素

1. getElementById() 通过ID选择器获取
2. getElementByName() 通过name获取
3. getElementTagName() 通过标签获取
4. getElementClassName() 通过类名获取
5. querySelector() 获取选择器的第一个元素 H5
6. queryAllSelector() 获取选择器的所有元素 H5
7. document.getElement 获取html标签
8. document.body 获取body标签

事件基础

1. 事件源 获取元素
2. 注册事件
3. 写事件相关程序

操作元素

• 操作元素内容 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()

节点操作

1. 父节点 parentNode parentElement

2. 子节点： node.childNodes 返回一个NodeList集合，包含文本节点 和 元素节点

   ​ node.children 返回子元素节点集合

   ​ node.firstChild 返回树中节点的第一个子节点，如果节点是无子节点，则返回null

3. 兄弟节点： node.nextSibling 返回下一个兄弟节点 包含文本节点 和 元素节点

   ​ node.nextElementSibling 返回下一个兄弟元素节点

   ​ node.previousSibling 返回上一个兄弟节点 包含文本节点 和 元素节点

   ​ node.nextElementSibling 返回上一个兄弟元素节点

   以上都存在兼容性问题，IE9以下不支持，children除外

4. 创建元素节点： document.createElement(’ ')

5. 添加节点： node.appenChild(child) node是父节点，child是子节点 在后面追加节点 相当于push()

   ​ node.insertBefore(child,指定位置) 把一个元素插到指定元素的前面

6. 删除节点： node.removeChild(child)

7. 克隆节点： node.cloneNode( ) ul.children[0].cloneNode()

   ​ 如果括号参数为空或者为false,则是浅拷贝，即只克隆复制节点本身，不克隆里面的子节点。

三种动态创建元素的区别

• document.write( )

• element.innerHTML

• document.createElement( )

  区别:

  document.write( )每次创建元素都要重新绘制整个页面

  innerHTML不需要重新绘制页面

  innerHTML可以采用字符串拼接和数组方式创建元素，推荐使用数组的方式，效率更高

  createElement相比innerHTML的数组方式效率要低，但是它结构更清晰

总结

JS的DOM相当于是对元素实现 增、删、改、查、

• 点赞
• 收藏
• 分享
• 文章举报