☆09☆DOM重点知识总结

•  DOM操作核心2步

  • 查找要操作的元素
  •  对元素绑定事件,或者修改元素属性

• 查找HTML中固定的元素对象方法:

  • 头部: document.head

  • 身体: document.body

  • 整个html: document.documentElement

• 按照元素之间的关系查找:

  • 所有子元素:[ children ]

  • 第一个子元素: [ firstElementChild ]

  • 最后一个子元素:[ lastElementChild ]

  • 父元素:[ parentElement ]

  • 上一个兄弟元素:[ previousElementSibling ]

  • 下一个兄弟元素:[ nextElementSibling ]

• 通过特征查找元素的方式:

  • 通过id查找:[ getElementById ]
  • 通过标签查找:[ getElementsByTagName ]
  • 通过class查找:[ getElementsByClassName ]
  • 通过name查找:[ getElementsByName ]

• 通过css选择器查找元素的方式:

  • 单个元素查找:[ querySelector ]

  • 多个元素查找:[ querySelectorAll ] , 此方法的返回值带有[ forEach ]方法,可以快速遍历

• 读取或设置表单元素的值

  • 通过[ value ]

• 读取或设置标签内容,有两种常见方式

  • 读取或设置文本内容:[ innerText ]

  • 读取或设置HTML内容:[ innerHTML ]

• 读取元素属性的通用方式:

  • 读取属性:[ getAttribute ]

  • 设置属性:[ setAttribute ]

  • 判断属性是否存在:[ hasAttribute ]

  • 移除属性:[ removeAttribute ]

• 为元素自定义属性使用[ data- ]， 读取自定义属性时的两种方式

  • 函数方式:[ getAttribute('data-') ]

  • 读值方式:[ dataset. ]

• 修改样式可以通过两个属性进行

  • 修改内联样式:[ style ]

  • 修改class :[ className ]

• JS创建元素

  • 通过[ createElement ]方法实现

• 子元素的操作

  • 把元素添加到子元素末尾使用:[ appendChild ]

  • 元素插入到某元素前使用:[ insertBefore ]

  • 替换某个子元素使用:[ replaceChild ]

  • 删除某个子元素使用:[ removeChild ]

• 创建DOM树

  • 利用[ 文档片段 ] , 可以把要添加的元素合并在一起，再统一加入DOM树

  • 创建这个对象的方法:[ createDocumentFragment ]

• 事件冒泡

  • 在一个元素上触发事件,会传导到其所有祖先元素上

• 事件委托

  • 通过在父元素添加事件监听,帮助子元素完成对应事件操作

• 阻止事件的传播

  • 通过事件的[ stopPropagation ]方法

• 阻止默认事件发生

  • 使用事件的[ preventDefault ]方法

• 页面滚动事件

  • 通过window的[ onscroll ]属性监听

• window提供的打开新窗口的方法:[ open ]

• 操作浏览器的历史

  • 使用[ history ]对象. 前进,回退都可以使用这个对象的[ go ]方法实现

• 获取浏览器当前页面相关信息

  • 使用[ location ] 对象

  • 其带有的[ replace ]方法，可替换当前URL地址

• 获取浏览器的插件信息等

  • 使用[ navigator ]对象

• 输入框的事件，四种常见的:

  • 获得焦点:[ focus ]

  • 失去焦点:[ blur ]

  • 内容变化:[ change ]

  • 实时监听:[ input ]

  • 键盘事件:[ keyup ]，其中keyCode=[ 13 ]代表回车

• 获取勾选框的勾选状态

  • 通过[ checked ] 属性

• 为元素的同一个事件,绑定多个函数

  • [ addEventListener ] 方法,