DOM笔记之简计

Posted

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了DOM笔记之简计相关的知识,希望对你有一定的参考价值。

DOM(document Object model)文档对象模型
就是把html文档模型化,当做对象来处理

1 阻止a标签的默认行为
  return false
2 事件三要素
  事件源.事件=function(){事件处理程序}
3 批量操作
  1 批量获取元素通过标签名类名等等
  2 批量添加事件 for循环遍历
  3 replace方法 replace(要找的值,要替换的值)
4 常用属性
  a 标签常用标签属性
     dom对象的属性和html属性几乎一致,常用的又
     src title className href style
  b 内部文本属性
     innerHtml 获取和设置标签中的内容 设置的内容
     会当做节点对象解析到dom树上
     innerText 获取和设置标签中的内容,设置的内容
     会被当做普通文本
     textContent 获取和设置标签的内容,蛇者的内容
     会被当做普通文本(兼容问题)
  c 常见表单属性
     type:设置input元素的类型
     value:设置input的值
     checked:设置input是否被选中
     selected:设置下啦列表select中option是否被选
     disabled:设置input是否被禁用,
  d 自定义属性必须以data-开头
     getAttribute() 获取标签属性
     setAttribute() 设置标签属性
     removeAttribute() 移除标签属性属性
     style属性是对象 ,style对象的属性是字符串
     style只能获取和设置行内样式

5 动态创建结构
   1 插入和移除节点
    在父元素中的最后追加子元素(appendchild)
    在父元素中的某个子元素前面插入子元素 (insertBefore)
    在父元素中移除子元素,(removeChild)
   2 js动态创建结构
   1 直接在文档中写document.write("内容")
   2 改变元素对象内部的html innerHTML="内容"
   使用字符串或者数组,先拼接再用innerHTML添加
   3 创建或者克隆节点并住家,参数是true是深复制
   document.createElement()

以上是关于DOM笔记之简计的主要内容,如果未能解决你的问题,请参考以下文章

DOM2和DOM3读书笔记

前端笔记什么是虚拟 DOM

前端笔记什么是虚拟 DOM

如鹏网学习笔记DOM

javascript学习笔记整理(DOM对象)

笔记Vue源码解析之虚拟DOM和diff算法