js组成 web API、DOM、获取元素的五种方法
详情请点击:点击跳转
关于dom操作
主要针对元素的操作
- 主要创建 增、删、改、查、属性操作、事件操作
创建
详情请跳转:点击跳转
- docunment.write( )
- innerHTML
- createElement
创建节点补充:
三种创建元素区别
- document.write
- element.innerHTML
- document.createElement
区别
- document.write( )是指直接将内容写入页面中的内容流 但是文档流执行完毕 则他会导致整个页面内容全部重绘 不建议使用
- element.innerHTML 是将内容写入DOM某个节点创建多个元素效率更高(不要拼接字符串,采取数字形式拼接)结构稍微复杂
- createElement() 创建多个元素效率会低一点 结构清晰
增
详情请跳转:点击跳转
- appendChlid 在元素后添加
- insertBefore 在元素前添加
删
详情请跳转:点击跳转
- removeChild
改
详情请跳转:点击跳转
主要修改dom元素属性 dom的元素内容、属性表单的值 等
- 修改元素属性 :src href title 等
- 修改普通元素内容:innerHTML、 innerText
- 修改表单元素 :value 、type 、disabled
- 修改元素样式:style 、className
查
主要查询dom元素
- 1 . dom提供API 方法 :老用法现在不推荐
getElementById、getElementsByTagName - 2 . H5新提供的方法: querySelector、querySelectorAll
- 3 . 利用节点操作获取元素
父节点:parentNode、子节点:children
兄节点:previousElementSibling、nextElementSibling
属性操作
主要针对于自定义属性
详情请跳转:点击跳转自定义属性
- setAttribute 设置dom 的属性值
- getAttribute 得到DOM的属性值
- removeAttribute 移除属性