Javascript 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()删除时 集合长度不变

操作dom对象的api

增

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

form

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

demo

• 多选
• 单选

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

如何获取触发事件的元素

• 1.闭包

• 2.this

• 3.var 变 let

• 删除列表

练习相关元素的查找,以及 removeChild()的使用

• 新增列表

1.如何获取input输入框值
2.练习appendChild()的使用
3.没有关系的元素之间,如何建立联系,完成交互功能的