JavaScript 关于DOM操作小结 创建、 增、删、改、查、属性操作、事件操作

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 移除属性