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”属性来获取或修改的

评论

© 2021 成都云创动力科技有限公司 蜀ICP备20006351号-1