20200901戚权

知识点:

1. DOM 五中用法:增删改查,事件绑定

2. DOM操作流程:
   构建DOM树(先在头脑中构建DOM树)
   查找触发事件的元素
   绑定事件处理函数:在事件处理函数内部，查找要操作的元素，对元素进行修改/增加/删除

3. 按HTML vs 按选择器:

   • 返回值:1.按HTML，返回动态集合，不实际存储所有内容，只返回本次所需的内容，如果重复访问集合，就需要重新查找DOM树，优点是首次查找速度快，缺点是反复访问集合，会导致反复查找DOM树（会根据页面元素的变化而变化）；2.selector API，返回非动态集合，可以直接存储所有数据，即使反复访问集合，也不需要反复查找DOM树
   • 首次查询效率:1.按HTML效率更高，仅返回需要的内容，不需要准备完整数据；2.selector API低，第一次要返回完整数据
   • 易用性:1.按HTML繁琐；2.selector API简单
   • 什么时候使用:1.如果只凭一个条件即可获得想要的元素时，首选按HTML查找；2.如果需要多级复杂条件查找才能获得想要的元素时，用selector API

4. 修改元素:

   • elem.innerHTML:获取或设置开始标签到结束标签之间的原始的html代码片段，获取元素的HTML内容时，返回原始的HTML代码内容，修改元素的HTML内容时，先将新的HTML代码内容提交给浏览器解析后，再显示在元素内部
   • elem.textContent:获取或设置开始标签到结束标签之间的纯文本内容，获取元素的纯文本内容时，textContent会去掉内嵌标签，还会将特殊符号翻译为正文，修改元素的纯文本内容时，不会将新内容交给浏览器解析，而是直接原样显示在元素内部
   • elem.innerText:innerText用法同textContent一样，只不过具有兼容性要求(IE8+
   • elem.value:获取或修改表单元素的值注意：获取表单元素的值不能用 “.innerHTML"，因为表单元素多数是单标记，没有innerHTML，表单元素的内容都是用“.value”属性来获取或修改的