dom文档

dom

选择器

• 作用：选中html元素，在js中以对象形式存在，
• js通过对dom对象下属性多次赋值，以及api使用，完成页面动画
• 注意：选择器返回值，有的是dom对象，有的集合，如果是集合，需要从集合中取值获取dom对象

document.api

• document.getElementById()
• document.getElementsByClassName();
• document.getElementsByTagName();
• document.querySelector()
• document.querySelectorAll()
• …

区别

• 1：getElement…() 返回是 HTMLCollection,当使用 remove() removeChild() 删除时，集合长度会变短
• 2：querySelectAll 返回NodeList 当remove() removeChild() 删除时，集合长度不变

HTMLCollection 与 NodeList的区别是什么？

操作dom对象的api

增

• prentDOM.appendChild()
  删
• prentDOM.removeChild()
  改
• prentDOM.replaceChild(NEW,old)
  查
• 查父元素 dom.parentElement;
• 查子元素们 dom.children
• 查兄弟 dom.nextElementSibling / dom.previousElementSibling

form

• 1:如何获取form对象
• 2：form中api reset() submit()
• 3: input focus() blur()
• 4: 验证是选中checkbox

demo

• 多选
• 单选

for循环中，dom事件绑定，事件处理函数中，如何获取触发事件的元素？
根据触发事件元素，查找相关的兄弟元素，子元素 父元素 以及祖籍元素

如何获取触发事件的元素

• 1：闭包
• 2：this
• 3: var 变 let