zoukankan      html  css  js  c++  java
  • day048 BOM和DOM

    BOM   Browser Object Model(文档对象模型)

    > window对象

    1、alert     弹出带有提示和一个确认按钮的警示框

    2、confirm       弹出带有一个提示和一个确认按钮一个取消按钮的对话框

    3、promt          弹出提示用户输入的对话框

    >计时器

    每隔一会儿就会执行一次某个动作

    设置计时器    setInterval(fun,time)

    取消计时器    clearInterval(id)

    >跳转

    location.href   #获取当前网页的url        

    location.search     #获取url的数据部分,即?号后面的内容

    location.href = url     #跳到指定的url去  (url不能省略协议名)

    DOM     Document Object Model(文档对象模型)

    > dom树结构

    > dom对象

    主要是两种:  document对象(文档对象)和element对象(元素对象)

    > 查找标签

    两种方式:

    1、直接查找     根据id、class、标签名、自定义名 来查找

    主要方法

    document.getElementById()     #通过id查找,得到一个元素对象

    document.getElementsByClassName()     #通过类名查找,得到一个元素对象数组

    document.getElementsByTagName()         #通过标签名查找,得到一个元素对象数组

    document.getElementsByName()             #通过自定义名查找,得到一个元素对象数组

    2、导航查找

    通过一个已定位的元素的查找其他元素

    nextElementSibling       #下一个兄弟节点标签

    previousElementSibling     #上一个兄弟节点标签

    children               #儿子节点标签

    firstElementChild    #第一个儿子节点标签

    lastElementchild     #最后一个儿子节点标签

    >事件绑定

    ele.on事件 = function(){    }

    >文本操作

    1、获取文本

    ele.innerHTML        #文本和标签都能取到

    ele.innerText           #只取文本

    2、赋值文本

    ele.innerHTML="<a href=' ' >123</a>"   # 赋的值可以作为标签处理

    ele.innerText = "<a href=' ' >123</a>"     #赋的值只作为纯文本处理

    >属性操作

    ele.setAttribute()       #设置一个属性

    ele.getAttribute()       #拿一个属性的值

    ele.removeAttribute()   #移除一个属性

    >class属性操作

    ele.classList.add()      #ele标签中class属性添加一个值

    ele.classList.remove()    #ele标签中class属性移除一个值

    >css操作  

    通过调style

    ele.style.color = 'red' 

    ele.style.fontSize = '32px'

    >value属性操作

    主要用于input, select, textarea 标签

    ele.value   #查询value值

    ele.value="值"   #添加value值

    >节点的增删改查

    1、创建节点对象

    let ele = document.createElement("标签名")   

    ele.setAttribute()     #给标签对象设置属性

    2、添加节点

    父节点.appendChild( newnode )

    父节点.insertChild(bewnode,某个节点)    #在某个节点前添加新节点

    注意:

    如果文档树中已经存在了 newchild,它将从文档树中删除,
    然后重新插入它的新位置。如果 newchild 是 DocumentFragment 节点,则不会直接插入它,
    而是把它的子节点按序插入当前节点的 childNodes[] 数组的末尾。
    所以,同一个节点对象只能在文档中出现一次。

    3、删除节点

    父节点.removeChild(节点)

    4、替换节点

    父节点.replaceChild(newnode, 某个节点)

    >事件

    onfocus    #获取光标

    onblur       #失去光标

    onselect    #选中文本

    onload        #页面或图像加载完成,也可以等某个线程完成

    onsubmit     #提交

    onchange          #内容替换事件(下列框,文件选择框)

    onmousedown    #鼠标按钮被按下

    onmousemove       #鼠标移动

    onmouseout           #鼠标从某个元素移开

    onmouseover          #鼠标移到某个元素上

    onmouseleave         #鼠标从某个元素移开(一般用这个)

    onkeydown             #某个按键被按下

    onkeypress             #某个键盘按键被按下并松开

    onkeyup                 #某个键盘按键被松开

  • 相关阅读:
    SpringBoot之OAuth2.0学习之客户端快速上手
    SpringBoot之oauth2.0学习之服务端配置快速上手
    基于Docker+Prometheus+Grafana监控SpringBoot健康信息
    SpringBoot+kafka+ELK分布式日志收集
    springmvc的异步处理
    WebFlux基础之响应式编程
    Webflux快速入门
    深入理解Spring的ImportSelector接口
    深入理解Spring的异步机制
    SpringSecurity学习之自定义过滤器
  • 原文地址:https://www.cnblogs.com/zhang-yl/p/10171344.html
Copyright © 2011-2022 走看看